Enhancement to waitPopup on APEX5
APEX 5 has a nifty nice enhancement to the use of apex.widget.waitPopup. It now returns a “remove” function you can call to remove the wait indicator.
// variable for return function (add it to your "Function and Global Variable Declaration" field)
var $wP;
// Start the page overlay
setTimeout(function(){
$wP = apex.widget.waitPopup();
}, 10);
// do long running "stuff"
// remove overlay and indicator
$wP.remove();
The Details
I’ve used apex.widget.waitPopup many times. You simply call it like this:
apex.widget.waitPopup();
In APEX 4.x, you would see the following animated GIF.
Often, you would call it before submitting the page if you had a long running step. Then when the page refreshes it would be gone. If instead you were going to remain on the page, you had to manually remove it.
// add page overlay and wait indicator
setTimeout(function(){apex.widget.waitPopup()},10);
// long running "stuff"
long_running_step();
// remove indicator in APEX 4.x
$("#apex_wait_popup").remove();
$("#apex_wait_overlay").remove();
Notice the use of setTimeout as sometimes, inside of a Dynamic Action, the page rendering would be frozen and you wouldn’t see the wait indicator.
To remove the overlay and the wait GIF image you would have to remove them from the DOM with the jQuery .remove();
However, now on APEX 5, apex.widget.waitPopup returns a remove() function you can call to handle this for you. I find this a much nicer and elegant approach.
This is how the new waitPopup looks in APEX5.
Hi, I'm Jorge Rimblas. Father, husband, photographer, Oraclenerd, Oracle APEX expert, Oracle ACE, coffee lover, car guy, gadget addict, etc... I'm an APEX Tech Lead DRW. I have worked with Oracle since 1995 and done eBusiness Suite implementations and customizations. Nowadays I specialize almost exclusively in Oracle APEX.
Are there any differences in Apex 5.0 in how it greys out the page. It does not grey out the pages for me in 5.0.
This is very interesting. There’s an element with a class of apex_wait_overlay that provides the grayed out background. However, it seems that in the Universal Theme (as of APEX 5.0.1) there’s no CSS for the overlay.
If you add the following CSS declaration to your app you should see it.
.apex_wait_overlay {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1001;
-moz-opacity: .5;
opacity: .5;
filter: alpha(opacity=50);
}
When using previous themes the CSS is already there.
Now, I wonder if this is by design… hmmm
Glad to report that APEX 5.1 EA correct this issue and the class is defined again.
I must say, I like the whitish look (as opposed to gray) that UT uses.
Hi,
the css effect for overlay doesn’t work in Apex 18.1x can you try please…regards
Thanks.. that works! Maybe since this is an undocumented feature it’s going away?…
This is documented in APEX 5.0, but the correct API name is showSpinner:
apex.util.showSpinner
They are not the same thing. The spinner call doesn’t include the overlay. The overlay, added by apex.widget.waitPopup() adds an overlay so no input is possible on the page. This is not so with the spinner alone.
when i call this function in javascript “apex.widget.waitPopup()”. for Function processing wait.but it is not remove when then function is done.Even i remove that function.
Can you tell me how to remove or stop it within Javascript.
Thank you.
Thanks for the info. However I too am struggling to get the spinner to go awa!!
I’m using APEX 5.0 and the pages in my application contain a number of charts that take a few seconds each to load. I want my users to know when the charts are loading, but also when they are done. Can you help at all?
Hi Jorge,
If I enter text in a form and try to navigate away, I get the warning “Changes you made may not be saved.” as I should.
But when I select STAY so I can save my changes the page shows the spinner and does not allow anything but a reload of the page.
I also need to kill the spinner.. any wisdom on the topic :)
Thank you,
Bill Carlisle
If I understand, you using `apex.widget.waitPopup();` to trigger the spinner, but when you chose to stay on the page you have not “event” to remove it, correct?
Hmmm, I just explored the possibility of hijacking the alert call and add a callback to remove the spinner. Unfortunately, it seems that the “This page has unsaved changes.” message is handled differently by each browser.
So maybe you change your approach. On your submit buttons, see if `apex.page.isChanged() === true` then YOU ask the user if they want to save changes and then only issue the spinner if you will continue. Otherwise, I don’t have any brilliant ideas yet. Maybe post on the forums to get a collective answer?
No problem, Was trying to reproduce it on APEX site and couldn’t so I just selected the “Warn on Unsaved Changes” to “No” under “Navigation” for page attributes.
Still curious though.. so I’ll be watrching your answers.. thank you for spending all this extra time to help others! You are very appreciated.
Happy APEXing,
Bill Carlisle
Hi sir, Thank you for the stuff. If you can help me, I have another doubt that, can we install apex in one system and connect to database in another system?. I tried this using synonym (centos) , but some updations and temporary table didn’t worked. Forms having tabular form generated error and I am unable to create tabular form based on a table from system where I installed apex. I want to keep apex in one system and database in another system due to the large file size generated in apex. I use apex 5.0.3
But is there a way to replace “apex_wait_overlay” and “apex_wait_popup” with custom animation? I did it by redefining “apex.util.showSpinner” with my own script, but it didn’t replace every spinner. Some of them remained the same old spinning gif with arrows. How to replace them all?
Instead of redefining the javascript function I would explore overwriting the CSS. That approach should be less invasive and much more future proof than changing the JS.
Look at the beginning comments on this blog post for how `apex_wait_overlay` was defined/redefined for ideas.
is there any way to close it dynamically, like close it automatically when process finish processing instead putting 10 seconds.
It simply closes when the page reloads or branches.
The 10 in the code is the delay to open, and is in milliseconds. Actually that can be switched to a 1.
And to close automatically you use the
$wP.remove();