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

Introduction:

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

Code:

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

Note:

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