Open Dynamics 365 record in Modal Dialog window using navigateTo Client API

In this blog, I will be showing how to open a record in the Modal Dialog Pop-up window.

Dynamics 365 introduced navigateTo Client API to open the main form of dynamics 365 records in Modal Dialog instead of Xrm.Navigation.openForm.

This helps record to open in a new window or same window of the browser.

In the below code snippet, I have added code to open the CRM record in the Modal Dialog. 

Modal Dialog Form Using Ribbon Button

1. Code to open a New Create form in Modal Dialog Pop-up Window :

var parameters = {};
var id = formContext.data.entity.getId().replace("{", "").replace("}", "").toLowerCase();
var entityName = formContext.data.entity.getEntityName();
if (id != null || id != undefined) {
    var emailId = new Array();
    emailId[0] = new Object();
    emailId[0].id = id;
    emailId[0].name = formContext.getAttribute("subject").getValue();
    emailId[0].entityType = entityName;
    parameters["new_emailid"] = emailId;
}
//Open a New Create Form
var pageInput = {
    pageType: "entityrecord",
    entityName: "entityLogicalName",
    data: parameters,
    formId: "51ca9461-3209-4740-bd62-7320af2ae67e" // Pass form ID if any
};
 
Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
    function success() {
        //Run Code on success
    },
    function error() { }

);


This code will open a new create form using formParameter value as pageInput as well as form navigationOption, the form will pop up at position to the right side as shown in the below image. 

2. Code to open existing record,  Use the below code snippet:

var pageProperty = {
    pageType: "entityrecord",
    entityName: "entityLogicalName",
    formType: 2,
    entityId: "805dfe31-0686-ea11-a811-000d3a579c7e" //Pass record GUID
};
 
var navigationProperty = {
    target: 2,
    width: { value: 80, unit: "%"},
    position: 1
               };

Xrm.Navigation.navigateTo(pageProperty, navigationProperty);

This will open an existing record in the modal dialog at the position on the right side as shown below:

3. Code to open Modal Dialog, to show some custom html page:

var dialogParameters = {
    pageType: "webresource",//required
    webresourceName: "ab_/ModalDialog.html",//Html Web resource that will be shown
    data: data//optional
};
 
var navigationOptions = {
    target: 2,//use 1 if you want to open page inline or 2 to open it as dialog
    width: 400,
    height: 300,
    position: 1//1 to locate dialog in center and 2 to locate it on the side
};
 
Xrm.Navigation.navigateTo(dialogParameters, navigationOptions).then(
    function (returnValue) {
        //you can add handling of resultValue here
        console.log(returnValue);
        //put your success handler here
    },
    function (e) {
        //put your error handler here

    });

This code will show an HTML page in the Modal Dialog window as shown in the image.

Thanks ... That's all...

Happy Learning ...!!!