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

Send WhatsApp messages from Oracle ADF Application

 Hello Everyone

In this post, I am sharing a method to send WhatsApp messages from Oracle ADF Application using the "WhatsApp Click to Chat" feature as WhatsApp doesn't provide any official API.

Though it's an extremely simple way and we need not write a single line of code, We just need to pass some values in an URL to open WhatsApp Click to Chat console.

Created an ADF Application and a page in the view controller with two text fields and a button in it. It looks like this

and both fields are bonded to the managed bean variables

1. <af:inputText label="Mobile No." id="it1" value="#{viewScope.SendWhatsAppBean.mobileNo}"
2. autoSubmit="true"/>
3. <af:inputText label="Message" id="it2" rows="2" value="#{viewScope.SendWhatsAppBean.message}"
4. autoSubmit="true"/>

and managed bean just contain simple POJO variables

1. package sendwhatsappadf.view.bean;
4. public class SendWhatsAppBean {
5. public SendWhatsAppBean() {
6. }
8. private String mobileNo;
9. private String message;
11. public void setMobileNo(String mobileNo) {
12. this.mobileNo = mobileNo;
13. }
15. public String getMobileNo() {
16. return mobileNo;
17. }
19. public void setMessage(String message) {
20. this.message = message;
21. }
23. public String getMessage() {
24. return message;
25. }
26. }

Next is to know about the browser-based WhatsApp click to chat feature, It makes use of an API URL

https://api.whatsapp.com/send?phone=&text=

Now on button click, we can pass phone number and text message in this URL to open click to chat console and in ADF we can do this using destination property of af:button.

1. <af:button text="Send" id="b1" targetFrame="_blank"
2. destination="https://api.whatsapp.com/send?phone=#{viewScope.SendWhatsAppBean.mobileNo}&amp;text=#{viewScope.SendWhatsAppBean.message}"
3. partialTriggers="it2 it1"/>

In the above XML source, we can see that both values are passed from managed bean variables.

Now run and check the application. Enter mobile no., text message on the page

On click of the Send button, WhatsApp click to chat console is opened in a new browser window.

and this button will open the WhatsApp QR code scanner window, In that window scan QR code with your phone and start sending messages.

Using this method we can pass values from ADF bindings to WhatsApp URL and send messages from ADF application.

Cheers 🙂 Happy Learning

Use jQuery Mask to format ADF Input Component

 In this post, I am showing a very interesting and useful jQuery plugin - jQuery Mask Plugin. We can use this plugin to format (mask) input component of ADF form with minimal code

Here I'll show you some examples of masking

Follow these steps to implement this in ADF Application

Create a page in the view controller project of Fusion Web Application and drop an input text in it.

1. <af:inputText label="Label 1" id="it1" >
2. </af:inputText>

Now add the jQuery library to the page under the document tag

1. <af:resource type="javascript" source="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"/>
2. <af:resource type="javascript" source="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"/>

Now I am writing a simple jQuery function that masks value of the input field in date format (dd/mm/yyyy)  and add this function to page using resource tag

1. <af:resource type="javascript">
2. function maskUserInput() {
3. $('input[name="it1"]').mask('00/00/0000');
4. }
5. </af:resource>

Add a client listener to inputText to call jQuery function as soon as the user starts typing

1. <af:inputText label="Label 1" id="it1" >
2. <af:clientListener method="maskUserInput" type="keyDown"/>
3. </af:inputText>

Now run and enter some value in the input field and with typing, it'll mask user input

Now try changing the format as per your requirement, Suppose I need to mask the phone number in (+XX)-XXXXXXXXXX format, so for that, I have used this function.

1. <af:resource type="javascript">
2. function maskUserInput() {
3. $('input[name="it1"]').mask('(+00)-0000000000');
4. }
5. </af:resource>

and output is

IP Address

1. <af:resource type="javascript">
2. function maskUserInput() {
3. $('input[name="it1"]').mask('099.099.099.099');
4. }
5. </af:resource>

Output is

You can always change the jQuery function as per your requirement.

Cheers 🙂 Happy Learning