Xpages: Loading…. (images and masking)

Sometimes for various reasons, clicking on links in in X-page, or refreshing a view or a page may take several seconds to complete. So that users do not keep clicking on the button, or think the browser is not working, i have added a “loading image” and a mask to show people that the page is working, just a little slow.

I hope someone shows me a better way to do this… but here is my attempt.

1. In the css file for the page add

div.loading {
   background-image: url(ajax-loader.gif);
   background-repeat: no-repeat;
   background-position: center;
   background-color:black;
}

2. Add a JavaScript library and name it loading, then add these lines

dojo.require('dijit.Dialog')

function loading() {
   underlay = new dijit.DialogUnderlay({'class': 'loading'});
   underlay.show();
}
function stoploading(){
   underlay.hide()
   }

3. Insert the JavaScript library loading on the page under the resources section

Now to implement this in a button that does not do a “full update”

1. In the outline on the button expand the button and click on event handler, then clcik the all properties tab.

2. in the onStart event enter loading()

3. in the onComplete enter stoploading()

Now to implement this in a button that does a “full update”

1. In the onClick event, choose the client tab, then enter in loading()

Now to implement this in view column link

1. First we have to change how it open a document, click on the onClick event.

2. Create an action on the server side to execute a script.

3. set the script to:

doc = viewEntry.getDocument();
applicationScope.docid1 =  doc.getUniversalID();

4. Create another action to open a new page, put in the page name to open, then edit document, then document id should be computed to

applicationScope.docid1

5. On the Client tab, enter in loading()

All of these will produce a mask covering the whole screen with a loading image in the middle like