Blogs

We last introduced HTML Invoice Templates to the Zuora Community at our December 2021 Table Talk with additional resources in our HTML Invoice Template community group. Fast forward to September 2023, we have several exciting updates which we shared in our most recent office hour with Alexis Camanga, Associate Product Manager, Dong Han, Software Engineering Manager, and Tony Shen, Senior Software Engineer. If you missed this session, please see the video and presentation below . We've also posted the session's Q&A in the HTML Invoice Template discussion group here . Zuora Tool Tip: Zuora Data Schema The Data Schema on the ...

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> ...

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 ...

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, ...

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: ...

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 . Learn More View Presentation [Playlist] HTMl Invoice ...