Show Indian Currency Format in ADF using currencyFormatter jQuery

 Previously I have posted about Change af:converNumber format according to Locale but there is no option to show Indian currency format directly using locale so Here I am writing about showing Indian Currency format in ADF components using the currencyFormatter jQuery library.

From the docs

CurrencyFormatter.js allows you to format numbers as currencies. It contains 155 currency definitions and 715 locale definitions out of the box. It handles unusually formatted currencies, such as the INR.

Indian currency format is a bit unusual as it uses variable-width grouping, See the below image to understand how numbers are grouped in INR.

Let's see how to use the currencyFormatter jQuery library in our ADF application. Created an ADF Application and dropped an input text component on the page to enter the amount

Added jQuery library using resource tag under af:document

1. <af:resource type="javascript"
2. source="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"/>
4. <af:resource type="javascript"
5. source="https://cdnjs.cloudflare.com/ajax/libs/currencyformatter.js/2.2.0/currencyFormatter.js"/>

Here goes the javascript function that formats the amount

1. <af:resource type="javascript">
2. function changeFormatInd(evt) {
3. var val = $('input[name="it2"]').val();
4. val.replace(/\,/g, "");
5. var str2 = val.replace(/\,/g, "");
6. //alert(str2);
7. $('input[name="it2"]').val(OSREC.CurrencyFormatter.format(str2,
8. {
9. currency : 'INR', symbol : ''
10. }))
11. }
12. </af:resource>

Called this function on value change event of input text using client listener

1. <af:inputText label="Amount" id="it2"
2. contentStyle="width:300px;padding:8px;font-weight:bold;color:#006394;font-size:30px;">
3. <af:clientListener method="changeFormatInd" type="valueChange"/>
4. </af:inputText>

Now run application and check

Cheers 🙂 Happy Learning