Displaying Field and Variable Values in your Form

The "Display" category of form fields includes HTML templates you can use to display the values of other fields and variables. They are often used at the end of a form to display a summary of what's been entered. The templates in these fields can include Handlebars expressions.

The three fields are:

• HTML Ajax Template - Use this field to make Ajax requests to public services (End Points or workers) and display the results as the user is interacting with your form
• HTML Browser-side Template - Use this field to create dynamic content that can include values of other fields and variables
• HTML Server-side Template - This is the most secure of the three fields and should be the most widely used. It can display the values of other fields on your form and results of server-side requests to the API Server

Summary Templates

The Handlebars editors include default templates that will automatically generate a summary of the form content.

Add one of the HTML template fields to your form. Press the sigma, Σ, button and select the Default Summary. You can pick a single page or all pages.

This table provides a really good starting point for you to work from. You may want to remove fields, add some Handlebars logic to the template, and update the CSS classes to match the styles used by your site.

Field Value Helper - FIELD

You can access the value of a field using the FIELD helper, like this {{FIELD "FIELDNAME"}}. There is no need to specify the page the field is on.

Variables Helper - VARIABLE

Variables can be used in HTML templates in a similar way to field values. They are accessed using {{VARIABLE "VariableName"}}. VariableName could be the name of a form variable field on your form.

You can use the VARIABLE helper with other Handlebars expressions. For example, if your variable were an object, you could iterate over it using the #each helper, like this:

{{#each (VARIABLE "OBJECT")}}{{this}}{{/each}}

Sub Expressions

FIELD and VARIABLE are special helpers we've added to the iCM form runtime. This means that if you want to use them alongside standard helpers (for example the #if, #else, #with helpers, or helpers from the Swag library) you'll need to be aware of Handlebars Sub Expressions (opens new window), which allow you to combine helpers by placing them in parentheses. The result from the inner expression (the one in parenthesis) is passed to the outer expression.

For example, to only display a section of your template if a certain field has a value:

{{#if (FIELD "MYFIELD") }}
    <p>Display this</p>
{{else}}
    <p>Display this</p>
{{/if}}

You can also combine Swag helpers and have multiple sub expressions. This example takes the value of FIELD7, reverses it, then converts it to uppercase.

{{uppercase (reverse (FIELD "FIELD7"))}}

Removing Whitespace

You can remove whitespace from either side of a statement using the tilde character inside the braces, like this {{FIELD "NAME"~}}. For more information, see https://handlebarsjs.com/guide/expressions.html#whitespace-control

Non-Escaped Values

In all of the examples above, the values that the templates display will be HTML escaped. That means special characters like & < and > will be output as &amp; &lt; and &gt; This guards against anything malicious being entered into your forms and then output to another user.

In some cases you might want to preserve special characters. If you do, you should consider the data that is being input and where it will be displayed, as you could create a security vulnerability or potential cross-site scripting attack. To access the non-escaped values there are two additional helpers, {{RAWVARIABLE "VariableName"}} and {{RAWFIELD "FIELDNAME"}}.

Example

This form uses a browser-side template. It has a form variable field that sets a variable called formVariable with the value "The value of my variable", and two text input fields. The values of all three are displayed in a table. The second text input field is wrapped in some if-else logic in the template.

Enter some values into the text boxes then change the focus (click outside of the input box) to see the table update.