Side Pane in D365/ Side Pane in Entity Form In D365
Side Pane in D365
In Account Entity Form we are showing the Account Related Contact in Side Pane using HTML Page.
We need to call JavaScript Function(APY.Account.LoadPromotions) on Different Event Like OnLoad, OnChange, OnSave Or Ribbion Button Click.
In this Blog I have registered the Event on OnLoad of Form with APY.Account.LoadPromotions
- Create a Java script Webresource with below Code :
//Build test script comment
var APY = APY || { namespace: true };
APY.Account = APY.Account || { namespace: true };
APY.Account.LoadPromotions = function (executionContext) {
"use strict";
try {
var formContext = executionContext.getFormContext();
var qs = "accountid=" + formContext.data.entity.getId().replace('{', '').replace('}', '');
Xrm.App.sidePanes.createPane({
title: "Contacts",
paneId: "ContactList",
canClose: true
}).then((pane) => {
pane.navigate({
pageType: "webresource",
webresourceName: "apy_/webpages/sidepannel.html",
data: encodeURIComponent(qs)
});
});
}
catch (e) {
APY.Common.ShowAlertDialog("Ok", e.message + "An error occured. Please contact your System Administrator", "Error Dialog");
}
};
- Create A HTML Web Resource with below Code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<script>
var Xrm = null;
function loadContacts() {
debugger;
Xrm = parent.Xrm;
//get the current organization name
var serverURL = Xrm.Page.context.getClientUrl();
//var qs = decodeURIComponent(getParameterByName('data'));
//var id = qs.substring(qs.indexOf("=") + 1);
var id = Xrm.Page.data.entity.getId();
var fetchXml = "<fetch mapping='logical' output-format='xml-platform' version='1.0' distinct='false'>" +
" <entity name='contact'>" +
" <attribute name='fullname' />" +
" <attribute name='firstname' />" +
" <attribute name='lastname' />" +
" <order descending='false' attribute='fullname' />" +
" <filter type='and'>" +
" <condition value='" + id + "' attribute='parentcustomerid' uitype='account' uiname='Test' operator='eq' />" +
" </filter>" +
" </entity>" +
"</fetch>";
var encodedFetchXML = encodeURIComponent(fetchXml);
var req = new XMLHttpRequest();
req.open("GET", Xrm.Page.context.getClientUrl() + "/api/data/v9.1/contacts?fetchXml=" + encodedFetchXML, false);
req.setRequestHeader("OData-MaxVersion", "4.0");
req.setRequestHeader("OData-Version", "4.0");
req.setRequestHeader("Accept", "application/json");
req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
req.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");
req.onreadystatechange = function () {
if (this.readyState === 4) {
req.onreadystatechange = null;
if (this.status === 200) {
var results = JSON.parse(this.response).value;
debugger;
if (results.length > 0) {
for (let i = 0; i < results.length; i++) {
var html = "<tr><td><p onclick='productClicked(" + results[i].firstname + ");' style='cursor: pointer;text-decoration: underline;color: blue;'>" + results[i].lastname + "</p></td><td>" + results[i].fullname + "</td></tr>";
$("#contactsLists").append(html);
}
} else {
Xrm.Utility.alertDialog(this.statusText);
}
}
}
};
req.send();
};
function productClicked(ProductNumber) {
console.log(ProductNumber);
};
</script>
<meta charset="utf-8">
<meta>
<meta>
<meta>
<meta>
<meta>
</head>
<body onload="loadContacts()" onfocusout="parent.setEmailRange();" style="overflow-wrap: break-word;">
<table>
<thead>
<tr>
<th>Contact</th>
<th>Information</th>
</tr>
<tr>
</tr>
</thead>
<tbody id="contactsLists">
</tbody>
<tbody>
</tbody>
</table>
</body>
</html>
- We can show the Contact View by using Side Pane
- We can show Contact record by Using Side Pane
- We can show Dashboard in Side Pane:
- We can show the web resource Page with Side Pane
- Based on our requirement we can show different pages in Side Pane.
Comments
Post a Comment