OOB Modal Dialogs in Dynamics 365 Form

OOB Modal Dialogs in Dynamics 365 Form

By Gayathri Selvamani  •  June 16, 2020  •  10441 Views

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.

OOB Modal Dialogs in Dynamics 365 Form

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 😊

3 comments

  1. Hi Gayathri,

    Thanks for this great post! Can you please send me the html of how you created this popup dialog? I am trying to create the same but I need your help 🙂

  2. Hi Gayathri,

    Thanks for sharing the post! Can you please help me with the html code? I tried but not getting the same as u shared the screenshot. Please help.

Leave a comment

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

Microsoft Partner
Microsoft Partner
Microsoft Partner
Microsoft Partner
Microsoft Partner
Microsoft Partner
Microsoft Partner
Unravel The Complex
Stay Connected

Subscribe and receive the latest insights

Netwoven Inc. - Microsoft Solutions Partner

Get involved by tagging Netwoven experiences using our official hashtag #UnravelTheComplex