Usage Of Progress Indicator With Webresource In Dynamics CRM

Introduction

In Dynamics 365 CRM to show Progress Indicator, we have client API’s that are available under Xrm.Utility so that the user can know what is happening and can wait without performing any other operation. As an example, in contact record if at all mandatory field title was not filled then progress Indicator will be shown with message validation is going on.

Step 1

Login to the required environment and select required solution [Contact Customizations Solution in this case] as shown in the below figure.

Step 2

After Step 1, select contact web resource in solution and click on Edit as shown in the below figure.

Step 3

After Step 2, in contact web resource javascript file write the code to show progress indicator which expects a parameter message with the below syntax.

Xrm.Utility.showProgressIndicator(message)

As

Xrm.Utility.showProgressIndicator("Validation is going on ...");

Step 4

After Step 3, under show progress indicator close progress indicator method should be used to close show progress indicator with the settime out function with the below code 

Xrm.Utility.showProgressIndicator("Validation is going on ...");
setTimeout(
function () {     
    Xrm.Utility.closeProgressIndicator();
},
notificationTime
);

Step 5

After Step 4, now the total code looks like below

if (typeof (ContosoVaccination) == "undefined")
{
    var ContosoVaccination = {__namespace: true};
}
if (typeof (ContosoVaccination.Scripts) == "undefined")
{
    ContosoVaccination.Scripts = {__namespace: true};
}
ContosoVaccination.Scripts.ContactForm =
{
    handleOnLoad: function (executionContext)
        {
        console.log('on load - contact form');
        jobtitlemandatorylogic(executionContext);
        },
        handleOnTitleChange: function (executionContext)
        {
            console.log('on title change - contact form');
            jobtitlemandatorylogic(executionContext);
        },
    __namespace: true
}
function jobtitlemandatorylogic(executionContext) {
    var notificationTime = 3000; // 3 seconds in milliseconds
    var formContext = executionContext.getFormContext();
    if (formContext !== null && formContext != 'undefined')
    {
        var jobtitle = formContext.getAttribute("jobtitle").getValue();
        var jobtitlecontrol=formContext.getControl("jobtitle");
        console.log('job title-' + jobtitle);
        if (jobtitle == null)
        {
            formContext.ui.setFormNotification("Job title Mandatory- Error notification.", "ERROR", "JobTitleMandateNotification");
            jobtitlecontrol.setNotification("Job title Mandatory- Error notification.","jobtitlecontrolnotification");
            Xrm.Utility.showProgressIndicator("Validation is going on ...");
            setTimeout(
            function () {     
                Xrm.Utility.closeProgressIndicator();
            },
            notificationTime
                    );
        }
        else
        {
            jobtitlecontrol.clearNotification("jobtitlecontrolnotification");
        }
    }
}

Step 6

After Step 5, now save and publish code and then navigate to the contact where title is not present and then open that record and observe during onload show progress indicator will be shown with the message that validation is going on as shown in the below figure

Note:

1. Make sure to publish all customizations and upload JavaScript (js) file.
2. Close progress indicator should be used using the code above explained, otherwise, Progress indicator keeps on showing which will not allow other methods calls/lines of code execution. Proper care should be taken while using Progress indicator, otherwise progress dialog blocks the execution until it is closed.
3. Microsoft documentation found here

Conclusion

In this way, one can easily use Progress Indicator in web resource in Dynamics 365 CRM.