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 |
