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}}
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}}
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]}}
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 propertyto 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 ofnames
. 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
Was this helpful?