Source: https://fyno.docs.pageloop.ai/documentation/core-features/templates/fyno-templates/handlebars # 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. ```json Sample Payload { "members": [ { "first_name": "Ashwin", "last_name": "Agarwal", "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"] } ``` 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. > [!WARNING] > > **🚧 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! :sunglasses: #### To access placeholder values ```hbs title="Format" wordWrap {{key}} ``` ```hbs title="Example" wordWrap {{user_type}} ``` ```text title="Output" wordWrap pro ``` #### To access values of an object ```hbs title="Format" wordWrap {{key.subkey}} ``` ```hbs title="Example" wordWrap {{period.start}} to {{period.end}} ``` ```text title="Output" wordWrap 2023-10-01 to 2023-10-03 ``` #### To access object values from an array ```hbs title="Format" wordWrap {{key.index.subkey}} ``` ```hbs title="Example" wordWrap {{members.0.first_name}} ``` ```text title="Output" wordWrap Ashwin ``` #### To access values from an array ```hbs title="Format" wordWrap {{key.index}} ``` ```hbs title="Example" wordWrap {{classification.0}} ``` ```text title="Output" wordWrap active ``` #### To avoid escaping the values ```hbs title="Format" wordWrap {{{key}}} ``` ```hbs title="Example" wordWrap {{{investments.0.company}}} ``` > [!NOTE] > > If you use double-brackets instead of triple, L\&T will show as L\&T ```text title="Output" wordWrap L&T ``` #### To get length of an array ```hbs title="Format" wordWrap {{key.length}} ``` ```hbs title="Example" wordWrap User made {{investments.length}} investments ``` ```text title="Output" wordWrap User made 2 investments ``` #### To check if variable exists ```hbs title="Format" wordWrap {{#if variable}} Content Here {{else if variable}} Content Here {{else}} Content Here {{/if}} ``` ```hbs title="Example" wordWrap {{#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}} ``` ```text title="Output" wordWrap City available for member 1 and may be member 2 ``` #### Approach 1: To check if variable equals a certain value ```hbs title="Format" wordWrap {{#if (eq variable 'value')}} Content Here {{else if (eq variable 'value')}} Content Here {{/if}} ``` ```hbs title="Example" wordWrap {{#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}} ``` ```text title="Output" wordWrap First investment was L&T ``` #### Approach 2: To check if variable equals a certain value ```hbs title="Format" wordWrap {{#ifEquals variable 'value'}} Content Here {{else ifEquals variable 'value'}} Content Here {{else}} Content Here {{/ifEquals}} ``` ```hbs title="Example" wordWrap {{#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}} ``` ```text title="Output" wordWrap First investment was L&T ``` #### To check if multiple variables equal a certain value (AND and OR options) ```hbs title="Format" wordWrap {{#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}} ``` ```hbs title="Example" wordWrap {{#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}} ``` ```text title="Output" wordWrap 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 ```hbs title="Format" wordWrap {{#ifMatches variable 'regex'}} Content Here {{else ifMatches variable 'regex'}} Content Here {{else}} Content Here {{/ifMatches}} ``` ```hbs title="Example" wordWrap {{#ifMatches members.0.last_name 'Aga\*'}} Matched {{else}} Not matched {{/ifMatches}} ``` ```text title="Output" wordWrap Matched ``` #### To check if string starts with certain characters ```hbs title="Format" wordWrap {{#ifStartsWith variable 'value'}} Content Here {{else ifStartsWith variable 'value'}} Content Here {{else}} Content Here {{/ifStartsWith}} ``` ```hbs title="Example" wordWrap {{#ifStartsWith members.0.first_name 'A'}} Name starts with A {{else}} Name does not start with A {{/ifStartsWith}} ``` ```text title="Output" wordWrap Name starts with A ``` #### To use OR operator between two variables ```hbs title="Format" wordWrap {{#compare var1 'or' var2}} Content Here {{else compare var1 'or' var2}} Content Here {{/compare}} ``` ```hbs title="Example" wordWrap {{#compare investments.0.amount 'or' investments.1.amount}} Invested at least once {{else}} No investment made {{/compare}} ``` ```text title="Output" wordWrap Invested at least once ``` #### To use AND operator between two variables ```hbs title="Format" wordWrap {{#compare var1 'and' var2}} Content Here {{else compare var1 'and' var2}} Content Here {{/compare}} ``` ```hbs title="Example" wordWrap {{#compare investments.0.amount 'and' investments.1.amount}} Invested at least twice {{else}} One or fewer investments made {{/compare}} ``` ```text title="Output" wordWrap Invested at least twice ``` #### To use a specified default value if the actual value does not exist (or is null) ```hbs title="Format" wordWrap {{default variable 'value'}} ``` ```hbs title="Example" wordWrap {{default members.0.city 'Bangalore'}} ``` ```text title="Output" wordWrap Bangalore ``` #### To sum two numbers ```hbs title="Format" wordWrap {{math number1 '+' number2}} ``` ```hbs title="Example" wordWrap {{math investments.0.amount '+' investments.1.amount}} ``` ```text title="Output" wordWrap 30 ``` #### To subtract two numbers ```hbs title="Format" wordWrap {{math number1 '-' number2}} ``` ```hbs title="Example" wordWrap {{math investments.1.amount '-' investments.0.amount}} ``` ```text title="Output" wordWrap 10 ``` #### To multiply two numbers ```hbs title="Format" wordWrap {{math number1 '*' number2}} ``` ```hbs title="Example" wordWrap {{math investments.0.amount '*' investments.1.amount}} ``` ```text title="Output" wordWrap 200 ``` #### To divide numbers ```hbs title="Format" wordWrap {{math number1 '/' number2}} ``` ```hbs title="Example" wordWrap {{math investments.0.amount '/' investments.1.amount}} ``` ```text title="Output" wordWrap 0.5 ``` #### To perform modulo ```hbs title="Format" wordWrap {{math number1 '%' number2}} ``` ```hbs title="Example" wordWrap {{math investments.0.amount '%' investments.1.amount}} ``` ```text title="Output" wordWrap 10 ``` #### To round numbers ```hbs title="Format" wordWrap {{math number 'round' decimal_places}} ``` ```hbs title="Example" wordWrap {{math investments.0.amount 'round' 2}} {{math investments.0.amount 'round'}} ``` ```text title="Output" wordWrap 10.00 10 ``` #### To check for negative condition (show something only if key doesn't exist) ```hbs title="Format" wordWrap {{#unless key}} Content Here {{/unless}} ``` ```hbs title="Example" wordWrap {{#unless investments}} Investments were not made! {{else}} Investments were made! {{/unless}} ``` ```text title="Output" wordWrap Investments were made! ``` #### To iterate over a list/array ```hbs title="Format" wordWrap {{#each key}} {{this.subkey}} {{/each}} ``` ```hbs title="Example" wordWrap {{#each investments}} {{math @index '+' 1}}. {{{default this.company 'Not known'}}} - ${{this.amount}} {{else}} No investments were made! {{/each}} ``` ```text title="Output" wordWrap 1. L&T - $10 2. Not known - $20 ``` #### To use combination of conditions and nesting (advanced) ```hbs title="Format" wordWrap {{#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}} ``` ```hbs title="Example" wordWrap {{#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}} ``` ```text title="Output" wordWrap Invested in Larsen & Toubro! ``` #### To lookup values and use them in placeholders (advanced) ```hbs title="Format" wordWrap {{#each iterate_key}} {{subkey}} {{lookup ../key [subkey]}} {{/each}} ``` ```hbs title="Example" wordWrap {{#each investments as | investment |}} {{#if company}} {{{company}}} is in {{lookup ../companies [company]}} {{/if}} {{/each}} ``` ```text title="Output" wordWrap ``` #### To split variables and get value at index ```hbs title="Format" wordWrap {{split variable_name 'delimiter' index}} ``` ```hbs title="Example" wordWrap {{split period.start '-' -1}}/{{split period.start '-' 1}}/{{split period.start '-' 0}} {{split period.end '-' -1}}/{{split period.end '-' 1}}/{{split period.end '-' 0}} ``` ```text title="Output" wordWrap 01/10/2023 03/10/2023 ``` #### To split variables and loop on it ```hbs title="Format" wordWrap {{#each (split variable_name 'delimiter')}} {{this}} {{/each}} ``` ```hbs title="Example" wordWrap {{#each (split period.start '-')}} {{this}} {{/each}} ``` ```text title="Output" wordWrap 2023 10 01 ``` #### To check if timestamp equals to today or yesterday or tomorrow ```hbs title="Format" wordWrap {{relativeDay timestamp_with_timezone}} ``` ```hbs title="Example" wordWrap {{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}} ``` ```text title="Output" wordWrap today tomorrow yesterday before The date is today! ``` #### To check difference between two dates (in seconds, minutes, days, hours, month, hours, etc) ```hbs title="Format" wordWrap {{dateDiff timestamp1_with_timezone timestamp2_with_timezone 'ms / seconds / minutes / hours / days / weeks / months / years'}} ``` > [!NOTE] > > The date and time must be in RFC-3339, ISO\_8601 or the helper will return NaN ```hbs title="Example" wordWrap {{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}} ``` ```text title="Output" wordWrap 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 ```hbs title="Format" wordWrap {{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'}} ``` ```hbs title="Example" wordWrap {{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'}} ``` ```text title="Output" wordWrap 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 ```hbs title="Format" wordWrap {{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'}} ``` ```hbs title="Example" wordWrap {{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'}} ``` ```text title="Output" wordWrap 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 ```hbs title="Format" wordWrap {{formatNumber number}} {{formatNumber number 'en-in'}} {{formatNumber (math number 'round') 'en-in'}} ``` ```hbs title="Example" wordWrap {{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'}} ``` ```text title="Output" wordWrap 4,000,000.112 40,00,000.112 40,00,000 40L 4M $42.46M ₹4.25Cr ``` #### To trim spaces from value ```hbs title="Format" wordWrap {{trim variable_name}} ``` ```hbs title="Example" wordWrap {{trim ' Test Name '}} ``` ```text title="Output" wordWrap Test Name ``` #### To trim values to a particular length ```hbs title="Format" wordWrap {{trim variable_name max_length}} ``` ```hbs title="Example" wordWrap {{trim 'First Middle Last Name' 20}} ``` ```text title="Output" wordWrap First Middle Last Na ``` #### To trim value to a particular length and then truncate until the last occurrence of the specified delimiter ```hbs title="Format" wordWrap {{trim variable_name max_length delimiter}} ``` ```hbs title="Example" wordWrap {{trim 'First Middle Last Name' 20 ' '}} ``` ```text title="Output" wordWrap First Middle Last ``` #### To remove a string ```hbs title="Format" wordWrap {{remove variable_name 'remove_char/string'}} ``` ```hbs title="Example" wordWrap {{remove 'Fyno™' '™'}} {{remove 'Fyno®' '®'}} {{remove 'Fyno®™' '®|™'}} ``` ```text title="Output" wordWrap Fyno Fyno Fyno ``` #### To sum multiple numbers ```hbs title="Format" wordWrap {{sumAll start_key 'number_key'}} ``` ```hbs title="Example" wordWrap {{sumAll @root 'investments.amount'}} {{formatNumber (sumAll @root 'investments.amount') 'en-US' 'style=currency, currency=USD'}} ``` ```text title="Output" wordWrap 30 $30.00 ``` #### Current time with date format ```hbs title="Format" wordWrap {{moment start_time format='date_format'}} ``` ```hbs title="Example" wordWrap {{moment start_time format='D/M/Y'}} {{moment start_time format='D/M/Y hh:mm A'}} {{moment start_time format='dddd, D MMMM'}} {{moment start_time format='dddd, Do MMMM Y HH:mm Z'}} {{moment start_time format='DD/MM/YYYY'}} ``` ```text title="Output" wordWrap 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 ```hbs title="Format" wordWrap {{moment date format='date_format' tz='timezone'}} ``` ```hbs title="Example" wordWrap {{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'}} ``` ```text title="Output" wordWrap 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 ``` #### Convert Number to Words ```hbs title="Format" wordWrap {{numberToWord number}} ``` ```hbs title="Example" wordWrap {{numberToWord 6}} {{numberToWord 6231}} {{numberToWord 100000000}} ``` ```text title="Output" wordWrap six six thousand two hundred thirty one one hundred million ``` #### Convert Unicode to Non Unicode characters ```hbs title="Format" wordWrap {{unidecode variable_name}} ``` ```hbs title="Example" wordWrap {{unidecode Hello® |®|™}} {{unidecode Ryyúuy}} {{unidecode नमस्ते, आप कैसे हैं?}} ``` ```text title="Output" wordWrap Hello(r) |(r)|tm Ryyuuy nmste, aap kaise haiN? ```