Passing data to a Dynamics 365 web resource
Dustin Miner
- posted on
- Comments Off on Passing data to a Dynamics 365 web resource
This post discusses 5 methods for a Dynamics 365 form to interact with a web resource embedded within that form.
1.) Pass record object-type…
Consider the ‘Pay Now’ button below. It’s defined as a web resource and has been added to a Dynamics 365 (invoice entity) form. The invoice entity GUID needs to be passed to this button.
Clicking on the button in the form designer results in the following dialog being displayed.
Clicking on the web resource (cpl_/Pages/PayNowButton.html) then results in the following screen being displayed.
Referring to the screenshot above, clicking on ‘Pass record object-type code and unique identifier as parameters’ allows parameters such as the entity’s GUID (in this case the invoice entity GUID) to be passed to the web resource.
This technique is being used to set the invoiceId in the code below (PayNowButton.html).
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 web resource which exists on a Dynamics 365 form. There will be data that replaces the text ‘We Made this decision because…’ . The attribute that contains the data to display will be passed to the web resource via the property ‘Custom Parameter(data)’
The implementation is as follows
In the form designer, #1 (shown in green below) represents the field ‘cpl_whythisdecision’. This is hidden and it’s only purpose is to store the data that will be displayed by the web resource. #2 represents the web resource.
The text ‘cpl_whythisdecision’ is then passed to the web resource. 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()
Example 2
Consider the case were 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 will 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 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 attribute on the form (i.e. cpl_primaryaddress).
Referring to the screenshot 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 load event.
The screenshot below shows what the form looks like in the form designer (note: only ‘WebResource_primaryaddress’ is displayed at runtime. The text control ‘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. 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
https://dustinminer.com/2020/11/22/xrm-navigation-navigateto-launching-a-html-web-resource/
