Follow Us on Twitter

Progress dialog in Oracle Apex

by Peter van der Neut on October 13, 2009 · 5 comments

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){
document.wwv_flow.p_request.value = pThis;

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 to see the dialog in action.

Progress dialog in Oracle Apex, 4.0 out of 5 based on 2 ratings
VN:F [1.9.22_1171]
Rating: 4.0/5 (2 votes cast)

{ 5 comments… read them below or add one }

Michel van Zoest October 13, 2009 at 8:23 am

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 🙂


Teo Emmanuel October 8, 2010 at 3:28 pm

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?



Peter van der Neut October 10, 2010 at 4:07 pm

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.



rizwan ali October 7, 2011 at 6:33 pm

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.



Carlo Bellero December 19, 2012 at 11:07 am

Hi Peter,
compliments for your solution, it is simple and effective!
I tried using your solution in a tabular form, but it does not work in tabular form if there is a column with simple-check box.
Do you have a suggestion for me?



Leave a Comment


Previous post:

Next post:

About Whitehorses
Company profile

Whitehorses website

Home page

Follow us
Blog post RSS
Comment RSS