Adding a “Loading” message for slow paths

applies to version: 8.2.x, author: Kamil Nędza

Sometimes the transition between two steps of a workflow may take more time than expected. Large amounts of “On path” actions,  complex SQL queries or the need to communicate with an external system are ale possible  causes for an increased wait time. Sometimes it is impossible to speed up the system, in such cases it is probably a good idea to clearly inform the user that they might be in for a longer wait than usual. JavaScript comes to the rescue.

 

Configuration:

Go to the Behavior tab in the workflow configuration. On the bottom there is a section called JavaScript to be registered on the webpage, enter the following function into that field:

function DisableRootPanelWithMessage(msg) {

var data = $(window).data();

var isUnblocked = (typeof data[“blockUI.onUnblock”] === ‘undefined’);

if (!isUnblocked ) {

// is blocked

EnableRootPanel();

$.blockUI({ message: ‘<h1>’ + msg + ‘</h1></br><img src=”/_layouts/images/webcon/wait.gif” />’, css: { border: ‘none’, backgroundColor: ‘transparent’ }, overlayCSS: { opacity: ‘0.1’ } });

}

}

 

Fig. 1. JavaScript to be registered on the webpage

 

This function will block the workflow element and display the defined message. Next we need to add a timeout on path, which will activate that function:

setTimeout(function(){DisableRootPanelWithMessage(‘Processing. Please wait.’)},2500);

Go to the configuration for the path, in the Parameters tab go to the Additional path validation (JavaScript) at the bottom. Add the script setting the timeout:

 Fig. 2. Adding the timeout script

 

Final effect:

If it the user has to wait more than 2.5 seconds to traverse a path, they will get a message asking them to be a little patient 🙂

 Fig. 3. A sample message