Applies to:

Crow Canyon NITRO activated sites in:

SharePoint Online and On-Premises 2013/2016/2019/SharePoint Server Subscription Edition

Description

In most European countries, the comma is used as a decimal separator to distinguish the integral part of the number from its decimal part. For example, “Three Hundred Euros and Ten Cents” is written as 300,10, with a comma serving as the decimal marker.

In contrast, regions outside Europe commonly use decimal for the same amount, writing it as 300.10.

Based on this requirement, this article demonstrates the use of custom JavaScript within form event actions in NITRO Forms to dynamically format the entered amount according to the appropriate currency style.

List schema

1. Custom SharePoint list
2. List columns:

Column Display Name	Column Internal Name	Column Type
Amount	Amount	Number
Amount Type	AmountType	Choice  Choice options: US DollarEuroOther
Amount In Selected Currency	AmountInSelectedCurrency	Single line of text

1. ‘Amount’ column settings:

b. ‘Amount Type’ column settings:

Users can select the desired currency format from this column.

c. ‘Amount In Selected Currency’ column settings:

The value in this column will be auto populated using form event actions.

Detailed steps

Configure a form event action in the NITRO Forms.

1. Navigate to Crow Canyon NITRO Forms designer for the list -> Drag and drop all the above created columns onto the NITRO Form -> Expand ‘Advanced’ section -> Form Event Actions -> New Configuration as shown below:

2. Configure a FEA on form load and on column value change -> Select “Amount” and “Amount Type” columns from the drop down.

3. Configure “Update Form Controls” action -> Map “Amount In Selected Currency” column using custom JavaScript.

The JavaScript used above is:

var vFundsType =  _ccs_FormUI.fetchColumnValueUI("AmountType");
var vAmount = _ccs_FormUI.fetchColumnValueUI("Amount");
var vACHTotal = "";
 
function format (locale, currency, number) {
  return new Intl.NumberFormat(locale, { 
    style: 'currency', 
    currency, 
    currencyDisplay: "code" 
  })
  .format(number)
  .replace(currency, "")
  .trim();
}
 
if(vFundsType == "Euro"){
  vACHTotal = format('de-DE', 'EUR', vAmount);  // 123.456,79
} 
else {
  vACHTotal = format('en-US', 'USD', vAmount);
  
  //vACHTotal = format('ja-JP', 'JPY', vAmount);  // 123,457
}
 
return vACHTotal;

Note:

1. Specify internal name of ‘Amount’ and ‘AmountType’ columns in the script. Refer to this article to get internal name of a list column.
2. The script is designed in a way that if the “Amount Type” column is set to “Euro,” the value in the “Amount In Selected Currency” column will be formatted according to the German locale. For the “US” option, the value will be formatted in the US locale. If the selected option is “Other,” the value will be formatted using the default locale.

4. Save the above configured Form Event Action and publish the NITRO Forms.

Sample output:

Based on the above configuration, sample output for different currency types is as shown below:

For “Amount Type” set to “US Dollars”:

For “Amount Type” set to “Euros”:

For “Amount Type” set to “Other”:

“Other” option formats the ‘Amount’ column value using the default format based on site’s regional settings.