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 ...!!!

Step By step process to Add Ribbon button and onclick open Modal Dialog Form

Start your work with Ribbon Workbench:

Follow the step-by-step process to add a Ribbon Button on the entity form and perform Create and update operations with the click of the ribbon button.

In this blog, I'm going to show you step by step process:
1. To add a button on Ribbon (let's say Update) on the email activity form.
2. Onclick of Update button opens a new record form in the pop-up window in Modal Dialog Form if the record doesn't match with the record ID on the email activity form (Lookup Field: "to").
3. Else OnClick open update form in the pop-up window in Modal Dialog Form if record exists with the record ID on the email activity form (Lookup Field: "to").

Click here to learn more about Xrm.Navigation.navigateTo

Note: A new feature in the 2020 Release Wave 1 enables users to open records in a modal dialog without leaving the main record form in model-driven apps for Dynamics 365 and Power Apps.

Here are few more references related to the dynamics 365 ribbon button: 
To hide and show button on dynamics 365 ribbon.

Hide ribbon button on a view (Home grid) if one or more records selected in view

----------------------------------------------------------------------------------------------------------
Let's begin: 

1. First Create a basic javascript file (email.js), add method (OnclickOfRibbonButton), and logic in it. Which can be used on the ribbon button click functionality.

Here you start, follow the example below add below code in your email.js webresource file:

if ("undefined" == typeof (NEW)) {
    NEW = { __namespace: true };
}
 
NEW.Email = {
    OnclickOfRibbonButton: function (primaryControl) {
        try {
            var formContext = primaryControl;
            var navigationOptions = {
                target: 2,
                height: { value: 80, unit: "%" },
                width: { value: 30, unit: "%" },
                position: 2
            };
            if (formContext.getAttribute("to").getValue() != null || formContext.getAttribute("to").getValue() != undefined) {
                var toId = formContext.getAttribute("to").getValue()[0].id.replace("{", "").replace("}", "").toLowerCase();
              // Open the Modal Dialog Update form in the pop-up window with Matching record ID.
                var pageInput = {
                    pageType: "entityrecord",
                    entityName: "new_customentity",
                    entityId: toId  // Pass record ID (lookupID) which you want to update 
                };
                Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
                    function success() {
                        // Run success code - Add your logic here 
                    },
                    function error() {
                        // Handle errors
                    }
                );
            }
            else {
              // Open the Modal Dialog New Create Form in the pop-up window.

                var pageInput = {
                    pageType: "entityrecord",
                    entityName: "new_customentity"
                };
                Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
                    function success(result) {
                           // Run success code - Add your logic here 
                    },
                    function error() {
                        // Handle errors
                    }
                );
            }
            return true;
        }
        catch (error) {
 
        }
 
    },
};

2. Now navigate to Settings -> Customizations -> Solutions
-> Create a new solution for your ribbon changes 
-> add an email entity (only entity, do not include any dependent file, uncheck and         proceed) to the solution (where you want to place your ribbon button),
-> keep the solution minimum (do not add anything else).

3. Open Ribbon Workbench (you can use XrmToolBox for a better experience): select the solution where you added an email entity and look for an entity left side (verify if the email is as a selected entity there)

4. Navigate to left-hand side inside Toolbox -> Click & hold the button and place it on the form as shown)

5. As highlighted in the image update the ribbon button values:

-> Change the default Id name to proper meaning full name.
-> Change the Label default name to some meaning full name
-> Add Tool Tip title 
-> Add Tool Tip Description

-> Select command (Command you can add after Step No. 6 is completed)

6.  No Go and Add Command (+) 
-> Change the default Id name to proper meaning full name.
-> Add Action: Custom Javascript Action:  in Library file select email                         webresource file by clicking on the search icon,  Add calling Function                     name: NEW.Email.OnclickOfRibbonButton.
-> Click on Add Parameter: Add CRM Parameter and Select Value:                             PrimaryControl 

7. Add Display Rule -> Update appropriate Id name-> Click on Add Display Steps     -> Select FormStateRule -> Set Default: true -> InvertResult: true

8.  Click on: Publish

9. Go to CRM Email Message form look for Ribbon Button and perform click operation. Click On -> Update Button

10.  As the record doesn't exist on the email activity (with passed ID) so a new Modal Dialog pop-up window form gets open.

To hide and show button on dynamics 365 ribbon.

Hide ribbon button on a view (Home grid) if one or more records selected in view

 

That's all Thank you !!!
Keep Learning...