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){
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>
screenshot

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.

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

5 comments on “Progress dialog in Oracle Apex

  1. 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 :-)

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  2. Teo Emmanuel on said:

    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

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • Peter van der Neut on said:

      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

      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  3. rizwan ali on said:

    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

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  4. Carlo Bellero on said:

    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?

    bye
    CARLO

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

Previous post:

Next post:

About Whitehorses
Company profile
Services
Technology

Whitehorses website

Home page
Whitebooks
Jobs

Follow us
Blog post RSS
Comment RSS
Twitter