Open webresources Modal or Inline using Xrm.Naviagtion.naviagteTo in Dynamics 365 Unified interface

Release wave 2 have released some wonderful features and one of them is the capability to open a webresource as modal or inline. I bet this is going to ease the life of lot of consultants who were traditionally using Xrm.Navigation.openWebResource or Xrm.Utility.openWebResource (deprecated) to open webresource and hear about the perennial client complaint of why it is not modal.

Introducing to you, the newest star on the rise – Xrm.Navigation.navigateTo

So let’s see how we can open the webresource as modal. Detailed documentation can be found here – https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/reference/xrm-navigation/navigateto

Sample code below.

var qs = "param1=1&param2=2";
var pageInput = {
    pageType: "webresource",
    webresourceName: "trng_/pages/newapitest.html",
    data: encodeURIComponent(qs)
};
var navigationOptions = {
    target: 2, // 2 is for opening the page as a dialog.
    width: 400, // default is px. can be specified in % as well.
    height: 300, // default is px. can be specified in % as well.
    position: 1 // Specify 1 to open the dialog in center; 2 to open the dialog on the side. Default is 1 (center).
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
    function success() {
        debugger;
    },
    function error(e) {
        // Handle errors
    }
);

And there you go. I have opened up the same webresource on click of a ribbon button. Honestly have waited long for this one. Certainly a smile on customer’s face.

Well you can even resize it to occupy full screen using the resize option as highlighted inside Orange rectangle. Also you can pass custom parameters as data like I did in my code.

So far so good but as a consultant don’t get carried away by this new feature as you may need to update your customer upfront on some important aspects.

• Users need to close the dialog using the “X” button available on the dialog. There is no API available as of the time of writing this blog where we can close the dialog using a custom button. The user have the use the default close dialog option only.
• No data is passed to the callback method. So don’t expect some data from the dialog being passed to the successcallback method

Even better if you want to open your webresource on the side pane, just like Quick create form opens, all you need to do is change “position” value of navigationOptions parameter to 2. And below is how it looks.

And finally don’t forget to include a reference to clientglobalcontext.js.aspx  if you want to get hold of the Xrm namespace methods inside it, just like the old ways.

Hope this helps!

Debajit Dutta

(Dynamics MVP)

For consultation/ corporate training visit www.xrmforyou.com or reach out to us at info@xrmforyou.com

Our product offerings:

Role based views for Dynamics 365 (http://www.xrmforyou.com/role-based-views.html)

CRM-Sharepoint Attachment uploader and metadata manager (http://www.xrmforyou.com/sharepoint-integrator.html)

Record Cloner for Dynamics 365 (http://www.xrmforyou.com/record-cloner.html)