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 Fyno 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 Fyno’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.

Sample Payload
1{
2 "members": [
3 {
4 "first_name": "Ashwin",
5 "last_name": "Agarwal",
6 "city": ""
7 }
8 ],
9 "investments": [
10 {
11 "amount": 10,
12 "company": "L&T"
13 },
14 {
15 "amount": 20
16 }
17 ],
18 "companies": {
19 "L&T": "India",
20 "Apple": "USA"
21 },
22 "user_type": "pro",
23 "period": {
24 "start": "2023-10-01",
25 "end": "2023-10-03"
26 },
27 "classification": ["active", "pro"]
28}

Fyno 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! 😎

Format
1{{key}}
Example
1{{user_type}}
Output
pro
Format
1{{key.subkey}}
Example
1{{period.start}} to {{period.end}}
Output
2023-10-01 to 2023-10-03
Format
1{{key.index.subkey}}
Example
1{{members.0.first_name}}
Output
Ashwin
Format
1{{key.index}}
Example
1{{classification.0}}
Output
active
Format
1{{{key}}}
Example
1{{{investments.0.company}}}
If you use double-brackets instead of triple, L&T will show as L&T
Output
L&T
Format
1{{key.length}}
Example
1User made {{investments.length}} investments
Output
User made 2 investments
Format
1{{#if variable}}
2 Content Here
3{{else if variable}}
4 Content Here
5{{else}}
6 Content Here
7{{/if}}
Example
1{{#if members.0.city}}
2 City available for member 1 and may be member 2
3{{else if members.1.city}}
4 City available for member 2 only
5{{else}}
6 City not available for member 1 and 2
7{{/if}}
Output
City available for member 1 and may be member 2
Format
1{{#if (eq variable 'value')}}
2 Content Here
3{{else if (eq variable 'value')}}
4 Content Here
5{{/if}}
Example
1{{#if (eq investments.0.company 'L&T')}}
2 First investment was L&T
3{{else if (eq investments.0.company 'Apple')}}
4 First investment was Apple
5{{else}}
6 First investment was neither Apple nor L&T
7{{/if}}
Output
First investment was L&T
Format
1{{#ifEquals variable 'value'}}
2 Content Here
3{{else ifEquals variable 'value'}}
4 Content Here
5{{else}}
6 Content Here
7{{/ifEquals}}
Example
1{{#ifEquals investments.0.company 'L&T'}}
2 First investment was L&T
3{{else ifEquals investments.0.company 'Apple'}}
4 First investment was Apple
5{{else}}
6 First investment was neither Apple nor L&T
7{{/ifEquals}}
Output
First investment was L&T
Format
1{{#if (and/or (eq/ne/lt/gt/lte/gte variable 'value') (eq/ne/lt/gt/lte/gte variable 'value'))}}
2 Content Here
3{{else}}
4 Content Here
5{{/if}}
Example
1{{#if (or (eq investments.0.company 'L&T') (eq investments.0.company 'Apple'))}}
2 First investment is either L&T OR Apple
3{{/if}}
4
5{{#if (and (eq investments.0.company 'L&T') (gt investments.0.amount 5))}}
6 First investment is L&T and investment amount is greater than 5
7{{/if}}
8
9{{#if (and (ne user_type 'pro') (gte investments.0.amount 10))}}
10 User is not pro but first investment is greater than or equal to 10
11{{else if (and (eq user_type 'pro') (lt investments.0.amount 10))}}
12 User type is pro but first investment is less than 10
13{{else if (and (eq user_type 'pro') (eq investments.0.amount 10))}}
14 User type is pro and first investment is equal to 10
15{{/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
Format
1{{#ifMatches variable 'regex'}}
2 Content Here
3{{else ifMatches variable 'regex'}}
4 Content Here
5{{else}}
6 Content Here
7{{/ifMatches}}
Example
1{{#ifMatches members.0.last_name 'Aga\*'}}
2 Matched
3{{else}}
4 Not matched
5{{/ifMatches}}
Output
Matched
Format
1{{#ifStartsWith variable 'value'}}
2 Content Here
3{{else ifStartsWith variable 'value'}}
4 Content Here
5{{else}}
6 Content Here
7{{/ifStartsWith}}
Example
1{{#ifStartsWith members.0.first_name 'A'}}
2 Name starts with A
3{{else}}
4 Name does not start with A
5{{/ifStartsWith}}
Output
Name starts with A
Format
1{{#compare var1 'or' var2}}
2 Content Here
3{{else compare var1 'or' var2}}
4 Content Here
5{{/compare}}
Example
1{{#compare investments.0.amount 'or' investments.1.amount}}
2 Invested at least once
3{{else}}
4 No investment made
5{{/compare}}
Output
Invested at least once
Format
1{{#compare var1 'and' var2}}
2 Content Here
3{{else compare var1 'and' var2}}
4 Content Here
5{{/compare}}
Example
1{{#compare investments.0.amount 'and' investments.1.amount}}
2 Invested at least twice
3{{else}}
4 One or fewer investments made
5{{/compare}}
Output
Invested at least twice
Format
1{{default variable 'value'}}
Example
1{{default members.0.city 'Bangalore'}}
Output
Bangalore
Format
1{{math number1 '+' number2}}
Example
1{{math investments.0.amount '+' investments.1.amount}}
Output
30
Format
1{{math number1 '-' number2}}
Example
1{{math investments.1.amount '-' investments.0.amount}}
Output
10
Format
1{{math number1 '*' number2}}
Example
1{{math investments.0.amount '*' investments.1.amount}}
Output
200
Format
1{{math number1 '/' number2}}
Example
1{{math investments.0.amount '/' investments.1.amount}}
Output
0.5
Format
1{{math number1 '%' number2}}
Example
1{{math investments.0.amount '%' investments.1.amount}}
Output
10
Format
1{{math number 'round' decimal_places}}
Example
1{{math investments.0.amount 'round' 2}}
2{{math investments.0.amount 'round'}}
Output
10.00
10
Format
1{{#unless key}}
2 Content Here
3{{/unless}}
Example
1{{#unless investments}}
2 Investments were not made!
3{{else}}
4 Investments were made!
5{{/unless}}
Output
Investments were made!
Format
1{{#each key}}
2 {{this.subkey}}
3{{/each}}
Example
1{{#each investments}}
2 {{math @index '+' 1}}.
3 {{{default this.company 'Not known'}}}
4 - ${{this.amount}}
5{{else}}
6 No investments were made!
7{{/each}}
Output
1. L&T - $10
2. Not known - $20
Format
1{{#if variable}}
2 Content Here
3{{else}}
4 {{#ifEquals variable 'value'}}
5 Content Here
6 {{else}}
7 {{#ifMatches variable 'regex'}}
8 Content Here
9 {{else}}
10 {{#ifStartsWith variable 'value'}}
11 Content Here
12 {{else}}
13 {{#if (eq var1 var2)}}
14 Content Here
15 {{/if}}
16 {{/ifStartsWith}}
17 {{/ifMatches}}
18 {{/ifEquals}}
19{{/if}}
Example
1{{#if investments}}
2 {{#ifEquals investments.0.company 'Apple'}}
3 Invested in Apple Inc!
4 {{else}}{{#ifMatches investments.0.company 'Amazon\*'}}
5 Invested in Amazon ventures!
6 {{else}}{{#ifStartsWith investments.0.company 'Microsoft'}}
7 Invested in Microsoft!
8 {{else}}{{#if (eq investments.0.company 'L&T')}}
9 Invested in Larsen & Toubro!
10 {{/if}}
11 {{/ifStartsWith}}
12 {{/ifMatches}}
13 {{/ifEquals}}
14{{else}}
15 No investments were made!
16{{/if}}
Output
Invested in Larsen & Toubro!
Format
1{{#each iterate_key}}
2 {{subkey}}
3 {{lookup ../key [subkey]}}
4{{/each}}
Example
1{{#each investments as | investment |}}
2 {{#if company}}
3 {{{company}}} is in {{lookup ../companies [company]}}
4 {{/if}}
5{{/each}}
Format
1{{split variable_name 'delimiter' index}}
Example
1{{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
Format
1{{#each (split variable_name 'delimiter')}}
2 {{this}}
3{{/each}}
Example
1{{#each (split period.start '-')}}
2 {{this}}
3{{/each}}
Output
2023
10
01
Format
1{{relativeDay timestamp_with_timezone}}
Example
1{{relativeDay '2023-10-25T14:30:00+05:30'}}
2{{relativeDay '2023-10-26T14:30:00+05:30'}}
3{{relativeDay '2023-10-24T14:30:00+05:30'}}
4{{relativeDay period.start}}
5{{#ifEquals (relativeDay '2023-12-19T14:30:00+05:30') 'today'}}
6 The date is today!
7{{else}}
8 The date is not today!
9{{/ifEquals}}
Output
today
tomorrow
yesterday
before
The date is today!
Format
1{{dateDiff timestamp1_with_timezone timestamp2_with_timezone 'ms / seconds / minutes / hours / days / weeks / months / years'}}
The date and time must be in RFC-3339, ISO_8601 or the helper will return NaN
Example
1{{dateDiff '2023-12-01T14:30:00+05:30' '2023-12-19T14:30:00+05:30' 'ms'}}
2ms
3{{dateDiff '2023-12-01T14:30:00+05:30' '2023-12-19T14:30:00+05:30' 'seconds'}}
4secs
5{{dateDiff '2023-12-01T14:30:00+05:30' '2023-12-19T14:30:00+05:30' 'minutes'}}
6mins
7{{dateDiff '2023-12-01T14:30:00+05:30' '2023-12-19T14:30:00+05:30' 'hours'}}
8hours
9{{dateDiff '2023-12-01T14:30:00+05:30' '2023-12-19T14:30:00+05:30' 'days'}}
10days
11{{dateDiff '2023-12-01T14:30:00+05:30' '2023-12-19T14:30:00+05:30' 'weeks'}}
12weeks
13{{dateDiff '2023-12-01T14:30:00+05:30' '2023-12-19T14:30:00+05:30' 'months'}}
14months
15{{dateDiff '2023-12-01T14:30:00+05:30' '2023-12-19T14:30:00+05:30' 'year'}}
16years Since
17{{dateDiff '2023-12-01T14:30:00+05:30' 'NOW' 'days'}}
18days
19
20{{#if (gt (dateDiff '2023-12-01T14:30:00+05:30' 'NOW' 'days') 10)}}
21 More than 10 days!
22{{else}}
23 Less than 10 days!
24{{/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!
Format
1{{formatDate timestamp_with_timezone 'short'}}
2{{formatDate timestamp_with_timezone 'short' 'en-in'}}
3{{formatDate timestamp_with_timezone 'short' 'en-in' '+05:30'}}
4{{formatDate timestamp_with_timezone 'medium'}}
5{{formatDate timestamp_with_timezone 'medium' 'en-in'}}
6{{formatDate timestamp_with_timezone 'medium' 'en-in' '+05:30'}}
7{{formatDate timestamp_with_timezone 'long'}}
8{{formatDate timestamp_with_timezone 'long' 'en-in'}}
9{{formatDate timestamp_with_timezone 'long' 'en-in' '+05:30'}}
Example
1{{formatDate '2023-10-25T18:30:00Z' 'short'}}
2{{formatDate '2023-10-25T18:30:00Z' 'short' 'en-in'}}
3{{formatDate '2023-10-25T18:30:00Z' 'short' 'en-in' '+05:30'}}
4{{formatDate '2023-10-25T18:30:00Z' 'medium'}}
5{{formatDate '2023-10-25T18:30:00Z' 'medium' 'en-in'}}
6{{formatDate '2023-10-25T18:30:00Z' 'medium' 'en-in' '+05:30'}}
7{{formatDate '2023-10-25T18:30:00Z' 'long'}}
8{{formatDate '2023-10-25T18:30:00Z' 'long' 'en-in'}}
9{{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
Format
1{{formatDateTime timestamp_with_timezone 'short'}}
2{{formatDateTime timestamp_with_timezone 'short' 'en-in'}}
3{{formatDateTime timestamp_with_timezone 'short' 'en-in' '+05:30'}}
4{{formatDateTime timestamp_with_timezone 'medium'}}
5{{formatDateTime timestamp_with_timezone 'medium' 'en-in'}}
6{{formatDateTime timestamp_with_timezone 'medium' 'en-in' '+05:30'}}
7{{formatDateTime timestamp_with_timezone 'long'}}
8{{formatDateTime timestamp_with_timezone 'long' 'en-in'}}
9{{formatDateTime timestamp_with_timezone 'long' 'en-in' '+05:30'}}
10{{formatDateTime timestamp_with_timezone 'custom' 'en-in' '+05:30'}}
Example
1{{formatDateTime '2023-10-25T18:30:00Z' 'short'}}
2{{formatDateTime '2023-10-25T18:30:00Z' 'short' 'en-in'}}
3{{formatDateTime '2023-10-25T18:30:00Z' 'short' 'en-in' '+05:30'}}
4{{formatDateTime '2023-10-25T18:30:00Z' 'medium'}}
5{{formatDateTime '2023-10-25T18:30:00Z' 'medium' 'en-in'}}
6{{formatDateTime '2023-10-25T18:30:00Z' 'medium' 'en-in' '+05:30'}}
7{{formatDateTime '2023-10-25T18:30:00Z' 'long'}}
8{{formatDateTime '2023-10-25T18:30:00Z' 'long' 'en-in'}}
9{{formatDateTime '2023-10-25T18:30:00Z' 'long' 'en-in' '+05:30'}}
10{{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
Format
1{{formatNumber number}}
2{{formatNumber number 'en-in'}}
3{{formatNumber (math number 'round') 'en-in'}}
Example
1{{formatNumber 4000000.112}}
2{{formatNumber 4000000.112 'en-in'}}
3{{formatNumber (math 4000000.11 'round') 'en-in'}}
4{{formatNumber 4000000.112 'en-in' 'notation=compact'}}
5{{formatNumber 4000000.112 'en-US' 'notation=compact'}}
6{{formatNumber 42456235.112 'en-US' 'notation=compact, minimumFractionDigits=2, maximumFractionDigits=2, style=currency, currency=USD'}}
7{{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
Format
1{{trim variable_name}}
Example
1{{trim ' Test Name '}}
Output
Test Name
Format
1{{trim variable_name max_length}}
Example
1{{trim 'First Middle Last Name' 20}}
Output
First Middle Last Na
Format
1{{trim variable_name max_length delimiter}}
Example
1{{trim 'First Middle Last Name' 20 ' '}}
Output
First Middle Last
Format
1{{remove variable_name 'remove_char/string'}}
Example
1{{remove 'Fyno™' '™'}}
2{{remove 'Fyno®' '®'}}
3{{remove 'Fyno®™' '®|™'}}
Output
Fyno
Fyno
Fyno
Format
1{{sumAll start_key 'number_key'}}
Example
1{{sumAll @root 'investments.amount'}}
2{{formatNumber (sumAll @root 'investments.amount') 'en-US' 'style=currency, currency=USD'}}
Output
30
$30.00
Format
1{{moment format='date_format'}}
Example
1{{moment format='D/M/Y'}}
2{{moment format='D/M/Y hh:mm A'}}
3{{moment format='dddd, D MMMM'}}
4{{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
Format
1{{moment date format='date_format' tz='timezone'}}
Example
1{{moment '1722605334190' format='D/M/Y'}}
2{{moment '1722605334190' format='DD/MM/YYYY hh:mm A'}}
3{{moment '1722605334190' format='dddd, D MMMM'}}
4{{moment '1722605334190' format='dddd, Do MMMM Y HH:mm Z'}}
5{{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
Format
1{{numberToWord number}}
Example
1{{numberToWord 6}}
2{{numberToWord 6231}}
3{{numberToWord 100000000}}
Output
six
six thousand two hundred thirty one
one hundred million
Format
1{{unidecode variable_name}}
Example
1{{unidecode Hello® |®|™}}
2{{unidecode Ryyúuy}}
3{{unidecode नमस्ते, आप कैसे हैं?}}
Output
Hello(r) |(r)|tm
Ryyuuy
nmste, aap kaise haiN?