Blogs

Be the first person to like this.
The new HTML template is quite flexible. With the merge fields and decorator functions, you can easily manipulate the data, to format, filter, group, transform, aggregate data. You can also use custom CSS to adjust the page layout,  look-and-feel, page break, etc. However, there will always be use cases we can't support out of the box. You then need to use Javascript to extend the OOTB functionalities. How To Add Javascript to Your HTML Template To write Javascript in your template, you can: Add an HTML component to your template. Write HTML/Javascript in the HTML Content textarea input. For example: <strong id='greeting'></strong> <script> ...
0 comments
2 people like this.
It's quite a common requirement to add a barcode in an invoice document. In the new HTML template, you have two options to do this. The built-in merge field function Wp_Barcode Custom JavaScript Wp_Barcode We provide a function, Wp_Barcode , to generate barcode images, you can use it in your template as a merge field. Usage Here's an example to generate a QR code. {{#Wp_Barcode}} QR_CODE,imageWidth=100 Hello QR Code. {{/Wp_Barcode}} It will generate an img HTML tag like: <img width="100" src="data:png;base64,...." /> Note:   Wp_Barcode accepts at least two lines of content. The first ...
0 comments

Expression Evaluation

1 person likes this.
An Expression in the HTML template is a syntactic entity inside {{#Wp_Eval}}, {{/Wp_Eval}} section, it is a combination of one or more constants, variables(merge fields), and operators that the template engine interprets and computes to produce another value. For example: There are totally {{#Wp_Eval}} 1 + 2 {{/Wp_Eval}} items.​ Returns: There are totally 3 items. Expression with Merge Fields If you are familiar with the Mustache template engine, Wp_Eval is a lambda function,  and the expression is the argument of that function. The lambda function is invoked after all the merge fields are replaced with values, ...
0 comments

How GroupBy Works

2 people like this.
GroupBy is a function that accepts a list of objects as input and generates a grouped list as output.  It's a powerful tool to implement the use cases of total/subtotal. For example, group the invoice items with the same charge name together and show the subtotal amount of each charge. Data Transformation Given a list-type input Items like the following: [ { "A": "a1", "B": "b1", "C": "c1", "D": "d1" }, { "A": "a1", "B": "b1", "C": "c1", "D": "d2" }, { "A": "a1", "B": "b2", "C": "c1", "D": "d1" }, { "A": "a2" } ] The value object has four named properties: A, B, C, D. Items|GroupBy(A,B,C) will output the following: ...
0 comments
Be the first person to like this.
On December 14th, the Zuora Community hosted a Table Talk on Events and Notifications.  In the session, @Kewen Qu , Product Manager, Billing and @Leo Liu , Principal Architect provided an overview and demo of this upcoming feature including: The Vision Ability to Create,  Update, Preview Templates in the Online Editor Product Roadmap Comparison of Function and Performance Enablement Process (Exercise) Build an Invoice Template Faster Below, you will find the presentation and session recordings. See the FAQs on HTML Invoice Templates here . Presentation -  Download PDF AM Session Video ...
0 comments