Showing the Loading or Progress Indicator in Creatio (formerly bpm’online)

When you have code that is doing something like calling a configuration service, starting a process, or some other longer running task, it’s always a good idea to show something to the user so they know something is happening. Bpm’online has a built in loading/progress/spinner that you can use for this purpose. Plus, it’s easy to use.

To use this, we’ll need to add MaskHelper to our AMD modules list of our code. What this means is, in the page code you’re calling this from, you’ll add something like this:

define("LeadPageV2", ["MaskHelper"], function(MaskHelper) {
    return {
        entitySchemaName: "Lead",

        // ... all the rest of the stuff

    };
});

Note the part at the top, you’ll see “MaskHelper” (in quotes) in the square brackets and MaskHelper (not in quotes) in the function parameters. Looking at require.js or other searches for AMD modules will show you more info on this topic, but basically it is a way for a module to be provided to your code for you to use.

Now that you’ve added that, it’s easy to use.

// show loading spinner
MaskHelper.ShowBodyMask();

// hide loading spinner
MaskHelper.HideBodyMask();

Or, if you’d like to set some custom text value for the spinner, instead of the generic “Loading”, you can do that as well:

// show the loading spinner
var maskId = MaskHelper.ShowBodyMask();

// now update the caption
MaskHelper.UpdateBodyMaskCaption(maskId, "Hold on, I'm working on it...");

// hide it normally 
MaskHelper.HideBodyMask();

There are a few other ways to show & hide the progress mask in bpm’online, however, I find this approach the most straightforward.