This post discusses five methods for a Dynamics 365 form (in a model-driven app) to interact with an 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 an 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.
First of all, clicking on the ‘Pay Now’ button in the form designer will display the dialog shown in Figure 2
Then, clicking on the web resource (cpl_/Pages/PayNowButton.html) will display the dialog shown in 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)
The following code snippet is from PayNowButton.html. The function GetUrlParameter() retrieves the invoice entity GUID from the URL (Figure 4)
<script>
$(document).ready(function () {
$("#payNow").click(payNow);
});
function payNow() {
console.info("the guid value = " + GetUrlParameter('id'));
var invoiceId = "{" + GetUrlParameter('id').toUpperCase() + "}";
}
function GetUrlParameter(sParam) {
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++) {
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam) {
return sParameterName[1];
}
}
}
</script>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 from the parent (Dynamics 365) form. In the example above, the invoiceId could have been determined by calling 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 5) that exists on a Dynamics 365 form. An attribute containing 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…’
The implementation is as follows
In the form designer, the attribute ‘cpl_whythisdecision’ (#1 in Figure 6) is a hidden attribute. Its only purpose is to store the data that will be displayed by the web resource (#2 in Figure 6)
The text ‘cpl_whythisdecision’ is then passed to the web resource (Figure 7). The web resource recognises this attribute as the source from which it needs to retrieve the data. (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. For example, when it performs a parent.Xrm.Page.getAttribute(‘cpl_whythisdecision’).getValue())
Example 2
Consider the case where help text needs to be presented on a form. The web resource could be a HTML file that 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 an HTML web resource and is given the name WebResource_primaryaddress.
Although not shown here, the control calls the Kleber cloud service to validate the address being entered. Once validated, it stores the result in a hidden text attribute (i.e. cpl_primaryaddress) on the form.
Referring to Figure 8 below, the green box represents this control as an embedded web resource on a form. This example will demonstrate how two parameters can be passed into it during the form’s onload event.
Figure 9 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)
When the form is loaded, the following onload JavaScript function (shown below) is called. The JavaScript gets the content window of WebResource_primaryaddress and then passes two 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 two 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’ and ‘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