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.
Hello Ryan,
Your article “Showing the Loading or Progress Indicator in Creatio” matches my needs exactly, I implemented the principle as shown, but nothing happens on the screen.
I see the article is a bit old, should the progress indicator system described still work today?
I am in Creatio 8.0.5 and my window is not Freedom UI.
Thank you in advance for your response
Yes this still works for classic pages in 8.0.5. If it’s not working for you, there could be something else going wrong. Perhaps start with looking in the dev tools console of your browser for any errors?
Hello Ryan
I had put my project aside for a while and but I’m getting back to it now…
I have no errors in the console of your browser’s developer tools.
However, by doing different tests, I found a clue in the search for my problem.
An important point was that I would like to display the spinner during the execution of a process.
To launch the process, I use the method with callback indicated in your article https://customerfx.com/article/programmatically-starting-a-process-from-client-code-in-bpmonline/
By putting traces in the browser console, I have the impression that the display and hiding of the spinner are too fast to be visible…
Do you have a clue to give me to make this work?
Thank you in advance for your response
The process is started from the client, but the callback occurs when the process has been successfully started, not when it has completed. A process can have elements that span long periods of time, wait for user action, etc, so there’s no way to have the callback execute when the process has completed.
Instead, you could start the spinner when the process is started, and then send a message back to the client from the process when it is ending. This article shows how to send a message from a script task in the process and you can add a client side function to receive this message (which would hide the spinner) https://customerfx.com/article/sending-a-message-from-server-side-c-to-client-side-javascript-in-bpmonline/
Ryan
its working for freedom ui?
See this article for the Freedom UI version https://customerfx.com/article/showing-and-hiding-the-loading-or-progress-indicator-mask-in-a-creatio-freedom-ui-page/
Hello Ryan,
I can’t get the system to work with messages either
However, I did add the modules in the declaration:
define(“ContractPageV2”, [“ProcessModuleUtilities”, “MaskHelper”], function(ProcessModuleUtilities, MaskHelper) {
I created the functions as described:
init: function() {
this.callParent(arguments);
// register our function to receive messages
Terrasoft.ServerChannel.on(Terrasoft.EventName.ON_MESSAGE, this.onServerMessageReceived, this);
},
onServerMessageReceived: function(scope, message) {
var sender = message && message.Header.Sender;
// make sure the message received is the one you sent
if (sender === “SomeMessageId1”) {
MaskHelper.ShowBodyMask();
window.console.log(“MaskHelper.ShowBodyMask()”);
}
if (sender === “SomeMessageId2”) {
MaskHelper.HideBodyMask();
window.console.log(“MaskHelper.HideBodyMask()”);
}
},
destroy: function() {
// unregister so we no longer get messages
Terrasoft.ServerChannel.un(Terrasoft.EventName.ON_MESSAGE, this.onServerMessageReceived, this);
this.callParent(arguments);
}
And I added two “scripts” in my process one sending “SomeMessageId1” at the beginning of the process and one sending “SomeMessageId2” at the end of the process.
As you can see in my code snippet, in addition to the “ShowBodyMask()” and the “HideBodyMask” call, I write a message in the browser console to track the triggering of messages by the process.
I have my two messages in the console with times of appearance consistent with the events of the process, but I desperately don’t have the spinner…
I also tried to trigger the spinner in js code before the call to the process and to perform only the “HideBodyMask” on the return of the message of my process, but I get the same behavior.
I can’t understand what is happening…
Thanks
Vincent
Possibly the interval between showing and hiding isn’t long enough for the spinner to load and show?