XRM.Navigation.navigateTo a html web resource
Introduction
The post describes an example of navigating to a html web resource. Specifically, navigating to a html web resource to allow the user to enter credit card details
(The Power Apps client API Xrm.Navigation.navigateTo navigates to either a table list, table record, html web resource or a custom page.)
Walkthrough of the example
Details of the Xrm.Navigation.navigateTo call
a.) Firstly, the user presses the ‘Tokenisation’ button (Figure 1)
![The ‘Tokenisation’ button is pressed](https://dustinminer.com/wp-content/uploads/2022/08/1-1.png)
b.) Pressing this button calls a JavaScript file called Invoice.js. (Figure 2 shows a snippet from this file)
![The JavaScript code which is executed when the ‘Tokenisation’ button is pressed](https://dustinminer.com/wp-content/uploads/2022/08/2-2.png)
A few things to note about the code displayed in Figure 2:
- The web resource (Tokenisation.html) is registered within Dynamics 365 (Figure 7)
- The data parameter allows data to be passed 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 (Figure 3)
- target: 1 means that the html is launched inline (Figure 5)
- target: 2 means that the html is launched as a dialog (Figure 6)
- position: 1 means that the dialog is centered in the middle of the page (Figure 5)
- position: 2 means that the dialog is aligned on the right of the screen (Figure 6)
c.) Xrm.Navigation.navigateTo (Figure 2) executes with following query string (underlined in green) loaded along with Tokenisation.html
![](https://dustinminer.com/wp-content/uploads/2024/07/3-12.png)
d.) Tokenisation.html loads and renders as shown in Figure 4 (well, without the credit card details). Note:
- Bootstrap formats the UI. (FluentUI would probably have been a better choice since it’s used natively by the Power Platform)
- Font Awesome generates the spinner and JQuery for the scripting
![](https://dustinminer.com/wp-content/uploads/2022/08/4-1.png)
Altering some settings in the Xrm.Navigation.navigateTo call
e.) Figure 5 is an example of the settings being target: 1 & position: 1 in the Xrm.Navigate.navigateTo call. Figure 6 is an example of the settings being target: 2 & position: 2
![](https://dustinminer.com/wp-content/uploads/2022/08/5-1.png)
![](https://dustinminer.com/wp-content/uploads/2022/08/6-1.png)
Appendix
The developer specifies the ‘Display Name’ for the html web resource here (Figure 7)
![](https://dustinminer.com/wp-content/uploads/2022/08/7-2.png)
A code snippet from Tokenisation.html
Figure 8 represents the JQuery based Tokenisation.html. The function generateToken() on line 125 retrieves the data entered in the ‘Card Tokenisation’ dialog (Figure 4). It also extracts the contact id (that it, the query string parameter presented in Figure 3 (i.e. ?data=customerid%3d%7b66C762A0-E3D5…) )
Just as an FYI, another aspect of the function generateToken() which hasn’t been discussed in this post is the Azure function (line 134). Although the code for the Azure function isn’t shown, the function
- Connects to Dynamics 365 / Dataverse to retrieve the merchant details stored in a Dataverse record.
- Makes a httpClient request to the merchant (the request containing the entered credit card details) to generate a payment token
- Then, makes a httpClient request to a Power Automate flow to create a ‘Tokenisation Log’ record in Dataverse
![](https://dustinminer.com/wp-content/uploads/2022/08/8-1.png)
Further reading
Pass data to a Dynamics 365 html web resource