ADF - How-to show a glasspane and splash screen for long running queries

A Glass Pane is a pop-up that prevents user-input while a large database job or query is running in the background. It uses a splash screen with an animated image giving the impression of activity while the job completes.

The Glass Pane will consist of a pop-up that is activated by a javascript function included in the page-template.

Add Javascript File and Popup to Page Template:

Add the Popup in the Template as follows:

 <af:popup id="Busypopup"  contentDelivery="immediate">
                <af:dialog id="d2" type="none" closeIconVisible="false" title="File uploading...">
                    <af:panelGroupLayout id="pgl5" layout="vertical">
                        <af:image source="/resources/images/1processing.gif" id="i1"/> 
                    </af:panelGroupLayout>
                </af:dialog>
            </af:popup>

Include below Javascript code in the Template by using a Resource component.

function enforcePreventUserInput(evt) {
              var popup = AdfPage.PAGE.findComponentByAbsoluteId('pt1:Busypopup');
              if (popup != null) {
                  AdfPage.PAGE.addBusyStateListener(popup, handleBusyState);
                  evt.preventUserInput();
              }
          }
              function handleBusyState(evt) {
                  var popup = AdfPage.PAGE.findComponentByAbsoluteId('pt1:Busypopup');
                  if (popup != null) {
                      if (evt.isBusy()) {
                          popup.show();
                      }
                      else if (popup.isPopupVisible()) {
                          popup.hide();
                          AdfPage.PAGE.removeBusyStateListener(popup, handleBusyState);
                      }
                  }

              }

In above Code , pt1 is the page template id and Busypopup is the popup id.
pt1:Busypopup by this we get the address of popup.



Client Listener

On the button that calls the query or database job add a clientListener.
Ensure the PartialSubmit of the button is set to true (the default)


Add enforcePreventUserInput as the method (the javascript function we created earlier)

For  <af:inputFile> component use Type -> click in Client Listener

For  <af:button>     component use Type -> action in Client Listener

Output: