When you create an Oracle Apex page that takes some time to process, you want to inform the user that the application is busy and prevent the user from performing any other actions in the page. Unfortunately Apex doesn’t provide an out-of-the-box solution for this. Therefore I’ve created a progress dialog that is easy to include in an existing application and without having to include a complete JavaScript library like jQuery.
The code
You need just three files to create this dialog. A JavaScript file, a CSS file for the layout and of course a progress image.
Let’s start with the JavaScript file, progress.js. The first two lines write DIV elements to the page.
document.write('<div id="light"><br>Application is busy, please wait...<br><img id="img_progress"></div>');
document.write('<div id="fade"></div>');
The DIV element light is used for the dialog, the DIV element fade is used to grey out the background. These DIV elements have a CSS class that is defined in the CSS file progress.css.
The function show_overlay simply shows the DIV elements created above by setting these elements visible via JavaScript . It also sets the progress image being used: progress.gif. The image should be located in your Apex images location.
The next function html_submit_progress is needed to create a submit in the Apex page that includes the progress dialog.
function html_submit_progress(pThis){
show_overlay();
document.wwv_flow.p_request.value = pThis;
document.wwv_flow.submit();
};
You will need to replace the regular submit in the page with this function. See the instructions for including the code in Apex.
Also included is the function zxcWWHS and window.onscroll=function, I won’t go into the details, but this code hides the scrollbar for the user.
Putting it in the page
Including the code into the Apex page is simple. The first step is to include the JavaScript and CSS file into the page. Put the following two lines of code into the HTML header of the page or in the header of the page template:
<link href="#IMAGE_PREFIX#progress.css" type=text/css rel=stylesheet> <script src="#IMAGE_PREFIX#progress.js" type=text/javascript></script>
Adding the URL redirect
Now just one step is needed to activate the progress dialog when submitting the page. Change the properties of the button that does the submit to redirect to a URL. The URL target value needs to be set to execute the JavaScript function.
The result
And that’s it, you’re page will now show the dialog after submit and make it very clear to the user that the application is busy. See my application on apex.oracle.com to see the dialog in action.
{ 1 comment… read it below or add one }
This is so cool.
I've seen some other solutions, but none was as small and easy as this.
This goes into my favorites bag