Thursday, 20 August 2015

Invoke JavaScript on button click in ADF.

Requirement: I have a web page demo.jsf. The page has a button named "Call JavaScript". Whenever I click on the button, it should display a message "Hello Susanto!". However, to achieve this I want to call JavaScript only.

Solution: To solve the above requirement follow the steps as shown below:

Step 1: Create an Oracle ADF Fusion Web Application.

Step 2: Create a demo.jsf page in the ViewController project of our application created in Step 1.

Step 3: Drag and drop button from the component palette in the demo.jsf page created in Step 2. Name the button as "Call JavaScript".


Step 4: Drag and drop Resource from the component palette inside the af:form of the demo.jsf page. While Drag and drop of Resource from the component palette we will get the below Insert Resource Popup. We have to select the Type as javascript. Keep Resource as empty as shown below:

                  
Step 5: Write the below function in the demo.jsf page. The function should be inside the af:resource tag created in Step 4 .

                   

Step 6: Drag and drop Client Listener from the component palette on top of the button created in Step 3. We will get the below Popup.
                
Give the method name as callJavaScript and select the Type as click as shown below:

               
Click OK and Save the application.
Thus the complete demo.jsf code is shown below:
                

Step 7: Save and Run the application. The demo.jsf page in the browser will look like below:
               
Step 8: Click on Call JavaScript button on the page. On click of Call JavaScript button the below popup is display on the web page and it contain the message Hello Susanto! As shown below:
                  

Thus we achieved our requirement.



Thanks and Regards,
Susanto Paul