Custom PDF, Word, and HTML Document Layouts

Our standard layout provides you with a number of options for your output documents. When you need even more control over the look and structure of a document, you can use the Custom Document Editor. This topic describes how to set up a custom layout.

Contents

Available on the Advanced and Enterprise tiers:

Essentials
Advanced
Enterprise

How custom layouts work

Custom layouts use a combination of HTML and CSS to generate the document based on a DRELClosed Data Reference Expression Language (DREL) is used to get form data and metadata and add it to a string, such as dates, usernames, or answers to questions in forms., Handlebars, or FreeMarker template.

When to use a custom layout

Custom layouts are intended for documents linked to a single form or to a set of related forms.

Examples of custom layouts

The following examples show PDF documents that were set up with custom layouts.

Prerequisites

You must know how to use:

  • HTML and CSS
  • DREL, Handlebars, or FreeMarker

Set up the custom layout

  1. Navigate to your document, and then select Edit Document.

  2. On the Formatting tab, in the Body Layout section, select Custom.

    "Body Layout" for PDF Document formatting

    Result: The system displays the custom layout options.

  3. In the Template Options section, select a Template Type. The following table can help you decide which template to use.

    Template Type Description CSS Formatting Include Images Include Subrecords (Repeatable Sections) Loops Conditional Formatting

    DREL

    • TrueContext proprietary reference language.
    • Low-code and simplest to use, but with limited functionality.

    Handlebars

    • A common template language, simple enough for non-developers.
    • Includes HTML and CSS editors.
    • Powerful enough for most document layouts.
    • Documented examples in the TrueContext Documentation Portal.
    FreeMarker
    • Requires developer-level skill and knowledge.
  4. Select Launch Document Editor.

    Template Options section that shows Handlebars as the selected "Template Type" and the "Launch Document Editor" button that you use to start your custom layout setup.

    Result: The Custom Document Editor opens in a new window.

  5. On the Reference Data tab, select a form and a record (form submission).

    Result: The system populates the tab with the information you need to map answers to the document structure.

    Handlebars example

    The reference data shows the structure of the record (form submission). Use this information to map the pages, sections, and questions to the structure of your document.

    Reference data for a Handlebars example that shows the structure of the submitted record.

    DREL example

    The reference data shows the names of pages and sections and a list of DREL expressions used to reference data in those sections. You can copy and paste (or drag and drop) the DREL into your document.

    DREL reference data that shows a list of page and section names, along with DREL expressions such as %a[Account Name].

  6. Set up the structure and style of your document. The reference data helps you map the answers to the HTML elements.

    • For Handlebars and FreeMarker, set up the structure on the HTML tab and the style on the CSS tab.

      Info:We support a subset of Handlebars functionality as described in the various Handlebars topics.

      The Insert HTML list helps you quickly add HTML for commonly-used formats. On the CSS tab, you can choose an out-of-the-box theme or add your own styles.

      Note:Not all CSS tags are supported by the document generator. Be sure to preview and test your documents as described in step 7.

    • For DREL, a WYSIWYGClosed What You See is What You Get. The input looks similar to the output. editor helps you to structure and style the document content.

      You can drag and drop DREL expressions and text from the Reference Data tab into the editor.

      WYSIWYG editor that shows a "Timesheet" table with DREL expressions, including %u for the user who submitted the record and %a[Todays Date] for the answer to that question.

  7. Preview your document.

    Note:We strongly recommend that you:
    • Preview your document in the format you intend to deploy to production. Some formatting, such as page breaks, won’t show in HTML, but will show on a PDF.
    • Use different data sets (submissions) to thoroughly test the output.

Related topics