How to call a backing bean method from the Javascript on the ADF UI

 By W.ZH Feb 2014



For the ADF jspx page, I want to trigger a backing bean method from UI side through Javascript. Such as a button is clicked, or when the page load happened.  Here is the way how it should go.

I use a  commandToolBar to demo this, clientListener will try to catch the “click” type method. If you want to load the js at the page load, you can put the  <af:clientListener type=”load”  under the <af:document to catch the page onload event.


1.      Create the <af:clientListener and <af:serverListener at the button tag.

                    <af:commandToolbarButton …>


               <af:clientListener type=”click” method=”jsClicked”/>


                              <af:serverListener type=”callServerMethod”







2.      Create a javascript at the page UI to trigger the adfCustomeEvent.


<af:resource type=”javascript” >

    jsClicked = function(event){

            var param = {city:”New York”, name: “my name”, param1 : “param1s”};

            AdfCustomEvent.queue(event.getSource(), “callServerMethod”, param, true);





3.      At your backing bean, you need to create a server listener method to catch the client event and you also can get input data and clientEvent and its component in this method.


    public void triggeredByJSMethod(ClientEvent clientEvent) {

        System.out.println(“enter triggeredByJSMethod”);