How to use Handlebars in FormHero Studio

Discusses a variety of ways that can be used in FormHero Studio in both Filler and in dynamic PDFs.

Handlebars (angular templates) are implemented into FormHero studio to allow users to easily access and show the collected data. By simply placing the double curly braces around your data bindings, users can reference the collected data in different parts of the Smart Form, as well as the PDF Output.

In the Smart Form

As you proceed through the smart form by clicking “Next”, the data entered by the user on the panel is collected into the session storage. This means that any data collected on the previous panels can be referenced using Handlebars.

For example: on the first panel, a user is asked their name:

Screen Shot 2019-04-09 at 1.40.40 PM

When they click “Next”, the data is collected and can be used right away in the next page:

Screen Shot 2019-04-09 at 1.44.30 PM

How to Use Handlebars

The data binding name of the inputted first name is:

Screen Shot 2019-04-09 at 1.46.54 PM

In the next panel, I’ve referenced the data binding with curly braces in a raw HTML element so that the inputted name is what actually shows up.

Screen Shot 2019-04-09 at 1.50.23 PM

Note: Handlebars can be used directly in Headings and Raw HTML elements.

Use Cases in the Smart Form

  • For a more personal/conversation flow through the form (referencing the user’s name creates a sense of personalization)
  • For clarifying the content being collected if a user is filling out a form that involves multiple individual’s information (e.g. if there are multiple account holders in a bank form, and each one requires a witness to assign power of attorney, then referencing each account holder’s name in the witness information page will give the user a clear idea of what this information is in reference to (e.g. “Witness for Jim Bob”), rather than “Witness for Account Holder One”
  • For reviewing all collected data (specifically in the review panel), so users can see what they have inputted


Review Panels

Another place you will see handlebars being used is in the Submission Panel under the review section. When you “Enable Review”, FormHero Studio automatically generates a block of HTML that displays all the information the user has inputted.

Screen Shot 2019-04-09 at 2.47.34 PM

The HTML contains all the collected data using Handlebars from the Smart Form along with their labels.


Multi-choice Fields

With multi-choice fields, the response the user chooses is pushed into an array. If you leave the handlebar as it is generated from the document, the response would show as [“yes”] if it’s just one choice selected. In order to remove the square brackets, reference the index of the array per the image below.

Screen Shot 2019-04-09 at 2.52.11 PM


Handlebars in the PDF Output

Merge Data into a PDF Template

When you’re mapping data into a PDF, there are times when you may want to have more than one data-binding associated with one field. For example, in the smart form, we had requested the user to input their first name and last name in two separate fields, resulting in two separate data bindings to complete the name. In the PDF form, there is only one field for the full name. Using “Simple” mapping, you can only link one data binding.

Screen Shot 2019-04-09 at 3.04.22 PM

In this scenario, we can change the “Mapping Type” to template, and use handlebars to add in both names.

Screen Shot 2019-04-09 at 3.08.32 PM


Dynamic PDF Templates

In cases where you will be building your PDF dynamically using HTML or generating emails using HTML, you can use Handlebars.js in the same way for accessing collected data. In addition to that, you will have access to other built-in handlers.

Such as conditionals:

{ { if [conditional] } }

{ { /if } }

And also, iterative elements.

{ { each [itemArray]] } }

{ { /each } }

Here is an example:

Screen Shot 2019-04-09 at 3.20.43 PM


Using Handlebars, this HTML block is:

  • Conditionally showing only when the “specificAccounts” data binding is not undefined
  • Iteratively rendering the block of HTML between { { each X } } { { /each } } based on what is in the “specificAccounts” array.
  • Adding the collected data of { { account } } and { { sort } } as the input value of a field

In the above scenario, the user is asked to provide specific account information in a data table in the smart form(specificAccounts). With each account “object”, there is the account number { { account } }, and a sort code { { sort } }. Because the user could have added just one account, or multiple accounts, it is difficult to hard code this into the dynamic PDF file. Using { { each } } would allow the user to iterate over the specificAccounts data table as many times as it needs in order to render the appropriate number of accounts.


If you need to access information that is not included within the object your are looping through, using { { each }}, you can reference them using "../" .

For example, if you have the following data:


 "customer.number": "12345",
   "type": "savings",
   "balance": "$1"
   "type": "chequing",
   "balance": "$500"

Then you could loop through the information, and use the customer number, as follows:

{ {#each accounts} }

   The customer number is { { ../customer.number } }
   The account Type is: { { type } } 
   The balance is: { { balance } }

{ {/each} }