Advanced templating (Handlebars)
Using the Handlebar templating engine to create advanced templates
Personalizing templates with Handlebars
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.
Creating a template
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 simplehandlebarstemplate.
<html>
Name is: {{user.name}}
Location is: {{user.location}}
</html>To push your template to a Lob environment, use the
/v1/templatesAPI. 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 passhandlebarsin the template requestenginefield 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.
Template compilation API
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.
Create a mailpiece using Handlebars
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.
Helpers
Built in helpers
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
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.
When you pass the following input to the above template:
This will produce the result as below:
If the input is an empty JSONObject {}, then author will become undefined and if condition fails, resulting in the output as follow:
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".
#each
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.
when used with this context:
will result in:
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.
When looping through items in each, you can optionally reference the current loop index via {{@index}}.
Additionally for object iteration, {{@key}} references the current key name:
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.
#with
The with-helper allows you to change the evaluation context of template-part.
when used with this context:
will result in:
with can also be used with block parameters to define known references in the current block. The example above can be converted to
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.
#lookup
The lookup helper allows for dynamic parameter resolution using Handlebars variables.
This is useful for resolving values for array indexes.
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.
Custom helpers
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 wordfalsey instead of the more commonly used falsy.
Array helpers
Returns all of the items in an array after the specified index. Opposite of before.
Params
array{Array}: Collectionn{Number}: Starting index (number of items to exclude)returns{Array}: Array exludingnitems.
Example
Cast the given value to an array.
Params
value{any}returns{Array}
Example
Return all of the items in the collection before the specified count. Opposite of after.
Params
array{Array}n{Number}returns{Array}: Array excluding items after the given number.
Example
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
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
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
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:
indextotalisFirstisLastAlso,@indexis exposed as a private variable, and additional private variables may be defined as hash arguments.
Params
array{Array}returns{String}
Example
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
Returns true if value is an es5 array.
Params
value{any}: The value to test.returns{Boolean}
Example
Returns the item from array at index idx.
Params
array{Array}idx{Number}returns{any}value
Example
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
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}
Returns the last item, or last n items of an array or string. Opposite of first.
Params
value{Array|String}: Array or string.n{Number}: Number of items to return from the end of the array.returns{Array}
Example
Returns the length of the given string or array.
Params
value{Array|Object|String}returns{Number}: The length of the value.
Example
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
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
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
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
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
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
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
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
Use the first item in a collection inside a handlebars block expression. Opposite of withLast.
Params
array{Array}idx{Number}options{Object}returns{String}
Example
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
Use the last item or n items in an array as context inside a block. Opposite of withFirst.
Params
array{Array}idx{Number}: The starting index.options{Object}returns{String}
Example
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
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
Comparison helpers
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
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
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
Block helper that renders a block if a is greater than 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.
Block helper that renders a block if a is greater than or 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.
Block helper that renders a block if value has pattern. If an inverse block is specified it will be rendered when falsey.
Params
val{any}: The value to check.pattern{any}: The pattern to check for.options{Object}: Handlebars provided options objectreturns{String}
Returns true if the given value is falsey. Uses the falsey library for comparisons. Please see that library for more information or to report bugs with this helper.
Params
val{any}options{Options}returns{Boolean}
Returns true if the given value is truthy. Uses the falsey library for comparisons. Please see that library for more information or to report bugs with this helper.
Params
val{any}options{Options}returns{Boolean}
Return true if the given value is an even number.
Params
number{Number}options{Object}: Handlebars provided options objectreturns{String}: Block, or inverse block if specified and falsey.
Example
Conditionally renders a block if the remainder is zero when a operand is divided by b. If an inverse block is specified it will be rendered when the remainder is not zero.
Params
{}: {Number}
{}: {Number}
options{Object}: Handlebars provided options objectreturns{String}: Block, or inverse block if specified and falsey.
Block helper that renders a block if value is an odd number. If an inverse block is specified it will be rendered when falsey.
Params
value{Object}options{Object}: Handlebars provided options objectreturns{String}: Block, or inverse block if specified and falsey.
Example
Block helper that renders a block if a is equal to b. If an inverse block is specified it will be rendered when falsey. Similar to eq but does not do strict equality.
Params
a{any}b{any}options{Object}: Handlebars provided options objectreturns{String}
Block helper that renders a block if a is not equal to b. If an inverse block is specified it will be rendered when falsey. Similar to unlessEq but does not use strict equality for comparisons.
Params
a{String}b{String}options{Object}: Handlebars provided options objectreturns{String}
Block helper that renders a block if a is less than 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
context{Object}options{Object}: Handlebars provided options objectreturns{String}: Block, or inverse block if specified and falsey.
Block helper that renders a block if a is less than or 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{Sring}b{Sring}options{Object}: Handlebars provided options objectreturns{String}: Block, or inverse block if specified and falsey.
Block helper that renders a block if neither of the given values are truthy. If an inverse block is specified it will be rendered when falsey.
Params
a{any}b{any}options{}: Handlebars options objectreturns{String}: Block, or inverse block if specified and falsey.
Returns true if val is falsey. Works as a block or inline helper.
Params
val{String}options{Object}: Handlebars provided options objectreturns{String}
Block helper that renders a block if any of the given values is truthy. If an inverse block is specified it will be rendered when falsey.
Params
arguments{...any}: Variable number of argumentsoptions{Object}: Handlebars options objectreturns{String}: Block, or inverse block if specified and falsey.
Example
Block helper that always renders the inverse block unless a is equal to b.
Params
a{String}b{String}options{Object}: Handlebars provided options objectreturns{String}: Inverse block by default, or block if falsey.
Block helper that always renders the inverse block unless a is greater than b.
Params
a{Object}: The default valueb{Object}: The value to compareoptions{Object}: Handlebars provided options objectreturns{String}: Inverse block by default, or block if falsey.
Block helper that always renders the inverse block unless a is less than b.
Params
a{Object}: The default valueb{Object}: The value to compareoptions{Object}: Handlebars provided options objectreturns{String}: Block, or inverse block if specified and falsey.
Block helper that always renders the inverse block unless a is greater than or equal to b.
Params
a{any}b{any}options{Object}: Handlebars provided options objectreturns{String}: Block, or inverse block if specified and falsey.
Block helper that always renders the inverse block unless a is less than or equal to b.
Params
a{any}b{any}options{Object}: Handlebars provided options objectreturns{String}: Block, or inverse block if specified and falsey.
String helpers
Append the specified suffix to the given string.
Params
str{String}suffix{String}returns{String}
Example
camelCase the characters in the given string.
Params
string{String}: The string to camelcase.returns{String}
Example
Capitalize the first word in a sentence.
Params
str{String}returns{String}
Example
Capitalize all words in a string.
Params
str{String}returns{String}
Example
Center a string using non-breaking spaces
Params
str{String}spaces{String}returns{String}
Like trim, but removes both extraneous whitespace and non-word characters from the beginning and end of a string.
Params
string{String}: The string to chop.returns{String}
Example
dash-case the characters in string. Replaces non-word characters and periods with hyphens.
Params
string{String}returns{String}
Example
dot.case the characters in string.
Params
string{String}returns{String}
Example
Lowercase all of the characters in the given string. Alias for lowercase.
Params
string{String}returns{String}
Example
Truncates a string to the specified length, and appends it with an elipsis, ….
Params
str{String}length{Number}: The desired length of the returned string.returns{String}: The truncated string.
Example
Replace spaces in a string with hyphens.
Params
str{String}returns{String}
Example
Return true if value is a string.
Params
value{String}returns{Boolean}
Example
Lowercase all characters in the given string.
Params
str{String}returns{String}
Example
Return the number of occurrences of substring within the given string.
Params
str{String}substring{String}returns{Number}: Number of occurrences
Example
PascalCase the characters in string.
Params
string{String}returns{String}
Example
path/case the characters in string.
Params
string{String}returns{String}
Example
Replace spaces in the given string with pluses.
Params
str{String}: The input stringreturns{String}: Input string with spaces replaced by plus signs
Example
Prepends the given string with the specified prefix.
Params
str{String}prefix{String}returns{String}
Example
Render a block without processing mustache templates inside the block.
Params
options{Object}returns{String}
Example
Remove all occurrences of substring from the given str.
Params
str{String}substring{String}returns{String}
Example
Remove the first occurrence of substring from the given str.
Params
str{String}substring{String}returns{String}
Example
Replace all occurrences of substring a with substring b.
Params
str{String}a{String}b{String}returns{String}
Example
Replace the first occurrence of substring a with substring b.
Params
str{String}a{String}b{String}returns{String}
Example
Reverse a string.
Params
str{String}returns{String}
Example
Sentence case the given string
Params
str{String}returns{String}
Example
snake_case the characters in the given string.
Params
string{String}returns{String}
Example
Split string by the given character.
Params
string{String}: The string to split.returns{String}character: Default is an empty string.
Example
Tests whether a string begins with the given prefix.
Params
prefix{String}testString{String}options{String}returns{String}
Example
Title case the given string.
Params
str{String}returns{String}
Example
Removes extraneous whitespace from the beginning and end of a string.
Params
string{String}: The string to trim.returns{String}
Example
Removes extraneous whitespace from the beginning of a string.
Params
string{String}: The string to trim.returns{String}
Example
Removes extraneous whitespace from the end of a string.
Params
string{String}: The string to trim.returns{String}
Example
Truncate a string to the specified length. Also see ellipsis.
Params
str{String}limit{Number}: The desired length of the returned string.suffix{String}: Optionally supply a string to use as a suffix to denote when the string has been truncated. Otherwise an ellipsis (…) will be used.returns{String}: The truncated string.
Example
Truncate a string to have the specified number of words. Also see truncate.
Params
str{String}limit{Number}: The desired length of the returned string.suffix{String}: Optionally supply a string to use as a suffix to denote when the string has been truncated.returns{String}: The truncated string.
Example
Uppercase all of the characters in the given string. Alias for uppercase.
Params
string{String}returns{String}
Example
Uppercase all of the characters in the given string. If used as a block helper it will uppercase the entire block. This helper does not support inverse blocks.
Params
str{String}: The string to uppercaseoptions{Object}: Handlebars options objectreturns{String}
Example
array{Array}: The array to iterate oversize{Number}: The desired length of each array "group"options{Object}: Handlebars optionsreturns{String}
Last updated
Was this helpful?

