Using the New Modal Dialog to Open Forms in Dynamics 365 using Xrm.Navigation.navigateTo

5 Comments

Dynamics 365 Release Wave 1 for 2020 has some cool features. One of those is being able to open forms as a Modal Dialog. This is pretty awesome, as I had a client looking for this feature recently. Let’s look at how to use this.

If you prefer video, check out how to do this on Power Platform TV, my YouTube show:

We will access these modal forms through JavaScript. In this example, we will select an account record and open the Contact form as a modal.

So we’ll start on an Account record:

The command is:

Xrm.Navigation.navigateTo(pageInput,navigationOptions).then(successCallback,errorCallback);

We will pass through the following command to our browser developer console (you can call this from anywhere you need to):

Xrm.Navigation.navigateTo({pageType:”entityrecord”, entityName:”contact”, formType:2}, {target: 2, position: 1, width: {value: 50, unit:”%”}});

We see the modal Contact form opens over the Account form:

If we click outside the Contact form (on the Account form), we are unable to get focus back to the Account form. The idea here is that the user can be on a Dynamics 365 page, and then view or work on another record, and be able to get back to the original record easily.

Close, Minimize, Maximize

The user needs to click on the X close button or Save and Close.

Also note the option to pop this out to Full Screen Mode:

Which takes up the whole browser window:

We can click to get back to the original modal size:

Let’s look at the options available when opening modals. We are passing objects with the attributes:

Page Input = {pageType:”entityrecord”, entityName:”contact”, formType:2}

Navigation Options = {target: 2, position: 1, width: {value: 50, unit:”%”}}

Size

Let’s open a form to 95%. Note we can pass the width unit as % or px, and then the unit.

We see the 3 columns on the form can be displayed as a result:

Xrm.Navigation.navigateTo({pageType:”entityrecord”, entityName:”contact”, formType:2}, {target: 2, position: 1, width: {value: 95, unit:”%”}});

Position

We can also pass in the Navigation Options position = 2, we the form now opens to the side (1 = center):

Xrm.Navigation.navigateTo({pageType:”entityrecord”, entityName:”contact”, formType:2}, {target: 2, position: 2, width: {value: 500, unit:”px”}});

This is similar to a quick create form, though we’re seeing all the tabs available for selection.

We could enlarge this side view by making the size bigger:

Xrm.Navigation.navigateTo({pageType:”entityrecord”, entityName:”contact”, formType:2}, {target: 2, position: 2, width: {value: 60, unit:”%”}});

Existing Record

To open an existing record, we can do the following, passing the Id of the record to open:

Xrm.Navigation.navigateTo({pageType:”entityrecord”, entityName:”account”, formType:2, entityId:”71f0728d-c25f-ea11-a811-000d3a3be299″}, {target: 2, position: 1, width: {value: 50, unit:”%”}});

Or on the side:

Xrm.Navigation.navigateTo({pageType:”entityrecord”, entityName:”account”, formType:2, entityId:”71f0728d-c25f-ea11-a811-000d3a3be299″}, {target: 2, position: 2, width: {value: 50, unit:”%”}});

Entity List

navigateTo can also be used with with entity lists. For the pageType, passing entiylist will open the list:

Xrm.Navigation.navigateTo({pageType:”entitylist”, entityName:”account”}, {target: 2, position: 1, width: {value: 50, unit:”%”}});

And we can pass the Id of a view to open it:

Xrm.Navigation.navigateTo({pageType:”entitylist”, entityName:”account”, viewId:”61273827-328e-e011-95ae-00155d9cfa02″}, {target: 2, position: 1, width: {value: 50, unit:”%”}});

Web Resources

We can also open web resources. For example, if we have a web resource below:

With the name new_TestWebResource.html:

We can open it like below:

Xrm.Navigation.navigateTo({pageType:”webresource”, webresourceName:”new_TestWebResource.html”}, {target: 2, position: 1, width: {value: 50, unit:”%”}});

And on the side:

Xrm.Navigation.navigateTo({pageType:”webresource”, webresourceName:”new_TestWebResource.html”}, {target: 2, position: 2, width: {value: 50, unit:”%”}});

It looks like Microsoft *could* add more parameters and therefore functionality to this capability, which would be interesting. Andrew Butenko has a good post on some of the limitations with using this for web resources, and Antti Pajunen has a good post on using these Main Form Dialogs (MFDs).

 

ABOUT CARL DE SOUZA

Carl de Souza is a developer and architect focusing on Microsoft Dynamics 365, Power BI, Azure, and AI.

carldesouza.comLinkedIn Twitter | YouTube

 

5 Responses to Using the New Modal Dialog to Open Forms in Dynamics 365 using Xrm.Navigation.navigateTo

  1. Great information Carl.

    I’m relatively new to this world and tried this out. While debugging my code seems to skip over the navigationOptions modal settings and takes me straight to the account page. Everything else seems to work. Is there something I’m missing?

    function onFormLoad(executionContext) {
    var formContext = executionContext.getFormContext();
    var lookupControl = formContext.getControl(“cr247_relatedaccount”);
    lookupControl.addOnLookupTagClick(onLookupClick);
    }

    function onLookupClick(executionContext) {
    debugger;
    executionContext.getEventArgs().preventDefault();
    var recordReference = executionContext.getEventArgs().getTagValue();

    var pageInput = {
    pageType: “entityrecord”,
    entityName: recordReference.entityType,
    formType: 2,
    entityId: recordReference.id

    };

    var navigationOptions = {
    target: 2,
    position: 2,
    width: {
    value: 80,
    unit: “%”
    }
    };

    Xrm.Navigation.navigateTo(pageInput, navigationOptions);
    }

  2. Hi Carl,

    This is very helpful post. However, I want some custom name in dialog title but seems like there is no option to change this. Do you have any idea about this?

Leave a Reply

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