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

Sharing is Caring

This post is not about any specific topic of the framework, In this post, I am sharing – How to update page component while an event is processing ? recently I was working in an application, the requirement was like this
There is a button on the page that uploads a large file to the server and it takes some time. So as soon as the user press this button it’s text should be changed to ‘Processing..’ and after the upload is complete it should be ‘Done’

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 the page and create an ActionListener, it will change the 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 {
Thread.sleep(10000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//After processing set button text to 'Done'
buttonBind.setText("Done");
AdfFacesContext.getCurrentInstance().addPartialTarget(buttonBind);
}

public void setButtonBind(RichButton buttonBind) {
this.buttonBind = buttonBind;
}

public RichButton getButtonBind() {
return buttonBind;
}

 

    • Now the question is how to change the button text to ‘Processing..’ immediately after clicking the button. So for this purpose, I am using javascript

function changeButtonText(event) {
                  var comp = event.getSource();
                  comp.setText('Processing..');
              }

 

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

 <af:document title="UpdatePageComponent.jspx" id="d1">
            <af:resource type="javascript">
              function changeButtonText(event) {
                  var comp = event.getSource();
                  comp.setText('Processing..');
              }
            </af:resource>
            <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"
                                   actionListener="#{viewScope.UpdatePageComponent.processValueAction}"
                                   clientComponent="true" binding="#{viewScope.UpdatePageComponent.buttonBind}"
                                   inlineStyle="width:250px;text-align:center;padding:5px;font-weight:bold;">
                            <af:clientListener method="changeButtonText" type="action"/>
                        </af:button>
                    </af:panelBox>
                </af:panelGroupLayout>
            </af:form>
        </af:document>

 

    • As soon as the 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 the button (Event is processing)-

Update page component

Processing complete-

Thanks, Happy Learning 🙂

Related Posts

An Oracle ACE, Blogger, Reviewer, Technical Lead working on Oracle ADF

0 thoughts on “Update page component in between of event processing in ADF Faces using JavaScript”

  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??

Leave a Reply

Your email address will not be published. Required fields are marked *