Advanced PDF Format Editor Examples For Merge Fields

In this guide, we will explain how to achieve Date/Currency/Number formatting and conditional statements usage in PDF with the help of the PDF helper function.

To go to the PDF Editor page, click on the "Action" drop-down corresponding to the form name from the Formyoula Dashboard.

Scroll down the page and click on Page Settings.

Enable Advanced Templating from the PDF Editor Settings before trying the below examples.

Using toFixed helper to format a number.

To fix a decimal value up to 2 point we can use toFixed helper with option 2.

value of component_id  =  1.1234566

{{toFixed component_id 2}}
Output: 1.12

Or  for  decimal up to 3  use below
{{toFixed component_id 3}}
Output: 1.123

Using toCurrency to format a number/digit based on different options

To format a currency value up, we can use toCurrency helper with different options.toCurrency helper used to format currency based on a different option
I.e.  locale, style, currency.
value of component_id = 23232234

{{toCurrency component_id  locale='en-IN' style='currency' currency='EUR'}}
Output: € 2,32,32,234.00

{{toCurrency component_id  locale='ja-JP' style='currency' currency='JPY'}}
Output: ￥23,232,234

{{toCurrency component_id  locale='en-US' style='currency' currency='USD'}}}
Output: $123.43

For more details on currency formatting and options, please visit the following link:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

Using eval to format a date/number/digit or to perform any mathematical calculations

eval is a special kind of helper that allows executing simple javascript function to format any value.

I.e.
value for component_id_1 =  123.4321
value for component_id_2 =  456.4321
value for component_id_3 =  "Fri May 24 2019 11:46:59 GMT+0530 (India Standard Time)"

Decimal Number fix:

{{eval "Number(${component_id_1}).toFixed(2)" component_id_1=component_id_1}}
Ourput : 123.43

Date format:
{{eval "new Date(${component_id_3}).toLocaleDateString()"  component_id_3=component_id_3}}
Output: 5/24/2019

{{eval "moment(${893f-3edf-fdc9}).format('lll')" 893f-3edf-fdc9=893f-3edf-fdc9}}
Output: Jan 18, 2023 7:27 PM

Currency format:
{{eval "Number(${component_id_1}).toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })" component_id_1=component_id_1}}
Output: 123,43 €
{{eval "Number(${component_id_1}).toLocaleString('en-US', { style: 'currency', currency: 'USD' })" component_id_1=component_id_1}}
Output: $123.43

Sum of two numbers:
{{eval "Number(${c1}) + Number(${c2})" c1=component_id_1 c2=component_id_2}}
Output: 579.8642

Using AND and OR ( && and || ) in PDF editor:

Using AND-

<!--{{#compare component_id_2  component_id_1 operator="&&"}} -->
 //Show this only if both values are available
 <!--{{/compare}} -->

Using OR-

<!--{{#compare component_id_2  component_id_1  operator="||"}} -->
 //Show this if any one value is available
<!-- {{/compare}} -->

Using > and < operators in the PDF editor

PDF Editor supports the following operators.

==, ===, !=, <, >, <=, >=, && and ||

I.e.

{{#compare component_id_2 "0" operator=">"}}

{{/compare }}

{{toFixed component_id 2}}

For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