Invoking Javascript in ADF Page

Invoking Javascript in ADF Page

In this article, we shall see how to invoke Javascript in ADF page declaratively and from Java code.

Invoking Javascript declaratively

In your JSF page, right click on “af:document” and select “Insert Inside Document-> ADF Faces…->”, select “Resource” from popup window

After you click “Ok”, pop window opens as shown below, select "Type"  as “javascript” and type in the JavaScript code in Resource as shown in below screenshot :-

Once you create a button, for invoking Javascript we need to add "Client Listener" under the button. 

Right click the button and select “Insert Inside Button-> ADF Faces…”

Select “Client Listener” in the pop window, as shown in below screenshot:-

In the pop window that appears, type “Method” as JavaScript function name created earlier and select "Type" as “action”(which implies JS invoked when button is clicked.)

Now test the page by clicking the button, JavaScript gets invoked as shown in below screenshot

One can use below JavaScript code, to use input text “userName” in javascript

function sayHelloUser(event){

   var source = event.getSource(); var userName = source.findComponent("userName").getValue();    

   alert("Hello "+ userName);

}

Invoking Javascript from Managed Bean

Sometimes it is required to show pop up message once business logic completes in managed bean, In such scenarios we can invoke JavaScript after business logic execution completes.

Define “Action” property for the button to invoke managed bean code.

In Managed Bean we use “ExtendedRenderKitService” java class for calling JavaScript as shown in below code snippet:-