Introduction

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.

The following steps will describe how a html dialog is launched in order to enter credit card details (It follows the same example as Debugging JavaScript in Chrome DevTools). Although not described in this post, the credit card details are then sent to an Azure function and a token returned which represents that particular credit card.

Walkthrough of the example

Firstly, the ‘Tokenisation’ button is pressed.

This button calls a JavaScript function which executes the line:

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