action.skip

Working With Liquid Code

← Configuring PDF Creation

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

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

    https://<server>/apex/ONB2__InvoicePDF2?id=<id>&debug=true

  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

Note

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.

Fonts

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';
    }
</style>

Info

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

Images

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,<#>"/>