Working With Liquid Code

Depending on your custom requirements, additional tasks with respect to Liquid templates can involve:


Be aware that creating and modifying Liquid templates requires profound skills in web development techniques, in particular, Liquid template language and Cascading Style Sheets (CSS).

Creating and maintaining Liquid templates constitutes custom development. Related issues are therefore not covered by the general maintenance and support contract for JustOn.

Accessing Liquid Template Debug Mode

The debug mode for Liquid templates provides an additional option that shows the underlying data structure.

  1. Open the detail view of the corresponding record (invoice, dunning reminder or account statement).

    In Salesforce Lightning, a standard URL of an invoice, for example, may look like https://<server>/lightning/r/ONB2__Invoice__c/<id>/view.

  2. Modify the URL as follows.

    1. Replace the complete path with apex/ONB2__InvoicePDF2?id=<id>.

      For dunning reminders or account statements, use apex/ONB2__DunningPDF2?id=<id>, respectively.

    2. Append the intended URL parameter.

      URL Parameter Description
      &debug=true Shows the resulting HTML before it is processed by the PDF generator.
      &debug=data Shows the data structure (JSON) included in the Liquid template.

    The resulting URL may look like

  3. Press Enter.

    This opens the intermediate HTML file (or JSON structure, respectively), which you can now inspect using your tool of choice.

Using Custom Liquid Filters

In the Liquid template language, filters modify the output of the content to be displayed (see Introduction in the Liquid documentation). To support invoice-related templates, JustOn has introduced the following new filters:

  • currency with optional parameters: fractionDigits
  • decimal with optional parameters: maximumFractionDigits, minimumFractionDigits
  • percent with optional parameters: maximumFractionDigits, minimumFractionDigits


Parameters override global settings.

Filter parameter examples
{{ grandTotal | currency }}
{{ grandTotal | currency: 2 }}
{{ quantity | decimal }}
{{ quantity | decimal: 2, 2 }}
{{ quantity | decimal: 5, 2 }}
{{ commission | percent: 3 }}
{{ commission | percent: 3, 1 }}

Embedding Assets

In the Liquid template language, assets are embedded directly via data URIs.


To embed a font, use data URIs, like illustrated in the following code, where <#> is the base64 encoded font data:

<style type="text/css">
    @font-face {
        font-family: 'open_sansregular';
        src: url(data:application/font-woff2;charset=utf-8;base64,<#>) format("woff2");
        font-weight: normal;
        font-style: normal;
    body {
        font-family: 'open_sansregular';


To generate the data URIs and the base64 strings for fonts, you can use webfont generators like, for example, the Font Squirrel Webfont Generator.


To embed an image, use data URIs, like illustrated in the following code, where <#> is the base64 encoded image data:

<img class="logo-img" width="200" alt="Logo" src="data:image/png;base64,<#>"/>