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

(Note: 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)

b.) Pressing this button calls a JavaScript file called Invoice.js. (Figure 2 shows a snippet from this file)

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

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

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

Appendix

The developer specifies the ‘Display Name’ for the html web resource here (Figure 7)

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

Further reading

Pass data to a Dynamics 365 html web resource

https://learn.microsoft.com/en-us/power-apps/developer/model-driven-apps/clientapi/reference/xrm-navigation/openwebresource

References

https://learn.microsoft.com/en-us/power-apps/developer/model-driven-apps/clientapi/reference/xrm-navigation/navigateto