Monday, May 20, 2013

ADF: How to use af:popup during long running tasks

Suppose the user wants to upload a file. And once he clicks on Upload button, a popup is displayed which actually disables the user input.

For this, create a javascript file and put it in public_html/js folder. Name the file as glassPane.js. These are the contents of the file:
function enforcePreventUserInput(evt) {
    var popup = AdfPage.PAGE.findComponentByAbsoluteId('popupProcessingChanges');
    if (popup != null) {
        AdfPage.PAGE.addBusyStateListener(popup, handleBusyState);

function handleBusyState(evt) {
    var popup = AdfPage.PAGE.findComponentByAbsoluteId('popupProcessingChanges');
    if (popup != null) {
        if (evt.isBusy()) {
        else {
            AdfPage.PAGE.removeBusyStateListener(popup, handleBusyState);

Drop a clientListener component on the button. Set the property 'method' as enforcePreventUserInput, and 'type' as Action.

Now create a popup. Give the id as popupProcessingChanges.
<af:popup contentdelivery="immediate" id="popupProcessingChanges">
        <af:dialog closeiconvisible="false" id="dialogProcessingChanges" title="Processing Changes" type="none">
          <af:panelgrouplayout halign="center" id="pgl1ProcessingChanges" layout="vertical">
            <af:image id="pt_i1" shortdesc="Loading " source="/images/loading.gif">

Also drop a resource component on af:form. Give the 'source' as /js/glassPane.js, and 'type' as javascript.

In case you want to use the javascript file in page template, then please refer this link:

No comments:

Post a Comment