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

// hide the mask

The end result is just as you’d expect:

Want content like this delivered to your inbox? Sign up for our newsletter!

Ryan Farley

Ryan Farley is the Director of Development for Customer FX and creator of He's been blogging regularly about SalesLogix, now Infor CRM, since 2001 and believes in sharing with the community. His new passion for CRM is Creatio, formerly bpm'online. He loves C#, Javascript, web development, open source, and Linux. He also loves his hobby as an amateur filmmaker.

Submit a Comment

Your email address will not be published. Required fields are marked *