Apr 22, 2016

"Please Wait" loading dialog in IBM BPM 8.x

Coaches in IBM BPM can at times take a while to load, producing a sense of confusion in the end user's mind. A blank page with no data can be frustrating, so providing a spinning wheel like animation makes them feel better, because there is something to start at, and a hope that it will eventually load the actual page. There are many toolkits and libraries that may do this, but with Dojo under the hood, you can do this yourself with just 4-5 lines of JS. Here is how, in 4 simple steps.

If you are on a older version that does not support Coach views, then use the code in the Coach view below in a Custom HTML element directly inside the coach.

Step 1: The Image
Download a royalty-free gif file with loading animation fromthe internet, rename it to “loading.gif” and import that image onto your process app (or toolkit).

Step 2: The Coach View
Create a new coach view, and add the following code on the “Behavior” tab -> View function
Leave all other sections and configurations blank. 
The coach view configuration

require(["dojo/domReady!"], function(){
// will not run until DOM is finished loading
dojo.query('#Button1 button')[0].click();
var i = dojo.query('img')[0];
i.parentElement.style.top = (screen.availHeight/2)-100 + "px"; i.parentElement.style.right = (screen.availWidth/2) + "px";
i.src = com_ibm_bpm_coach.getManagedAssetUrl('loading.gif', com_ibm_bpm_coach.assetType_WEB);

Step 3: The Coach
Create a human service like this. The decision gateway is optional, but helps keep it configurable whenever you want to turn it off. I have an environment variable declared to turn this on/off just in case it stops working whenever the browsers are updated, and it can be a showstopper.

The coach structure
Inside the coach, add a button and the new coach view that we created in step 2.

Coach design - with a button, and coach view

The control id of the button must be Button1, if it’s different – then update the control id or change the source code of the Coach view – line #3 to point to the actual one.

Step 4: The Human service
Now embed this “Pre-Loader” human service right after the Start step of your actual human service where you want to see a pre-loader.
Placing the pre-loader in actual service

No comments:

Post a Comment

You may also like these writeups

Related Posts with Thumbnails