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! 😎
To access placeholder values
Format
1
{{key}}
Example
1
{{user_type}}
Output
pro
To access values of an object
Format
1
{{key.subkey}}
Example
1
{{period.start}} to {{period.end}}
Output
2023-10-01 to 2023-10-03
To access object values from an array
Format
1
{{key.index.subkey}}
Example
1
{{members.0.first_name}}
Output
Ashwin
To access values from an array
Format
1
{{key.index}}
Example
1
{{classification.0}}
Output
active
To avoid escaping the values
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
To get length of an array
Format
1
{{key.length}}
Example
1
User made {{investments.length}} investments
Output
User made 2 investments
To check if variable exists
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
Approach 1: To check if variable equals a certain value
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
Approach 2: To check if variable equals a certain value
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
To check if multiple variables equal a certain value (AND and OR options)
