OOB Modal Dialogs in Dynamics 365 Form

There are many new features added in Dynamics 365 2020 release. One of those is being able to open forms (Entity Record, Entity List or HTML Web resource) as a Modal Dialog. This is pretty awesome and very easy to implement. This article will take you through the basic routine to open a modal dialog and also provide sample codes for some common functionalities that are often used within the page. Additionally, it will provide you with few examples demonstrating how to handle account and entity records as well. 

The basic syntax to open the Dialog is

Xrm.Navigation.navigateTo(pageInput,navigationOptions).then(successCallback,errorCallback);

We can use the below code to open the HTML file as a Dialog.

Open an HTML web resource in a dialog

var pageInput = {
    pageType: "webresource",
    webresourceName: "new_sample_webresource.htm"
};
var navigationOptions = {
    target: 2,
    width: 500, // value specified in pixel
    height: 400, // value specified in pixel
    position: 1
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
    function success() {
            // Run code on success
    },
    function error() {
            // Handle errors
    }
);

We got a requirement from the Client, where the User should be able to enter their comments in a HTML Page and submit the form for Approval. The HTML Popup will look like this.

To achieve this, We created a new HTML page and added reference for ClientGlobalCOntext.js.aspx as shown below.

We have added bootstrap references to show the header, Footer and Content sections in the page.

<script src="../../ClientGlobalContext.js.aspx"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

Also we used WebAPI calls to update the CRM record on click of ‘Cancel’ button as shown below.

Xrm.WebApi.online.updateRecord("entityname", id, entity).then(
function success(result) {
                        parent.location.reload();
                        parent.$("button[data-id='dialogCloseIconButton']", parent.document).click();

                    },
                    function (error) {
                        Xrm.Utility.alertDialog(error.message);
                    }
                );
}

Some Functionalities

Let’s look at some sample codes for the common functionalities which may be required in the HTML files.

To get the Query string Parameter values

function getUrlParameters() {
	var queryString = location.search.substring(1);
	var params = {};
	var queryStringParts = queryString.split("&");
	for (var i = 0; i < queryStringParts.length; i++) {
		var pieces = queryStringParts[i].split("=");
		params[pieces[0].toLowerCase()] = pieces.length === 1 ? null : decodeURIComponent(pieces[1]);
	}

	return params;
}

To get the Logged in User Details using Global Context

var globalContext = Xrm.Utility.getGlobalContext();
var userId = globalContext.userSettings.userId.toString().replace('{','').replace('}', '');
return userId;

To close the Dialog

parent.$("button[data-id='dialogCloseIconButton']", parent.document).click();

To hide the Page Resize button in the Dialog

parent.$("button[data-id='dialogResizeIconButton']", parent.document).hide();

To set Header Text for the Dialog

parent.$("h1[data-id='defaultDialogChromeTitle']",parent.document).html("Comments");

To refresh/reload the Parent CRM Page on close of the Dialog

parent.location.reload();
parent.$("button[data-id='dialogCloseIconButton']", parent.document).click();

To show the Dialog in right side similar to ‘Quick Create’ Form, then we need to set the Position as ‘2’ in Navigation Options. Default value is ‘1’ which will show the HTML in the center.

var navigationOptions = {
    target: 2,
    width: 500, // value specified in pixel
    height: 400, // value specified in pixel
    position: 2
};

Some Examples

Example 1: Open account entity list

var pageInput = {
    pageType: "entitylist",
    entityName: "account"
};
Xrm.Navigation.navigateTo(pageInput).then(
    function success() {
            // Run code on success
    },
    function error() {
            // Handle errors
    }
);

Example 2: Open an existing account entity record within a dialog

var pageInput = {
    pageType: "entityrecord",
    entityName: "account",
    entityId: "5a57f2c3-5672-ea11-a812-000d3a339706" //replace with actual ID
};
var navigationOptions = {
    target: 2,
    height: {value: 80, unit:"%"},
    width: {value: 70, unit:"%"},
    position: 1
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
    function success() {
            // Run code on success
    },
    function error() {
            // Handle errors
    }
);

Example 3: Open an account form in the create mode within a dialog

var pageInput = {
    pageType: "entityrecord",
    entityName: "account"    
};
var navigationOptions = {
    target: 2,
    height: {value: 80, unit:"%"},
    width: {value: 70, unit:"%"},
    position: 1
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
    function success(result) {
            console.log("Record created with ID: " + result.savedEntityReference[0].id + 
            " Name: " + result.savedEntityReference[0].name)
            // Handle dialog closed
    },
    function error() {
            // Handle errors
    }
);

Some References

https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/reference/xrm-navigation/navigateto

We always wanted an OOB way to handle modal dialogs in CRM. Hopefully, this will indicate to you all that are required to successfully use a modal dialog in various contexts. Feel free to comment further and I shall respond duly.

Happy CRMing 😊