Handlebars Editors

The HTML AJAX, browser and server templates, and the email action's body and PDF properties, let you generate HTML using Handlebars (opens new window).

Handlebars templates are like regular HTML, but with embedded expressions between double braces. An expression is a dot delimited path into the JSON data supplied to the template with or without a "helper" or block expression. Depending on the field you're using, your JSON data can include the values of fields on your form, or the results of calls to other workers, services and End Points.

There's more information about how you can use Handlebars in your forms, including working with API Server responses, in the Handlebars Examples section.

Example Templates

The editor includes four example templates. These can be used as they are, or provide a starting point for your own templates.

Summary Cards and Tables

The default templates generate cards or tables that include all of the fields on a chosen page, or all of the fields on your form.  The form's description is included in a H1 tag.

For example, here's the summary table template generated for a single page form with four fields.

<div class="icmformdata">
    <h1>Tim&#x27;s Form</h1>
    <h2></h2>
    <table class="icmformdatapagetable">
        <tbody>
            <tr>
                <td colspan="2" class="icmformdatacontainer">Label</td>
            </tr>
            <tr>
                <td class="icmformdatalabel">First Name</td>
                <td class="icmformdatavalue">{{FIELD "FIRSTNAME"}}</td>
            </tr>
            <tr>
                <td class="icmformdatalabel">Family Name</td>
                <td class="icmformdatavalue">{{FIELD "FAMILYNAME"}}</td>
            </tr>
            <tr>
                <td class="icmformdatalabel">Address</td>
                <td class="icmformdatavalue"><pre>{{FIELD "ADDRESS"}}</pre>
                </td>
            </tr>
            <tr>
                <td class="icmformdatalabel">Location</td>
                <td class="icmformdatavalue">{{FIELD "LOCATION"}}</td>
            </tr>
        </tbody>
    </table>
</div>

Non Blanks

The non-blank versions of the templates will exclude fields that don't have a value. This is done by wrapping each potential row of the table in Handlebars #if helpers. Here's the non-blank version of the summary above. Note the use of (FIELD "FAMILYNAME") sub expressions.

<div class="icmformdata">
    <h1>Tim&#x27;s Form</h1>
    <h2></h2>
    <table class="icmformdatapagetable">
        <tbody>
            <tr>
                <td colspan="2" class="icmformdatacontainer">Label</td>
            </tr>
            {{#if (FIELD "FIRSTNAME") }}
                <tr>
                    <td class="icmformdatalabel">First Name</td>
                    <td class="icmformdatavalue">{{FIELD "FIRSTNAME"}}</td>
                </tr>
            {{/if}}
            {{#if (FIELD "FAMILYNAME") }}
                <tr>
                    <td class="icmformdatalabel">Family Name</td>
                    <td class="icmformdatavalue">{{FIELD "FAMILYNAME"}}</td>
                </tr>
            {{/if}}
            {{#if (FIELD "ADDRESS") }}
                <tr>
                    <td class="icmformdatalabel">Address</td>
                    <td class="icmformdatavalue"><pre>{{FIELD "ADDRESS"}}</pre>
                    </td>
                </tr>
            {{/if}}
            {{#if (FIELD "LOCATION") }}
                <tr>
                    <td class="icmformdatalabel">Location</td>
                    <td class="icmformdatavalue">{{FIELD "LOCATION"}}</td>
                </tr>
            {{/if}}
        </tbody>
    </table>
</div>

Repeating Pages

If your form includes repeating pages, the templates are able to display data from each instance of a page. See the Repeating Pages documentation for more information.

Handlebars Helpers

We've written a range of custom helpers that work with form fields and variables, file uploads, media items and can generate buttons. You can also use the open source Swag library.