Handlebars

Handlebars is a JavaScript library used for creating dynamic templates.

It allows you to define templates with placeholders, and these placeholders are replaced with data when the template is triggered with the information sent in the payload.

Handlebars within Sortment support features like conditional operations, loops, date time formatting, partial searches, and custom helpers, making it a very cool tool to use when creating your templates.

Handlebars in Sortment's Templates

To understand how handlebars work, we first need to establish a sample payload, based off which the Handlebars function and applicability can be demonstrated.

{
  "members": [
    {
      "first_name": "John",
      "last_name": "Doe",
      "city": ""
    }
  ],
  "investments": [
    {
      "amount": 10,
      "company": "L&T"
    },
    {
      "amount": 20
    }
  ],
  "companies": {
    "L&T": "India",
    "Apple": "USA"
  },
  "user_type": "pro",
  "period": {
    "start": "2023-10-01",
    "end": "2023-10-03"
  },
  "classification": ["active", "pro"]
}

Sortment has default as well as custom handlebars that you can use in your templates. Let’s have a look at what these are and how to use them using the above payload and data as example responses.

Double Quotes within Handlebars {{" "}} may break your templates!

Double quote may break your syntax in HBS, especially in emails! And nobody wants that!

For example: Use {{math number1 '+' number2}} instead of {{math number1 "+" number2}}.

Use single quotes {{' '}} instead!

To access placeholder values

Format

{{key}}

Example

{{user_type}}

Output

pro

To access values of an object

Format

{{key.subkey}}

Example

{{period.start}} to {{period.end}}

Output

{{period.start}} to {{period.end}}

To access object values from an array

Format

{{key.index.subkey}}

Example

{{members.0.first_name}}

Output

John

To access values from an array

Format

{{key.index}}

Example

{{classification.0}}

Output

active

To avoid escaping the values

Format

{{{key}}}

Example

{{{investments.0.company}}}

Output

L&T

To get length of an array

Format

{{key.length}}

Example

User made {{investments.length}} investments

Output

User made 2 investments

To check if variable exists

Format

