I have an XPages application that is querying a DB2 table via JDBC, and it takes a couple of seconds before it returns some data I display in a nice grid after a partial update.
The thing is: if the user should wait a couple of seconds, he should be warned, so that he knows something is going on. Â First of all, it’s nice, user friendly and polite. Â Secondly, you don’t want your user to get all experimental and starting to click all over the place in order to get some feedback. Â Because he will, eventuallyÂ ;-).
- Â You need a preloader image first. Â Try to match the image of your choice with your theme or layout. Â A good starting point to create a preloader isÂ http://ajaxload.info/Â but there are probably tons of other sites with such preloader generators. Â I created this tiny “waiter”.
- Add the image as an image control to your XPage where you want it to appear.
- Of course, you don’t want to show it all the time (or your user might get hypnotized by it); you want to hide it to start. Â You do this by adding a div with visibility hidden. Â OR you can call the clientside id of the image and hide it directly. The source code may look like this:
<div id="wait" style="visibility:hidden;margin:0;padding:0;height:0">
<xp:image url="/ajax-loader.gif" id="image3"></xp:image>
- You want to show the image when your SSJS is called and hide it once your SSJS is finished. Â A good thing we have the onStart and onComplete events in the Event handler of a control. Â You can access these by opening the outline tree for the control where your SSJS is executed (in my example a radio button) and open the Event handler below it. Â It’s a bit hidden.
If you then open the Properties for this, onStart and onComplete are listed there.
- onStart you enter the (client) JS:
dojo.byId("wait").style.visibility =Â "visible";
- onComplete you enter the (client) JS:
dojo.byId("wait").style.visibility =Â "hidden";