Show Indian Currency Format in ADF using currencyFormatter jQuery

Sharing is Caring

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 below image to understand how numbers are grouped in INR.

Indian Numbering System and Currency Format

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

ADF Input Text Component

Added jQuery library using resource tag under af:document

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

Here goes the javascript function that formats the amount

<af:resource type="javascript">
              function changeFormatInd(evt) {
                  var val = $('input[name="it2"]').val();
                  val.replace(/\,/g, "");
                  var str2 = val.replace(/\,/g, "");
                  //alert(str2);
                  $('input[name="it2"]').val(OSREC.CurrencyFormatter.format(str2, 
                  {
                      currency : 'INR', symbol : ''
                  }))
              }
</af:resource>

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

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

Now run application and check

Indian Currency Format - One Lakh

Cheers 🙂 Happy Learning

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *