Back to Basics # 56: Understand Open Dialog with Webresource in Dynamics CRM

Introduction:

In Dynamics 365 CRM, for certain requirements we need to show dialog window.  We can use openAlertDialog method present in Client API Reference in Dynamics crm. As an example, for a selected contact record, open dialog will be shown.

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, under clientAPIReference of CRM – openAlertDialog method to be used which expects couple of arguments alertsettings,alertoptions using below code

var alertStrings = { confirmButtonLabel: “Ok”, text: “This is an alert.”, title: “Sample title” };

        var alertOptions = { height: 120, width: 260 };

Xrm.Navigation.openAlertDialog(alertStrings, alertOptions).then(

            function (success) {

                console.log(“Alert dialog closed”);

            },

            function (error) {

                console.log(error.message);

            }

        );

As shown in the below figure

Step 4:

After Step 3, keep the above code snippet inside a function and register it on form load event of contact table(entity) form and final 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’);

        showDialog(executionContext);

        },

    __namespace: true

}

function  showDialog(executionContext)

{

    let formContext = executionContext.getFormContext();

    if (formContext !== null && formContext != ‘undefined’)

    {

        var alertStrings = { confirmButtonLabel: “Ok”, text: “This is an alert.”, title: “Sample title” };

        var alertOptions = { height: 120, width: 260 };

        Xrm.Navigation.openAlertDialog(alertStrings, alertOptions).then(

            function (success) {

                console.log(“Alert dialog closed”);

            },

            function (error) {

                console.log(error.message);

            }

        );

    }

}

As shown in the below figure

Step 5:

After Step 4, save Webresource and publish it and publish all the customisations and open a contact record and observe dialog with title and button and also observe console window after clicking on Ok button on dialog message Alert dialog closed as  shown in the below figure.

Note:

1. Make sure to publish all customizations and upload JavaScript (js) file.
2. Microsoft documentation can be found here

Conclusion: In this way, one can easily show dialog using a Webresource(javascript).