Showing and Hiding the Loading or Progress Indicator Mask in a Creatio Freedom UI Page

When working with a Freedom UI Page you’ll come to learn just about everything you need, as far as other libraries & modules, is accessed via the DevKit SDK. For showing & hiding the loading mask for a Freedom UI page, this is also true. In classic Creatio pages, I have an article showing how to show/hide the loading mask using the MaskHelper. In a Freedom UI Page, you’ll use the MaskService, which is found in the DevKit SDK.

To use this devkit, you’ll need to add “@creatio-devkit/common” to the modules list of your page. This will look like this (note the “@creatio-devkit/common” in the square brackets and the sdk without quotes in the parenthesis):

define("UsrMyCustomEntity_FormPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"] /**SCHEMA_DEPS*/, 
function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
	return {
		// ... the rest of the page here
	};
});

Now, with that module available, you can access things in the SDK, such as the MaskService module. The MaskService module exposes two methods:

• showLoadingMask
• hideLoadingMask

To use it, you’ll just need to create an instance of the MaskService, then call the method.

let mask = new sdk.MaskService();

// show the mask
mask.showBodyMask(); 

// hide the mask
mask.hideBodyMask();

The end result is just as you’d expect: