Please disable your adblock and script blockers to view this page

Search this blog

Wednesday 24 December 2014

Update page component in between of event processing in ADF Faces using JavaScript

This post is not about any specific topic of framework, recently i was working in an application, requirement was like this
There is a button on page that uploads a large file to server and it takes some time . So as soon as user press this button it's text should be changed to 'Processing..' and after upload is complete it should be 'Done'

In this post i am sharing same - How to update page component while an event is processing ?
First i have tried it using java means in same button action listener but in this case button text was changed only after event processing is complete
So for this purpose i have used some javascript function, this is quite simple (see the implementation)

  • Drop a button on page and create a ActionListener , it will change button text to 'Done' after event processing (used Thread.sleep() for some long processing)

  •     private RichButton buttonBind;
        /**Method to process Action Event
         * @param actionEvent
        public void processValueAction(ActionEvent actionEvent) {
            // Sleep for some time (Event Processing time)
            try {
            } catch (InterruptedException e) {
            //After processing set button text to 'Done'
        public void setButtonBind(RichButton buttonBind) {
            this.buttonBind = buttonBind;
        public RichButton getButtonBind() {
            return buttonBind;

  • Now question is how to change button text to 'Processing..' immediately after clicking button. So for this purpose i am using javascript

  • function changeButtonText(event) {
                      var comp = event.getSource();

  • Calling this javascript function using af:clientListener in button like this (See XML source of page)

  •  <af:document title="UpdatePageComponent.jspx" id="d1">
                <af:resource type="javascript">
                  function changeButtonText(event) {
                      var comp = event.getSource();
                <af:form id="f1">
                    <af:spacer width="10" height="10" id="s1"/>
                    <af:panelGroupLayout id="pgl1" layout="horizontal" halign="center">
                        <af:panelBox id="pb1" showDisclosure="false">
                            <f:facet name="toolbar"/>
                            <af:button text="Click to process" id="b1"
                                       clientComponent="true" binding="#{viewScope.UpdatePageComponent.buttonBind}"
                                <af:clientListener method="changeButtonText" type="action"/>

  • As soon as button is clicked this javascript function will be invoked and set new text in button and after event processing button text is again set by managed bean actionListener.

  • After Clicking button (Event is processing)-

    Processing complete-

Thanks, Happy Learning :)

1 comment :

  1. I have a usecase which i was struggling to get over, If my button is calling two calls(means call 1 and call2 on single button click event) and i would like to see button content to be changed after first call ends or before 2nd call start. Can we achieve this??