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

Hide Icon and Heading of FacesMessage using ADF Skin

 Recently a developer asked me about how to hide the icon and heading of FacesMessage. So here I am posting a small CSS that does the trick.

Previously I have posted about resizing FacesMessage and skinning ADF Dialog component inside the popup, You can check these posts for more details about skin selectors

Check How to Show FacesMessage in Oracle ADF?

By default, Error FacesMessage in ADF Application looks like this

Now create a Skin in view controller project and write this simple piece of CSS. This CSS basically hides the header part of dialog that is used in creating FacesMessage.

1. af|dialog::header, af|dialog::header-end, af|dialog::header-start {
2. display: none;
3. }

and FacesMessage looks like this

That's All

Cheers 🙂 Happy Learning

Use Google Fonts in ADF Application using custom CSS

We can use google fonts in the ADF application very easily. In this post, I'll describe the steps to implement this using custom CSS.

Go to Google Fonts

Select any font that you want to use and click on the plus (+) icon, I have clicked that that's why the image is showing the minus(-) icon

The next step is to see the font's properties and copy the highlighted link, It'll be used in our CSS

Now create a page in the ADF application and add this CSS using the ADF Resource tag, Here I have added 4 different fonts

1. <af:resource type="css" source="https://fonts.googleapis.com/css?family=Charmonman"/>
2. <af:resource type="css" source="https://fonts.googleapis.com/css?family=Kirang+Haerang"/>
3. <af:resource type="css" source="https://fonts.googleapis.com/css?family=VT323"/>
4. <af:resource type="css" source="https://fonts.googleapis.com/css?family=Philosopher"/>

Added four output text to show different fonts

1. <af:outputText value="Oracle Application Development Framework" id="ot1"
2. inlineStyle="font-family:Charmonman;font-size:35px;color:red;font-weight:bold;"/>
3. <af:spacer width="10" height="10" id="s1"/>
4. <af:outputText value="Oracle Application Development Framework" id="ot2"
5. inlineStyle="font-family:Kirang Haerang;font-size:35px;color:green;font-weight:bold;"/>
6. <af:spacer width="10" height="10" id="s2"/>
7. <af:outputText value="Oracle Application Development Framework" id="ot3"
8. inlineStyle="font-family:VT323; font-size:35px; color:#4289aa; font-weight:bold;"/>
9. <af:spacer width="10" height="10" id="s3"/>
10. <af:outputText value="Oracle Application Development Framework" id="ot4"
11. inlineStyle="font-family:Philosopher; font-size:35px; color:#dc006d; font-weight:bold;"/>

Now run the application and check :)

Sample ADF Application - Download

Cheers  Happy Learning

Set current date in af:inputDate on double click using javascript in ADF

This post is about a question that is asked on the OTN forum. In this post, I'll show you how we can set the current date in af:inputDate component with a double click of the mouse. For this, we need to use a simple javascript function.

Here we have an inputDate component on the page and added javascript function as a resource in the page. See page XML source

1. <?xml version='1.0' encoding='UTF-8'?>
2. <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core"
3. xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
4. <jsp:directive.page contentType="text/html;charset=UTF-8"/>
5. <f:view>
6. <af:document title="SetCurrentDate.jspx" id="d1">
7. <af:resource type="javascript">
8. function setDate(evt) {
9. var comp = evt.getSource()
10. comp.setValue(new Date());
12. }
13. </af:resource>
14. <af:form id="f1">
15. <af:inputDate label="Label 1" id="id1">
16. <af:clientListener method="setDate" type="dblClick"/>
17. </af:inputDate>
18. </af:form>
19. </af:document>
20. </f:view>
21. </jsp:root>

All done, as you can see that the javascript function is called using clientListener on double click event of input date component.

Cheers  Happy Learning