XRM.Navigation.navigateTo() launching a html web resource
In the Model-driven apps client API reference, there is an API called Xrm.Navigation.navigateTo(). It’s commonly used to display forms, however, it can also be used to display a html web resource. This post will describe a specific example of that.
Walkthrough of the example
Firstly, the ‘Tokenisation’ button is pressed.
A few things to note:
- The web resource (Tokenisation.html) is registered within Dynamics 365
- The data parameter allows data to be sent to the web resource. In this case, the data parameter is a Customer field data type. (This can link to either an Account or a Contact entity.) It’s sent as a query string within the URL.
- target:2 means that the html will be launched as a dialog. target:1 would result in the html being launched inline
- position:1 means that the dialog will be centered in the middle of the page.
- position:2 means that the html will be aligned on the right of the screen
When Xrm.Navigation.navigateTo() is executed, the following query string (highlighted by the green box) is loaded with Tokenisation.html
Once loaded, Tokenisation.html renders as shown in the screenshot below (well, without the credit card details). Note: Bootstrap was used to format the UI (although FluentUI (or a custom page) would probably have been a better choice since it’s used natively by the Power Platform). Font Awesome for the spinner and JQuery for scripting.
The following two screenshots are examples of what happens when ‘target’ & ‘position’ are changed in the Xrm.Navigate.navigateTo() call.
When target: 1, the following is produced
When position: 2, the following is produced
Note that the dialog has a title of ‘Card Tokenisation’. The screenshot below shows where this name was defined.
Referring to the following JQuery code in Tokenisation.html, the query string parameter (i.e. ?data=customerid%3d%7b66C762A0-E3D5…) is now available to be parsed in order to extract the contact id. GetUrlParameter() performs this function (line 158).