669 Views
5 minutes read
Categories
Dynamics 365

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 😊

Gayathri Selvamani

About Gayathri Selvamani

Gayathri has around 10+ years of extensive experience in Microsoft Dynamics CRM 2011/2013/2015 and SSIS, SSRS, C#.Net, ASP.NET with SQL Server, in development of applications using Microsoft Dynamics CRM and Microsoft Business Intelligence Development with an Enterprise support. In addition, she is conversant with Agile Scrum Methodology for the development of the application and Versioning control tolls like VSS, SVN, and TFS. Also, extended experience in using CRM Web Services/WCF interface and exposing organizational data and writing LINQ based queries to perform CRUD operations. Prior to joining Netwoven, she was working with Positive Edge Technology Limited, Bangalore as Technical Lead and Infosys Limited, Chennai.

Gayathri did her B Tech (Information Technology) from Bharathidasan University in the year 2003. She has completed Certifications in MSCRM 2013 Customization and Configuration and Developing ASP.net applications with C#.

A native of Tamil Nadu, she is presently living in Bangalore. During her leisure time, she loves listening music, watching movies and spending time with her family.

LinkedinTwitterFacebook

Leave a Reply

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