Custom PDF, Word, and HTML Document Layouts

Our Standard layouts are designed to work with any form, and they support our Multi-Language Feature. Standard layouts offer a variety of formatting options that you can use to tailor your business document or report. When you need even more control over your document layout and structure, use a Custom Layout. This topic describes how to set up a custom layout.

Contents

• Custom PDF, Word, and HTML Document Layouts
  • How custom layouts work
  • When to use a custom layout
  • Examples of custom layouts
  • Prerequisites
  • Set up the custom layout
  • Related topics

Available on the Advanced and Enterprise tiers:

How custom layouts work

Custom layouts use a combination of HTML and CSS to generate the document based on a DREL, 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.

Tip:A custom layout takes more work to build and maintain than a standard layout, but provides you with more formatting options. Use custom layouts as needed and test them using actual data from submitted records.

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.

   

   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.

   Things to consider	DREL 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.	FreeMarker	Handlebars
   Programming skills	None required	Basic scripting and programming	Basic scripting and programming Tip:Our Handlebars implementation is a subset of the Handlebars framework. When you use the TrueContext version of the Handlebars templating engine, you build your template using JavaScript syntax.
   Learning curve	Easy to Medium	Medium to Hard	Easy to Medium
   Code readability	Medium	Medium	High (easiest to read)
   Best for	“Flat” forms that don’t have Repeatable Sections or images to display in the output	Complex logic, formatting, and mathematical operations	Basic logic and formatting
   Outputs	PDF, Word, HTML, text	PDF, Word, HTML, text	PDF, Word, HTML, text
   Repeatable Sections (“loops”)	Limited support	Full support	Full support
   Conditional logic in the template	Not supported	Advanced	Basic to Intermediate
   Formatting and styles using CSS	Limited	Extensive	Moderate
   Resources for help and troubleshooting	TrueContext documentation and TrueContext Community	Apache documentation, large user community, and TrueContext documentation	TrueContext documentation and large user community

4. Did you select DREL as the Template Type?

   • If yes, go to step 5.

   • If no, select a Data Node Format.

     Choose one of the following options:

     • Standard—This option provides the form elements in an array that you can loop over. Use this option when you want to apply generic logic to all elements of your form.

       

     • All Labels as Node Names—Uses the page, section, and answer unique IDs (labels) instead of the generic names.

       Tip:This option gives you precise labels you can use to reference specific nodes in the submitted record. Use this option when you want to place specific answers in specific places in your template output. The examples in this topic all use this setting.

       

     • Flat Answer List—Changes the hierarchical tree structure into a flat data structure (list). Use this option when you want to loop over answers and don’t need to reference the full form structure (pages, sections, or Repeatable Sections).

       

5. Select Launch Document Editor.

   

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

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

   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.

   

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

   

7. 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 properties are supported by the document generator. Be sure to preview and test your documents as described in step 8.

   • For DREL, a WYSIWYG 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.

     

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

• Print out All Questions/Answers in a Regular Section
• Print all Repeatable Section Entries in a Table
• Conditionally Include Answers
• Add Conditional Formatting