Template Guide

• Templates describe the layout of an individual “form” that your users will see on their devices and through which they will collect data
• Fields are the individual items on a Template
• Components are the “types” of field that you can add to a Template

Components fall into four categories.

• appearance-*

Used simply to add a visual element to the template.

• capture-*

These components capture some information, and upload to it – in turn, this information is sent to Zapier or another recipient.

• computed-*

Computed components calculate a value based on other information in the template, such as capture-* or other computed-* components.

• section-*

Sections are used to group fields together, either for convenience or so that they can be manipulated as a group. They may be repeating or non-repeating. Repeating sections allow the group to repeat.

For details, see the Template Components list.

Depending on the component used for a field, that field will have a specific set of parameters that define it, and will provide specific pieces of information.

You will see the parameters in the Builder when you tap on the field.

You can also see them in the Builder’s JSON view.

{
    "type": "capture-signature",
    "label": "Customer Signature",
    "id": "customerSignature"
}

Most fields have a “label” property, simply a piece of text displayed adjacent to the field.

Use this to describe the item. Keep it short – users are unlikely to read long paragraphs here, especially on a small screen.

Many fields have an “id” property, used to identify that field and access its data.

• These are composed of upper- and lower-case letters
• The Builder will automatically generate an ID for a field based on the label you give it, but you can change this
• For “capture-” and “section-” components, the ID is used to label uploaded data
• For “capture-”, “section-” and “computed-” components, the ID is used to reference the data in code
• “appearance-” components don’t hold data, so they don’t need an ID

Often, there is a “default” value for a field, which can be pre-filled in the Template to avoid entering it every time.

Code can appear in computed-* components to perform calculations, or in some other circumstances such as the section-optional component as the logic for when the section should appear.

They are essentially JavaScript expressions, which will be executed as if in the context:

function myCode() {
    return expression;
}

Some special syntax is required when you want to use data from another field in the Template.

• another field in the same container

    #fieldId

• a field in the container’s container

    ##fieldId

• the number of repeats in a section – for non-repeating sections this is 0 or 1

    #sectionId.length

• a field inside a section – n is the repeat number, starting from 0, so it’s always zero for non-repeating sections

    #sectionId[n].#fieldId

Example: display total cost

Display total cost based on “hours” (capture-numeric) and “costPerHour” (capture-money).

Note: the value of a capture-money is 100 times the value displayed, so we need to divide by 100.

((#hours * #costPerHour) / 100).toLocaleString("et-EE", {style: "currency", currency: "EUR", minimumFractionDigits: 2})
• "et-EE" is the locale and determines the decimal separator
• first two letters are always lower-case and are the ISO 639-1 code for the language
• last two are optional, but if present are preceded by a dash, are always upper-case, and are the ISO 3166-1 alpha 2 code for the region
• "EUR" is the currency and determines the symbol

For example, if hours = 247 and costPerHour = 2560 (displays as “25.60”):

• "de-DE" and "EUR" → "6.323,20 €"
• "en-CA" and "CAD" → "$6,323.20"
• "en-GB" and "GBP" → "£6,323.20"
• "en-IE" and "EUR" → "€6,323.20"
• "fr-CA" and "CAD" → "6 323,20 $"
• "fr-FR" and "EUR" → "6 323,20 €"