Back to Basics # 45: 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 …”);

As shown in the below figure

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

                    );

As shown in the below figure

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”);

        }

    }

}

As shown in the below figure

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 keep on showing which will not allow other methods calls / lines of code execution. Proper care should be taken while using Progress indicator, other wise 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.