{{#if variable}}
  Content Here
{{else if variable}}
  Content Here
{{else}}
  Content Here
{{/if}}

Example

{{#if members.0.city}}
  City available for member 1 and may be member 2
{{else if members.1.city}}
  City available for member 2 only
{{else}}
  City not available for member 1 and 2
{{/if}}

Output

City available for member 1 and may be member 2

Approach 1: To check if variable equals a certain value

Format

{{#if (eq variable 'value')}}
  Content Here
{{else if (eq variable 'value')}}
  Content Here
{{/if}}

Example

{{#if (eq investments.0.company 'L&T')}}
  First investment was L&T
{{else if (eq investments.0.company 'Apple')}}
  First investment was Apple
{{else}}
  First investment was neither Apple nor L&T
{{/if}}

Output

First investment was L&T

Approach 2: To check if variable equals a certain value

Format

{{#ifEquals variable 'value'}}
  Content Here
{{else ifEquals variable 'value'}}
  Content Here
{{else}}
  Content Here
{{/ifEquals}}

Example

{{#ifEquals investments.0.company 'L&T'}}
  First investment was L&T
{{else ifEquals investments.0.company 'Apple'}}
  First investment was Apple
{{else}}
  First investment was neither Apple nor L&T
{{/ifEquals}}

Output

First investment was L&T

To check if multiple variables equal a certain value (AND and OR options)

Format

{{#if (and/or (eq/ne/lt/gt/lte/gte variable 'value') (eq/ne/lt/gt/lte/gte variable 'value'))}}
  Content Here
{{else}}
  Content Here
{{/if}}

Example

{{#if (or (eq investments.0.company 'L&T') (eq investments.0.company 'Apple'))}}
  First investment is either L&T OR Apple
{{/if}}

{{#if (and (eq investments.0.company 'L&T') (gt investments.0.amount 5))}}
  First investment is L&T and investment amount is greater than 5
{{/if}}

{{#if (and (ne user_type 'pro') (gte investments.0.amount 10))}}
  User is not pro but first investment is greater than or equal to 10
{{else if (and (eq user_type 'pro') (lt investments.0.amount 10))}}
  User type is pro but first investment is less than 10
{{else if (and (eq user_type 'pro') (eq investments.0.amount 10))}}
  User type is pro and first investment is equal to 10
{{/if}}

Output

First investment is either L&T OR Apple
First investment is L&T and investment amount is greater than 5
User type is pro and first investment is equal to 10

To check if variable equals a regular expression

Format

{{#ifMatches variable 'regex'}}
  Content Here
{{else ifMatches variable 'regex'}}
  Content Here
{{else}}
  Content Here
{{/ifMatches}}

Example

{{#ifMatches members.0.last_name 'Aga\*'}}
  Matched
{{else}}
  Not matched
{{/ifMatches}}

Output

Matched

To check if string starts with certain characters

Format

{{#ifStartsWith variable 'value'}}
  Content Here
{{else ifStartsWith variable 'value'}}
  Content Here
{{else}}
  Content Here
{{/ifStartsWith}}

Example

{{#ifStartsWith members.0.first_name 'A'}}
  Name starts with A
{{else}}
  Name does not start with A
{{/ifStartsWith}}

Output

Name starts with A

To use OR operator between two variables

Format

{{#compare var1 'or' var2}}
  Content Here
{{else compare var1 'or' var2}}
  Content Here
{{/compare}}

Example

{{#compare investments.0.amount 'or' investments.1.amount}}
  Invested at least once
{{else}}
  No investment made
{{/compare}}

Output

Invested at least once

To use AND operator between two variables

Format

{{#compare var1 'and' var2}}
  Content Here
{{else compare var1 'and' var2}}
  Content Here
{{/compare}}

Example

{{#compare investments.0.amount 'and' investments.1.amount}}
  Invested at least twice
{{else}}
  One or fewer investments made
{{/compare}}

Output

Invested at least twice

To use a specified default value if the actual value does not exist (or is null)

Format

{{default variable 'value'}}

Example

{{default members.0.city 'Bangalore'}}

Output

Bangalore

To sum two numbers

Format

{{math number1 '+' number2}}

Example

{{math investments.0.amount '+' investments.1.amount}}

Output

To subtract two numbers

Format

{{math number1 '-' number2}}

Example

{{math investments.1.amount '-' investments.0.amount}}

Output

To multiply two numbers

Format

{{math number1 '*' number2}}

Example

{{math investments.0.amount '*' investments.1.amount}}

Output

To divide numbers

Format

{{math number1 '/' number2}}

Example

{{math investments.0.amount '/' investments.1.amount}}

Output

0.5

To perform modulo

Format

{{math number1 '%' number2}}

Example

{{math investments.0.amount '%' investments.1.amount}}

Output

To round numbers

Format

{{math number 'round' decimal_places}}

Example

{{math investments.0.amount 'round' 2}}
{{math investments.0.amount 'round'}}

Output

10.00
10

To check for negative condition (show something only if key doesn't exist)

Format

{{#unless key}}
  Content Here
{{/unless}}

Example

{{#unless investments}}
  Investments were not made!
{{else}}
  Investments were made!
{{/unless}}

Output

Investments were made!

To iterate over a list/array

Format

{{#each key}}
  {{this.subkey}}
{{/each}}

Example

{{#each investments}}
  {{math @index '+' 1}}.
  {{{default this.company 'Not known'}}}
  - ${{this.amount}}
{{else}}
  No investments were made!
{{/each}}

Output

1. L&T - $10
2. Not known - $20

To use combination of conditions and nesting (advanced)

Format

{{#if variable}}
  Content Here
{{else}}
  {{#ifEquals variable 'value'}}
    Content Here
  {{else}}
    {{#ifMatches variable 'regex'}}
      Content Here
    {{else}}
      {{#ifStartsWith variable 'value'}}
        Content Here
      {{else}}
        {{#if (eq var1 var2)}}
          Content Here
        {{/if}}
      {{/ifStartsWith}}
    {{/ifMatches}}
  {{/ifEquals}}
{{/if}}

Example

{{#if investments}}
  {{#ifEquals investments.0.company 'Apple'}}
    Invested in Apple Inc!
  {{else}}{{#ifMatches investments.0.company 'Amazon\*'}}
      Invested in Amazon ventures!
    {{else}}{{#ifStartsWith investments.0.company 'Microsoft'}}
        Invested in Microsoft!
      {{else}}{{#if (eq investments.0.company 'L&T')}}
          Invested in Larsen & Toubro!
        {{/if}}
      {{/ifStartsWith}}
    {{/ifMatches}}
  {{/ifEquals}}
{{else}}
  No investments were made!
{{/if}}

Output

Invested in Larsen & Toubro!

To lookup values and use them in placeholders (advanced)

Format

{{#each iterate_key}}
    {{subkey}}
    {{lookup ../key [subkey]}}
{{/each}}

Example

{{#each investments as | investment |}}
    {{#if company}}
        {{{company}}} is in {{lookup ../companies [company]}}
    {{/if}}
{{/each}}

Output

L&T is in India

To split variables and get value at index

Format

{{split variable_name 'delimiter' index}}

Example

{{split period.start '-' -1}}/{{split period.start '-' 1}}/{{split period.start '-' 0}} {{split period.end '-' -1}}/{{split period.end '-' 1}}/{{split period.end '-' 0}}

Output

01/10/2023
03/10/2023

To split variables and loop on it

Format

{{#each (split variable_name 'delimiter')}}
  {{this}}
{{/each}}

Example

{{#each (split period.start '-')}}
  {{this}}
{{/each}}

Output

2023
10
01

To check if timestamp equals to today or yesterday or tomorrow

Format

{{relativeDay timestamp_with_timezone}}

Example

{{relativeDay '2023-10-25T14:30:00+05:30'}}
{{relativeDay '2023-10-26T14:30:00+05:30'}}
{{relativeDay '2023-10-24T14:30:00+05:30'}}
{{relativeDay period.start}}
{{#ifEquals (relativeDay '2023-12-19T14:30:00+05:30') 'today'}}
  The date is today!
{{else}}
  The date is not today!
{{/ifEquals}}

Output

today
tomorrow
yesterday
before
The date is today!

To check difference between two dates (in seconds, minutes, days, hours, month, hours, etc) The date and time must be in RFC-3339, ISO_8601 or the helper will return NaN

Format

{{dateDiff timestamp1_with_timezone timestamp2_with_timezone 'ms / seconds / minutes / hours / days / weeks / months / years'}}

Example

{{dateDiff '2023-12-01T14:30:00+05:30' '2023-12-19T14:30:00+05:30' 'ms'}}
ms
{{dateDiff '2023-12-01T14:30:00+05:30' '2023-12-19T14:30:00+05:30' 'seconds'}}
secs
{{dateDiff '2023-12-01T14:30:00+05:30' '2023-12-19T14:30:00+05:30' 'minutes'}}
mins
{{dateDiff '2023-12-01T14:30:00+05:30' '2023-12-19T14:30:00+05:30' 'hours'}}
hours
{{dateDiff '2023-12-01T14:30:00+05:30' '2023-12-19T14:30:00+05:30' 'days'}}
days
{{dateDiff '2023-12-01T14:30:00+05:30' '2023-12-19T14:30:00+05:30' 'weeks'}}
weeks
{{dateDiff '2023-12-01T14:30:00+05:30' '2023-12-19T14:30:00+05:30' 'months'}}
months
{{dateDiff '2023-12-01T14:30:00+05:30' '2023-12-19T14:30:00+05:30' 'year'}}
years Since
{{dateDiff '2023-12-01T14:30:00+05:30' 'NOW' 'days'}}
days

{{#if (gt (dateDiff '2023-12-01T14:30:00+05:30' 'NOW' 'days') 10)}}
  More than 10 days!
{{else}}
  Less than 10 days!
{{/if}}

Output

1555200000 ms
1555200 secs
25920 mins
432 hours
18 days
2 weeks
0 months
0 years
Since 18 days
More than 10 days!

To format date value

Format

{{formatDate timestamp_with_timezone 'short'}}
{{formatDate timestamp_with_timezone 'short' 'en-in'}}
{{formatDate timestamp_with_timezone 'short' 'en-in' '+05:30'}}
{{formatDate timestamp_with_timezone 'medium'}}
{{formatDate timestamp_with_timezone 'medium' 'en-in'}}
{{formatDate timestamp_with_timezone 'medium' 'en-in' '+05:30'}}
{{formatDate timestamp_with_timezone 'long'}}
{{formatDate timestamp_with_timezone 'long' 'en-in'}}
{{formatDate timestamp_with_timezone 'long' 'en-in' '+05:30'}}

Example

{{formatDate '2023-10-25T18:30:00Z' 'short'}}
{{formatDate '2023-10-25T18:30:00Z' 'short' 'en-in'}}
{{formatDate '2023-10-25T18:30:00Z' 'short' 'en-in' '+05:30'}}
{{formatDate '2023-10-25T18:30:00Z' 'medium'}}
{{formatDate '2023-10-25T18:30:00Z' 'medium' 'en-in'}}
{{formatDate '2023-10-25T18:30:00Z' 'medium' 'en-in' '+05:30'}}
{{formatDate '2023-10-25T18:30:00Z' 'long'}}
{{formatDate '2023-10-25T18:30:00Z' 'long' 'en-in'}}
{{formatDate '2023-10-25T18:30:00Z' 'long' 'en-in' '+05:30'}}

Output

10/25/2023
25/10/2023
26/10/2023
Oct 25, 2023
25 Oct 2023
26 Oct 2023
October 25, 2023
25 October 2023
26 October 2023

To format datetime value

Format

{{formatDateTime timestamp_with_timezone 'short'}}
{{formatDateTime timestamp_with_timezone 'short' 'en-in'}}
{{formatDateTime timestamp_with_timezone 'short' 'en-in' '+05:30'}}
{{formatDateTime timestamp_with_timezone 'medium'}}
{{formatDateTime timestamp_with_timezone 'medium' 'en-in'}}
{{formatDateTime timestamp_with_timezone 'medium' 'en-in' '+05:30'}}
{{formatDateTime timestamp_with_timezone 'long'}}
{{formatDateTime timestamp_with_timezone 'long' 'en-in'}}
{{formatDateTime timestamp_with_timezone 'long' 'en-in' '+05:30'}}
{{formatDateTime timestamp_with_timezone 'custom' 'en-in' '+05:30'}}

Example

{{formatDateTime '2023-10-25T18:30:00Z' 'short'}}
{{formatDateTime '2023-10-25T18:30:00Z' 'short' 'en-in'}}
{{formatDateTime '2023-10-25T18:30:00Z' 'short' 'en-in' '+05:30'}}
{{formatDateTime '2023-10-25T18:30:00Z' 'medium'}}
{{formatDateTime '2023-10-25T18:30:00Z' 'medium' 'en-in'}}
{{formatDateTime '2023-10-25T18:30:00Z' 'medium' 'en-in' '+05:30'}}
{{formatDateTime '2023-10-25T18:30:00Z' 'long'}}
{{formatDateTime '2023-10-25T18:30:00Z' 'long' 'en-in'}}
{{formatDateTime '2023-10-25T18:30:00Z' 'long' 'en-in' '+05:30'}}
{{formatDateTime '2023-10-25T18:30:00Z' 'custom' 'en-in' '+05:30'}}

Output

25/10/2023, 18:30
25/10/2023, 06:30 pm
26/10/2023, 12:00 am
25 Oct 2023, 18:30
25 Oct 2023, 06:30 pm
26 Oct 2023, 12:00 am
25 October 2023 at 18:30
25 October 2023 at 06:30 pm
26 October 2023 at 12:00 am
26 October 2023 at 12:00:00 am

To format numeric value

Format

{{formatNumber number}}
{{formatNumber number 'en-in'}}
{{formatNumber (math number 'round') 'en-in'}}

Example

{{formatNumber 4000000.112}}
{{formatNumber 4000000.112 'en-in'}}
{{formatNumber (math 4000000.11 'round') 'en-in'}}
{{formatNumber 4000000.112 'en-in' 'notation=compact'}}
{{formatNumber 4000000.112 'en-US' 'notation=compact'}}
{{formatNumber 42456235.112 'en-US' 'notation=compact, minimumFractionDigits=2, maximumFractionDigits=2, style=currency, currency=USD'}}
{{formatNumber 42456235.112 'en-in' 'notation=compact, minimumFractionDigits=2, maximumFractionDigits=2, style=currency, currency=INR'}}

Output

4,000,000.112
40,00,000.112
40,00,000
40L
4M
$42.46M
₹4.25Cr

To trim spaces from value

Format

{{trim variable_name}}

Example

{{trim ' Test Name '}}

Output

Test Name

To trim values to a particular length

Format

{{trim variable_name max_length}}

Example

{{trim 'First Middle Last Name' 20}}

Output

First Middle Last Na

To trim value to a particular length and then truncate until the last occurrence of the specified delimiter

Format

{{trim variable_name max_length delimiter}}

Example

{{trim 'First Middle Last Name' 20 ' '}}

Output

First Middle Last

To remove a string

Format

{{remove variable_name 'remove_char/string'}}

Example

{{remove 'Sortment™' '™'}}
{{remove 'Sortment®' '®'}}
{{remove 'Sortment®™' '®|™'}}

Output

Sortment
Sortment
Sortment

To sum multiple numbers

Format

{{sumAll start_key 'number_key'}}

Example

{{sumAll @root 'investments.amount'}}
{{formatNumber (sumAll @root 'investments.amount') 'en-US' 'style=currency, currency=USD'}}

Output

30
$30.00

Current time with date format

Format

{{moment format='date_format'}}

Example

{{moment format='D/M/Y'}}
{{moment format='D/M/Y hh:mm A'}}
{{moment format='dddd, D MMMM'}}
{{moment format='dddd, Do MMMM Y HH:mm Z'}}

Output

26/11/2024
26/11/2024 02:51 PM
Tuesday, 26 November
Tuesday, 26th November 2024 14:54 +05:30

Specific time with formatting and timezone

Format

{{moment date format='date_format' tz='timezone'}}

Example

{{moment '1722605334190' format='D/M/Y'}}
{{moment '1722605334190' format='DD/MM/YYYY hh:mm A'}}
{{moment '1722605334190' format='dddd, D MMMM'}}
{{moment '1722605334190' format='dddd, Do MMMM Y HH:mm Z'}}
{{moment '1722605334190' format='dddd, Do MMMM Y HH:mm Z' tz='Europe/Andorra'}}

Output

2/8/2024
02/08/2024 06:58 PM
Friday, 2 August
Friday, 2nd August 2024 18:58 +05:30
Friday, 2nd August 2024 15:28 +02:00

PreviousAlerts NextData Warehouses

Last updated 7 days ago

Was this helpful?