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.
Whitehorses is specialized in succesfully implementing Oracle SOA solutions: BPEL, OSB, WebLogic & BPM
{ 4 comments… read them 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
Hi,
Just stumbled upon this and it looks great.
But how to you actually execute a process that was executed to the submit button?
Also does the progress last as long as the process is executed?
Teo
Hi Teo,
You do this by creating a process with a condition type “REQUEST=Expression1″. Expression1 is the same as the value you provide to the html_submit_progress function (in my example above it’s “SUBMIT”). And then the progress indeed will last as long as the process executes.
Peter
Hi Peter,
i just want to know some workaround to show progress dialog while pressing login button of application as its of item type which doesn’t allow any button option to call “html_submit_progress” javascript function.Thanks.
Rizwan