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

25 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).

 

THANKS FOR READING. BEFORE YOU LEAVE, I NEED YOUR HELP.
 

I AM SPENDING MORE TIME THESE DAYS CREATING YOUTUBE VIDEOS TO HELP PEOPLE LEARN THE MICROSOFT POWER PLATFORM.

IF YOU WOULD LIKE TO SEE HOW I BUILD APPS, OR FIND SOMETHING USEFUL READING MY BLOG, I WOULD REALLY APPRECIATE YOU SUBSCRIBING TO MY YOUTUBE CHANNEL.

THANK YOU, AND LET'S KEEP LEARNING TOGETHER.

CARL

https://www.youtube.com/carldesouza

 

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

 

25 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);
    }

    • Hey Eric,

      I tried your code, swapping out your field for the primaryaccountid on the account form. It’s working for me, and I think you’re doing everything right. Can you add a success and error callback to the function to see if some error is being thrown?

    • Hey Carl,
      I wanna know, how we get the success result when we press on custom created the “OK” button on Web resource so that from that web resource we get data or return data to use in DCRM for further use.
      I have tried many options but doesn’t work for me. please guide us.

    • I have this issue now. I’m in the Government Cloud.

      The answer is that WAVE 1 has not hit the Government Cloud yet, so the default functionality is to open the form full screen. However, the code doesn’t break, so when WAVE 1 hits the GCC, it should just work.

      If you’re in the commercial cloud, it could be because either WAVE 1 hasn’t hit your instance yet, or you need to accept it.

    • Hey Casper, there is an optional parameter for formid though I haven’t tried using it. Let me know if it works for you. Cheers, Carl

  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?

    • Hi Naveen, I think it’s a limitation unfortunately. Maybe they will open it up as a property in the future. Let me know if you find a way!

  3. Hi Carl,
    This is pretty nice feature. Just want to know is it possible to return some value from modal form to parent CRM form. If so then how can I return some value to parent form.

  4. Hey Carl,

    This is great and just *might* resolve my issue. I have a subgrid of an entity, with a Quick Create form. When I EDIT the record from the subgrid, I want a dialog to launch, effectively mimicking the quick create. Do you know how to tie your javascript code into the doubleclick of the subgrid?

  5. Hi Carl,
    I am new to Dynamics CRM. I am trying to popup custom form but its always coming up the main form not the custom form. Here is my javascript.:

    function loadForm() {
    var entityFormOptions = {};
    entityFormOptions[“entityName”] = “incident”;
    entityFormOptions[“openInNewWindow”] = true;
    entityFormOptions[“formId”] = “22F2673F-8C14-4183-BABA-11168A87151E”;
    var formParameters = {};
    formParameters[“windowPosition”] = 1;
    formParameters[“height”] = 400;
    formParameters[“height”] = 400;

    //entityFormOptions[“useQuickCreateForm”] = true;
    Xrm.Navigation.openForm(entityFormOptions, formParameters).then(
    function (lookup) { console.log(“Success”); },
    function (error) { console.log(“Error”); }
    );

    }

    Any help would be appreciated.

    Regards
    Rupesh

  6. Hi Carl,

    I have opened Webresource as a modal dialog.
    Is there any way to read multiple fields from parent CRM form?
    I need to pass values of some fields from modal to parent form as well.

    Thanks

  7. Hi Carl,

    Thank you for this post, but I would like to ask
    even though I enabled wave1 but still it is not working for me.
    Thank you.

  8. Hi Carl,

    I am new to Dynamics 365. Is it possible to call the open existin record on lookup record select?
    If possible can you please explain how to call the script?

    Than you!
    Shvia

Leave a Reply

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