Syntax

Documint templates use HandlebarsJs as the templating language. This means that Documint's variables syntax is the same as Handlebars variable syntax.

Basic Variables

To create a basic variable you'll give the variable a name without spaces or special characters and wrap it in double curly braces like so:

{{myFirstVariable}}

Depending on your integration setup you may not have the option to map variables to your data source and will need to configure your variables to target the data as it comes over.

Objects

Displaying properties from objects is pretty straightforward. All you have to do is first specify the name of the property where the object exists in your data then add a . and the name of the property on the object. This is called dot notation and is what we use to target sub-properties of objects.

{{ person.firstName}}

[objectObject] Error If your variable points to an object and not its sub-property then you will receive the [objectObject] error. To fix this, simply add the property on the object to the path in your variable. Example: {{contact}} => [objectObject] {{contact.name}} => Wile E. Coyote

Arrays

There are two ways to work with array (list) data in your template. You can either loop over an array and display all of the contents of the list like so:

{{#each items}}
{{this}}
{{/each}}

or you can display a single item in a list like so:

{{items.[0]}}

The example above will display only the first item in the list of items. Because lists in Documint are zero-based, the first item in a list is at position 0.

Advanced Variables

Accessing deeply nested variables

You can access values nested deep within your data by providing the path.

Rules:

  • to access a sub-property, use . then the name of the property

  • to access a specific item in an array, use the position of the item that you would like to access wrapped in . like so: item.0.name. This example will access the first item in the array since Documint arrays are zero-based.

  • If you are accessing a specific value in a primitive array (an array of numbers, text, or boolean values) then you will need to wrap the position number in square brackets like so: names.[1]. This example will display the second value in a list of names. An easy way to remember this is if the number is at the end of the path it needs to be wrapped in square brackets. Correct: {{names.[0]}} Incorrect: {{names.0}}

Acessing parent variables

If you are within the context of a sub-property in your data (ie. within a loop) you can access the parent data by using the ../ syntax in your variable like so:

{{#each items }} {{../customerName}} bought {{qty}}-{{name}} {{/each}}

In this example, we are trying to access the name of the customer from within a loop. Because we're looping over items we are within the context of the current item when we're trying to display the customer's name. Therefore, we use ../customerName to navigate one level up from the current context where the customerName property exists. You can use ../ as many times as you need to navigate up the data tree. (ie. ../../../var_name)

Obviously, this example is quite contrived but it demonstrates how to navigate up the data tree when the context has changed.

Path

A path is a string used to access a property deep within the data being merged with your template. For accessing nested properties within an object, use a . to access nested properties and [] to access a specific item in an array.

A path is a string used to access a property deep within the data being merged with your template. For accessing nested properties within an object, use a . to access nested properties and [] to access a specific item in an array.

// Data
{
    "items":[
        { "name":"Item #1", "qty":10, "price": 50 },
        { "name":"Item #2", "qty":6, "price": 100 }
    ],
    "total_amount": 1100,
    "customer":{
        "address":{
            "street":"123 Main St.",
            "city":"New York",
            "state":"New York"
        }
    }
}

//Path Examples
"items[0].price" // 50
"customer.address.street" // "123 Main St."

In the first example, we're giving the path to the price property of the first item in the items array. In the second example, we're giving the path to the more deeply nested customer street address.

Last updated