Open dynamics record in dialog/Modal popup using navigateTo Client API

In 2020 Release Wave 1 Update for Dynamics 365 introduced navigateTo Client API to open main form of dynamics record in dialog instead Xrm.Navigation.openForm. This helps record to open in new window or same window of browser.

Also with the help of Xrm.Navigation.navigateTo, we can open custom HTML too and we can pass some parameters or accept return values in MSD 365 JavaScript too.

Below, we have provided information about how to open the CRM record in dialog. So to open new form for the entity is by below code snippet ..

var parameters = {};
             parameters["soft_para1"] =;
             parameters["soft_para2"] = formKeyString;
             parameters["soft_para3"] = 1;

var pageInput = {
             pageType: "entityrecord",
             entityName: "soft_entityLogicalName",
             data: parameters,
             formId: "71ca9461-3209-4740-bd62-7320af2ae89c"

Xrm.Navigation.navigateTo(pageInput, { target: 2 }).then(
         function success() {
             //do something 
             //do something
         function error() { }

To open existing record use below code snippet

var pageProperty = {
                     pageType: “entityrecord”,
                     entityName: “contact”,
                     formType: 2,
                     entityId: “979dfe31-0686-ea11-a811-000d3a579c9c”//guid of record

var navigationProperty = {
                 target: 2,
                 width: { value: 80, unit: “%” },
                 position: 1
Xrm.Navigation.navigateTo(pageProperty, navigationProperty);

Now, to show some custom html page

var dialogParameters = {
 pageType: "webresource",//required
 webresourceName: "ab_/ModalDialog.html",//Html Webresource 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
 //put your success handler here
 function(e) {
 //put your error handler here

hope it helps.

Another good thing Navigation …..

We can show some HTML page here as well, we can pass parameters and accept some return value too using same above method.


Passing values to HTML page and accepting values in MSD 365 js which are passed from HTML page

function RestrictedCommand() {

    var pageInput = { //pass values to page 

        pageType: "webresource",
        webresourceName: "soft_modelpopup_restrict",
        data: "Incident"


    var navigationOptions = {

        target: 2,
        width: 500, // value specified in pixel
        height: 250, // value specified in pixel
        position: 1


    Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(

        function success(returnValue) { //returnValue will return value from HTML page 

            switch (returnValue.returnValue) {

                case "883990000":                
                    var ResValue = parseInt(returnValue.returnValue);
                    //your logic 

                case "0":

                    //your logic

                case "Cancel":


        function error() {
            // Handle errors


Design your HTML page and pass values like below

    <title>Restriction reason</title>
<body onload="PoppupOnload()">

        p {
            font-family: Calibri;
            font-size: 15px;

        label {
            font-family: Calibri;
            font-size: 15px;

        .select {
            font-family: Calibri;

        .button {
            background-color: #0047b3;
            border: none;
            color: white;
            padding: 12px 29px;
            text-align: center;
            font-family: Calibri;
            text-decoration: none;
            display: inline-block;
            font-size: 15px;
            margin: 4px 2px;
            cursor: pointer;
            float: right;

    <script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
        function SubmitClick() {

            var e = document.getElementById("soft_reason");
            var result = e.options[e.selectedIndex].value;

            if (result == "0") {
                openAlert("Please select correct reason or click on 'Cancel' button to cancel the action.");

            } else {
                window.returnValue = result;

        function CancelClick() {
            window.returnValue = "Cancel";

        function PoppupOnload() {
            var queryString =;
            switch (queryString.split("=")[1]) {

                case "Incident":
                    document.getElementById("PersonMessage").style.display = "none";
                case "Contact":
                    document.getElementById("IncidentMessage").style.display = "none";

                default: window.close();


        function openAlert(errormessage) {

            var alertStrings = { confirmButtonLabel: "OK", text: errormessage };

            var alertOptions = { height: 175, width: 350 };

            Xrm.Navigation.openAlertDialog(alertStrings, alertOptions).then(

                function success(result) {


                function (error) {



    <p id="IncidentMessage">Please note that by restricting the Case record any child records like Goal, Action taken, General Assessment etc. will also be restricted. If you would like to continue then please provide the reason for restriction below:</p>
    <p id="PersonMessage">Please note that by restricting the Person record any open Case record associated to the Person will also be restricted. If you would like to continue then please provide the reason for restriction below:</p>

    <label for="dhhs_restrictionreason">Restriction reason:</label>
    <select class="select" name="dhhs_restrictionreason" id="dhhs_restrictionreason">
        <option value="0">--Select--</option>
        <!--<option value="883990000">Person known to staff</option>-->
        <option value="883990001">Sensitive case</option>
        <option value="883990002">High profile incident</option>
        <option value="883990003">Client request</option>
    <input type="submit" class="button" value="Cancel" onclick="CancelClick()">
    <input type="submit" class="button" value="Restrict" onclick="SubmitClick()">


it will look like this …

Hope it helps


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s