Advanced templating (Handlebars)
Using the Handlebar templating engine to create advanced templates
By default, Lob uses a basic templating engine based on Mustache. If you would like to render complex personalizations, use the alternate Handlebars templating engine route through Lob API. Handlebars syntax allows you to populate, evaluate, and iterate using templates and API requests. The biggest advantage of this approach is quickly creating dynamic personalization without making any changes to your codebase. We can use advanced templating to make dynamic tables.
- 1.Start with any Handlebars-friendly template. Dynamic variables should be wrapped in double curly braces
{{like_this}}
. To the right is an example of a simplehandlebars
template.
<html>
Name is: {{user.name}}
Location is: {{user.location}}
</html>
- 2.To push your template to a Lob environment, use the
/v1/templates
API. Creating Handlebars templates via the Dashboard UI is not supported at this time. To specify that our service should use the Handlebars templating engine, you will need passhandlebars
in the template requestengine
field as shown on the right.
POST
[/v1/templates](<https://api.lob.com/v1/templates>)/
{
"description":"Test Template",
"html":"<html>Name is: {{user.name}} <br>
Location is: {{user.location}} </html>",
"engine":"handlebars",
"required_vars": ["user"] //optional
}
Response
{
"id": "tmpl_81ff8f64ce61285",
....
}
Note the optional field,
required_vars
. Any request to create a mailpiece using this template will require the variables listed there in order to complete successfully.You can use this newly created endpoint to test that your Handlebars template compiles as expected. To do that, use the
/v1/templates/
endpoint and add your merge variable(s) as a dynamic URL query parameter. You can use this to inspect how your template will display with the merge variables passed in. The response is the same format that Lob will use to render your mailpiece.GET
/v1/templates/:id/compile
?merge_vars={"someVar":"someVal"}
Returns HTML
Now that your template has been created in a Lob environment, the templating
engine
has been set to handlebars
, and you've tested out your template using the Template Compilation API, you can send a mailpiece request to the /v1/checks/
, /v1/postcards/
, /v1/letters/
or /v1/self_mailers/
endpoint as you normally would. In the request message body, use the merge_variables
field to pass in dynamic values.
The below helpers can be used for many dynamic use cases. Helpers like
if
blocks can include nested built-in and customer helper conditionals (like if
, and
, or
, eq
, etc).if
unless
each
with
lookup
You can use the
if
helper to conditionally render a block. If its argument returns false
, undefined
, null
, ""
, 0
, or []
, Handlebars will not render the block.
<div class="entry">
{{#if author}}
<h1>{{firstName}} {{lastName}}</h1>
{{/if}}
</div>
When you pass the following input to the above template:
{
author: true,
firstName: "Yehuda",
lastName: "Katz",
}
This will produce the result as below:
<div class="entry">
<h1>Yehuda Katz</h1>
</div>
If the input is an empty JSONObject
{}
, then author
will become undefined
and if
condition fails, resulting in the output as follow:<div class="entry"></div>
When using a block expression, you can specify a template section to run if the expression returns a falsey value. The section, marked by
else
is called an "else section".
<div class="entry">
{{#if author}}
<h1>{{firstName}} {{lastName}}</h1>
{{else}}
<h1>Unknown Author</h1>
{{/if}}
</div>
You can use the
unless
helper as the inverse of the if
helper. Its block will be rendered if the expression returns a falsy value.
<div class="entry">
{{#unless license}}
<h3 class="warning">WARNING: This entry does not have a license!</h3>
{{/unless}}
</div>
If looking up
license
under the current context returns a falsy value, Handlebars will render the warning. Otherwise, it will render nothing.You can iterate over a list using the built-in
each
helper. Inside the block, you can use this
to reference the element being iterated over.
<ul class="people_list">
{{#each people}}
<li>{{this}}</li>
{{/each}}
</ul>
when used with this context:
{
people: [
"Yehuda Katz",
"Alan Johnson",
"Charles Jolley",
],
}
will result in:
<ul class="people_list">
<li>Yehuda Katz</li>
<li>Alan Johnson</li>
<li>Charles Jolley</li>
</ul>
You can use the
this
expression in any context to reference the current context.You can optionally provide an
else
section which will display only when the list is empty.
{{#each paragraphs}}
<p>{{this}}</p>
{{else}}
<p class="empty">No content</p>
{{/each}}
When looping through items in
each
, you can optionally reference the current loop index via {{@index}}
.{{#each array}} {{@index}}: {{this}} {{/each}}
Additionally for object iteration,
{{@key}}
references the current key name:{{#each object}} {{@key}}: {{this}} {{/each}}
The first and last steps of iteration are noted via the
@first
and @last
variables when iterating over an array. When iterating over an object only the @first
is available. Nested each blocks may access the iteration variables via depth based paths. To access the parent index, for example, {{@../index}}
can be used.The
with
-helper allows you to change the evaluation context of template-part.
{{#with person}}
{{firstname}} {{lastname}}
{{/with}}
when used with this context:
{
person: {
firstname: "Yehuda",
lastname: "Katz",
},
}
will result in:
Yehuda Katz
with
can also be used with block parameters to define known references in the current block. The example above can be converted to
{{#with city as | city |}}
{{#with city.location as | loc |}}
{{city.name}}: {{loc.north}} {{loc.east}}
{{/with}}
{{/with}}
Which allows for complex templates to potentially provide clearer code than
../
depthed references allow for.You can optionally provide an
{{else}}
section which will display only when the passed value is empty.
{{#with city}}
{{city.name}} (not shown because there is no city)
{{else}}
No city found
{{/with}}
The
lookup
helper allows for dynamic parameter resolution using Handlebars variables.This is useful for resolving values for array indexes.
{{#each people}}
{{.}} lives in {{lookup ../cities @index}}
{{/each}}
It can also be used to lookup properties of object based on data from the input. The following is a more complex example that uses
lookup
in a sub-expression to change the evaluation contextto another object based on a property-value.
{{#each persons as | person |}}
{{name}} lives in {{#with (lookup ../cities [resident-in])~}}
{{name}} ({{country}})
{{/with}}
Custom helpers are additional functions that can assist in the formatting of your document. The documentation here is directly pulled from the associated third-party github repo. The helpers below are supported.
For uniformity with Handlebars' terminology, we use the word
falsey
instead of the more commonly used falsy
.Params
array
{Array}: Collectionn
{Number}: Starting index (number of items to exclude)returns
{Array}: Array exludingn
items.
Example
<!-- array: ['a', 'b', 'c'] -->
{{after array 1}}
<!-- results in: '["c"]' -->
Cast the given
value
to an array.Params
value
{any}returns
{Array}
Example
{{arrayify "foo"}}
<!-- results in: [ "foo" ] -->
Params
array
{Array}n
{Number}returns
{Array}: Array excluding items after the given number.
Example
<!-- array: ['a', 'b', 'c'] -->
{{before array 2}}
<!-- results in: '["a", "b"]' -->
Implementation of the default Handlebars loop helper {{#each}} adding index (0-based index) to the loop content
Params
array
{Array}options
{Object}returns
{String}
Example
<!-- array: ['a', 'b', 'c'] -->
{{#eachIndex array}}
{{item}} is {{index}}
{{/eachIndex}}
<!-- results in 'a is 0, b is 1, c is 2' -->
Block helper that filters the given array and renders the block for values that evaluate to
true
, otherwise the inverse block is returned.Params
array
{Array}value
{any}options
{Object}returns
{String}
Example
<!-- array: ['a', 'b', 'c'] -->
{{#filter array "foo"}}AAA
{{else}}BBB
{{/filter}}
<!-- results in: 'BBB' -->
Returns the first item, or first
n
items of an array.Params
array
{Array}n
{Number}: Number of items to return, starting at0
.returns
{Array}
Example
{{first "['a', 'b', 'c', 'd', 'e']" 2}}
<!-- results in: '["a", "b"]' -->
Iterates over each item in an array and exposes the current item in the array as context to the inner block. In addition to the current array item, the helper exposes the following variables to the inner block:
index
total
isFirst
isLast
Also,@index
is exposed as a private variable, and additional private variables may be defined as hash arguments.
Params
array
{Array}returns
{String}
Example
<!-- accounts = [
{'name': 'John', 'email': '[email protected]'},
{'name': 'Malcolm', 'email': '[email protected]'},
{'name': 'David', 'email': '[email protected]'}
] -->
{{#forEach accounts}}
<a href="mailto:{{ email }}" title="Send an email to {{ name }}">
{{ name }}
</a>{{#unless isLast}}, {{/unless}}
{{/forEach}}
Block helper that renders the block if an array has the given
value
. Optionally specify an inverse block to render when the array does not have the given value.Params
array
{Array}value
{any}options
{Object}returns
{String}
Example
<!-- array: ['a', 'b', 'c'] -->
{{#inArray array "d"}} foo{{else}} bar{{/inArray}}
<!-- results in: 'bar' -->
Returns true if
value
is an es5 array.Params
value
{any}: The value to test.returns
{Boolean}
Example
{{isArray "abc"}}
<!-- results in: false -->
<!-- array: [1, 2, 3] -->
{{isArray array}}
<!-- results in: true -->
Returns the item from
array
at index idx
.Params
array
{Array}idx
{Number}returns
{any}value
Example
<!-- array: ['a', 'b', 'c'] -->
{{itemAt array 1}}
<!-- results in: 'b' -->
Join all elements of array into a string, optionally using a given separator.
Params
array
{Array}separator
{String}: The separator to use. Defaults to,
.returns
{String}
Example
<!-- array: ['a', 'b', 'c'] -->
{{join array}}
<!-- results in: 'a, b, c' -->
{{join array '-'}}
<!-- results in: 'a-b-c' -->
Returns true if the the length of the given
value
is equal to the given length
. Can be used as a block or inline helper.Params
value
{Array|String}length
{Number}options
{Object}returns
{String}
<!-- var value = "example" -->
{{equalsLength value 7}}
<!-- results in: true -->
<!-- var value = "example" -->
{{equalsLength value 5}}
<!-- results in: false -->
Params
value
{Array|String}: Array or string.n
{Number}: Number of items to return from the end of the array.returns
{Array}
Example
<!-- var value = ['a', 'b', 'c', 'd', 'e'] -->
{{last value}}
<!-- results in: ['e'] -->
{{last value 2}}
<!-- results in: ['d', 'e'] -->
{{last value 3}}
<!-- results in: ['c', 'd', 'e'] -->
Returns the length of the given string or array.
Params
value
{Array|Object|String}returns
{Number}: The length of the value.
Example
{{length '["a", "b", "c"]'}}
<!-- results in: 3 -->
<! myArray = ['a', 'b', 'c', 'd', 'e']; -->
{{length myArray}}
<!-- results in: 5 -->
<!-- myObject = {'a': 'a', 'b': 'b'}; -->
{{length myObject}}
<!-- results in: 2 -->
Returns a new array, created by calling
function
on each element of the given array
. For example,Params
array
{Array}fn
{Function}returns
{String}
Example
<!-- array: ['a', 'b', 'c'], and "double" is afictitious function that duplicates letters -->
{{map array double}}
<!-- results in: '["aa", "bb", "cc"]' -->
Map over the given object or array or objects and create an array of values from the given
prop
. Dot-notation may be used (as a string) to get nested properties.Params
collection
{Array|Object}prop
{Function}returns
{String}
Example
// {{pluck items "data.title"}}
<!-- results in: '["aa", "bb", "cc"]' -->
Reverse the elements in an array, or the characters in a string.
Params
value
{Array|String}returns
{Array|String}: Returns the reversed string or array.
Example
<!-- value: 'abcd' -->
{{reverse value}}
<!-- results in: 'dcba' -->
<!-- value: ['a', 'b', 'c', 'd'] -->
{{reverse value}}
<!-- results in: ['d', 'c', 'b', 'a'] -->
Block helper that returns the block if the callback returns true for some value in the given array.
Params
array
{Array}iter
{Function}: Iteratee- {Options}: Handlebars provided options object
returns
{String}
Example
<!-- array: [1, 'b', 3] -->
{{#some array isString}}
Render me if the array has a string.{{else}} Render me if it doesn't.
{{/some}}
<!-- results in: 'Render me if the array has a string.' -->
Sort the given
array
. If an array of objects is passed, you may optionally pass a key
to sort on as the second argument. You may alternatively pass a sorting function as the second argument.Params
array
{Array}: the array to sort.key
{String|Function}: The object key to sort by, or sorting function.
Example
<!-- array: ['b', 'a', 'c'] -->
{{sort array}}
<!-- results in: '["a", "b", "c"]' -->
Sort an
array
. If an array of objects is passed, you may optionally pass a key
to sort on as the second argument. You may alternatively pass a sorting function as the second argument.Params
array
{Array}: the array to sort.props
{String|Function}: One or more properties to sort by, or sorting functions to use.
Example
<!-- array: [{a: 'zzz'}, {a: 'aaa'}] -->
{{sortBy array "a"}}
<!-- results in: '[{"a":"aaa"}, {"a":"zzz"}]' -->
Use the items in the array after the specified index as context inside a block. Opposite of withBefore.
Params
array
{Array}idx
{Number}options
{Object}returns
{Array}
Example
<!-- array: ['a', 'b', 'c', 'd', 'e'] -->
{{#withAfter array 3}} {{this}}{{/withAfter}}
<!-- results in: "de" -->
Use the items in the array before the specified index as context inside a block. Opposite of withAfter.
Params
array
{Array}idx
{Number}options
{Object}returns
{Array}
Example
<!-- array: ['a', 'b', 'c', 'd', 'e'] -->
{{#withBefore array 3}} {{this}}{{/withBefore}}
<!-- results in: 'ab' -->
Params
array
{Array}idx
{Number}options
{Object}returns
{String}
Example
<!-- array: ['a', 'b', 'c'] -->
{{#withFirst array}} {{this}}{{/withFirst}}
<!-- results in: 'a' -->
Block helper that groups array elements by given group
size
.Params
array
{Array}: The array to iterate oversize
{Number}: The desired length of each array "group"options
{Object}: Handlebars optionsreturns
{String}
Example
<!-- array: ['a','b','c','d','e','f','g','h'] -->
{{#withGroup array 4}}
{{#each this}} {{.}} {{each}} <br>{{/withGroup}}
<!-- results in: -->
<!-- 'a','b','c','d'<br> -->
<!-- 'e','f','g','h'<br> -->
Params
array
{Array}idx
{Number}: The starting index.options
{Object}returns
{String}
Example
<!-- array: ['a', 'b', 'c'] -->
{{#withLast array}} {{this}}{{/withLast}}
<!-- results in: 'c' -->
Block helper that sorts a collection and exposes the sorted collection as context inside the block.
Params
array
{Array}prop
{String}options
{Object}: Specifyreverse="true"
to reverse the array.returns
{String}
Example
<!-- array: ['b', 'a', 'c'] -->
{{#withSort array}}{{this}}{{/withSort}}
<!-- results in: 'abc' -->
Block helper that return an array with all duplicate values removed. Best used along with a each helper.
Params
array
{Array}options
{Object}returns
{Array}
Example
<!-- array: ['a', 'a', 'c', 'b', 'e', 'e'] -->
{{#each (unique array)}}{{.}}{{/each}}
<!-- results in: 'acbe' -->
Helper that renders the block if both of the given values are truthy. If an inverse block is specified it will be rendered when falsey. Works as a block helper, inline helper or subexpression.
Params
a
{any}b
{any}options
{Object}: Handlebars provided options objectreturns
{String}
Example
<!-- {great: true, magnificent: true} -->
{{#and great magnificent}}A{{else}}B{{/and}}
<!-- results in: 'A' -->
Render a block when a comparison of the first and third arguments returns true. The second argument is the arithemetic operator to use. You may also optionally specify an inverse block to render when falsey.
Params
a
{}operator
{}: The operator to use. Operators must be enclosed in quotes:">"
,"="
,"<="
, and so on.b
{}options
{Object}: Handlebars provided options objectreturns
{String}: Block, or if specified the inverse block is rendered if falsey.
Block helper that renders the block if
collection
has the given value
, using strict equality (===
) for comparison, otherwise the inverse block is rendered (if specified). If a startIndex
is specified and is negative, it is used as the offset from the end of the collection.Params
collection
{Array|Object|String}: The collection to iterate over.value
{any}: The value to check for.[startIndex=0]
{Number}: Optionally define the starting index.options
{Object}: Handlebars provided options object.
Example
<!-- array = ['a', 'b', 'c'] -->
{{#contains array "d"}} This will not be rendered.{{else}} This will be rendered.{{/contains}}
Returns the first value that is not undefined, otherwise the "default" value is returned.
Params
value
{any}defaultValue
{any}returns
{String}
Block helper that renders a block if
a
is equal to b
. If an inverse block is specified it will be rendered when falsey. You may optionally use the compare=""
hash argument for the second value.Params
a
{String}b
{String}options
{Object}: Handlebars provided options objectreturns
{String}: Block, or inverse block if specified and falsey.
Example
{
"state":"California"
}