Posted in Dynamics 365 CE, JavaScript

Pass data to a Dynamics 365 html web resource

This post discusses 5 methods for a Dynamics 365 form (in a model-driven app) to interact with a html web resource embedded within that form

1.) Pass record object-type code and unique identifier as parameters

Consider the ‘Pay Now’ button below (Figure 1). It’s defined as a html web resource and has been added to a Dynamics 365 (invoice entity) form. The invoice entity Guid needs to be passed to this button.

Figure 1

First of all, clicking on the ‘Pay Now’ button in the form designer will display the dialog in Figure 2

Figure 2

Then, clicking on the web resource (cpl_/Pages/PayNowButton.html) will display the dialog in Figure 3

Figure 3

Still referring to Figure 3, clicking on ‘Pass record object-type code and unique identifier as parameters’ allows the entity’s Guid (in this case the invoice entity Guid) to be passed to the web resource (Figure 4)

Figure 4

The function GetUrlParameter() (Figure 5) retrieves the invoice entity Guid from the URL (Figure 4)

Figure 5 – PayNowButton.html

https://docs.microsoft.com/en-us/dynamics365/customerengagement/on-premises/developer/use-iframe-and-web-resource-controls-on-a-form

2.) parent.Xrm.Page

The Xrm object is deprecated in html web resources, however, parent.Xrm.Page is still available in the html web resource if it’s loaded in a form container. This means that the web resource (cpl_/Pages/PayNowButton.html) can use it to retrieve attributes on the parent (Dynamics 365) form. In the example above, the invoiceId could have been determined by call the client API:

parent.Xrm.Page.data.entity.getId();

https://docs.microsoft.com/en-us/power-platform/important-changes-coming

3.) Pass ‘record’ by Custom Parameter(data)

Example 1

Consider the following html web resource (Figure 6) which exists on a Dynamics 365 form. An attribute that contains the data to display will be passed to the web resource via the property ‘Custom Parameter(data)’. This will replace the placeholder text ‘We made this decision because…’

Figure 6

The implementation is as follows

In the form designer, the attribute ‘cpl_whythisdecision’ (#1 in Figure 7) is a hidden attribute. It’s only purpose is to store the data that will be displayed by the web resource (#2 in Figure 7)

Figure 7

The text ‘cpl_whythisdecision’ is then passed to the web resource (Figure 8). The web resource then knows it’s this attribute which it needs to retrieve the data from. (Note: if the attribute ‘cpl_whythisdecision’ had just been populated on the form, the user would need to either click elsewhere on the form or save the form for the value to available when the web resource retrieves it. E.g. when it performs a parent.Xrm.Page.getAttribute(‘cpl_whythisdecision’).getValue())

Figure 8

Example 2

Consider the case where help text needs to be presented on a form. The web resource could be a HTML file which lists all the possible HTML that could be placed on the form. Referring to the code below, if ‘expensesheader’ or “helptext” is placed in Custom Parameter(data), the corresponding HTML would be added to the form

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>Help</title>
    <script type="text/javascript" src="ptm_am_jquery.1.10.2.min.js"></script>
        document.onreadystatechange = function () {
            if (document.readyState == "complete") {
                getDataParam();
            }
        }
        function getDataParam() {
            if (location.search != "") {
                var paramVal = location.search.split('=')[1];
                if (paramVal == null) return;

                if (paramVal.toLowerCase() == "expensesheader") {
                    $('#pnl').append("<div class='alert alert-info' role='alert'><strong>Section:</strong> Expenses</div>");
                    return;
                }                
                if (paramVal.toLowerCase() == "helptext") {
                    $('#pnl').append("<div class='alert alert-info' role='alert'><strong>The ability to upload or store attachments is temporarily unavailable.</strong></div>");
                    return;
                }
            }
        }
    </script>
    <meta>
</head>
<body style="height: 100%; overflow-wrap: break-word;" dir="LTR" lang="undefined">
    <div id="pnl"></div>

</body>
</html>

4.) Content Window

Consider a custom control called addresscontrol.html. This control is uploaded to Dynamics 365 as a html web resource and given the name WebResource_primaryaddress.

Although not shown here, the control calls the Kleber cloud service to validate the address being entered. Once found, it stores the result in a hidden text attribute on the form (i.e. cpl_primaryaddress).

Referring to Figure 9 below, the green box represents this control as an embedded web resource on a form. This example will show how 2 parameters can be passed into it on the form’s onload event.

Figure 9

Figure 10 shows what the form looks like in the form designer (note: only ‘WebResource_primaryaddress’ is displayed at runtime. The text attribute ‘cpl_primaryaddress’ is hidden)

Figure 10

When the form is loaded, the following onload JavaScript function (shown below) is called. The JavaScript gets the content window of WebResource_primaryaddress. It then passes 2 parameters to this web resource via its function initAddressControl().

var Contoso = window.Contoso || {};
Contoso.Address = Contoso.Address || {

    onload: function (executionContext) {
        var formContext = executionContext.getFormContext();
        var wrPrimaryAddressCtrl = formContext.getControl("WebResource_primaryaddress");
        if (wrPrimaryAddressCtrl !== null && wrPPrimaryAddressCtrl  !== undefined) {
            wrPrimaryAddressCtrl.getContentWindow().then(
		function (contentWindow) {
                    contentWindow.initAddressControl("Primary Address", "cpl_primaryaddress");
	        }                                                    
	    )
        }
    }

The addresscontrol.html (i.e. WebResource_primaryaddress) shown below, contains the function initAddressControl() which accepts the 2 parameters sent to it and formats the control based on these parameters

<html><head>
...
    <script>
        function initAddressControl(controlLabelText, addressControlName) {
           $("#ctlLabelText").text(controlLabelText);
	   if (parent.Xrm.Page.getAttribute(addressControlName).getValue() != null)
	      $('#addline1').val(parent.Xrm.Page.getAttribute(addressControlName).getValue());
	   else
	      $('#addline1').val("---");
     	   }

Note: When creating your own “initAddressControl()”, it’s probably best to extend it to accept two additional parameters ‘Xrm’ & ‘formContext. That way, they could be assigned to global variables in initAddressControl() and be available anywhere within addresscontrol.html

5.) Xrm.Navigation.NavigateTo

An example of this is described in the post XRM.Navigation.navigateto a html web resource

References

https://learn.microsoft.com/en-us/power-apps/developer/model-driven-apps/web-resources

Post Views: 1,348

Dustin

Please refer to About section