Today we are going to talk about how to retrieve matching records from Dynamics 365 virtual entities by XMLHTTP request using JavaScript. The XMLHTTP request object can be used to request data from a server. This request is useful in
Update a web page without reloading the page
Request data from a server - after the page has loaded
Receive data from a server - after the page has loaded
Send data to a server - in the background
To design the XMLHttpRequest object I have used the CRM REST Builder v2.6.0.0 tool. This utility generates multiple types of requests. The developer would needs to Install the managed solution file in Dynamics 365 environments and then navigate to the Solutions or Customizations areas and use the CRM REST Builder button at the top of the page.
Steps to generate a query.
Select the endpoint you want to create code for
Select the appropriate action or request type you would like to build.
Select the output format XMLHTTP
Choose if the request is performed Asynchronously or Synchronously.
Complete the remaining parameters based on the specific type of request.
Use the Create Request button to generate the code.
The generated query needs a small change like to add filter criteria as below
var req = new XMLHttpRequest();
req.open("GET", window.parent.Xrm.Page.context.getClientUrl() + "/api/data/v9.1/mserp_**********ntities?$filter=mserp_contractid eq '"+leaseId+"'&$count=true", true); 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 result = JSON.parse(this.response);
var mserp_contractid = result["mserp_contractid"];
} else {
Xrm.Utility.alertDialog(this.statusText);
}
}
};
req.send();Create a Dynamics 365 Web Resource
In Dynamics 365 all client-side customization is achieved via web resources. Add the new HTML web resource in Dynamics 365 environments and place the complete code.
<html><head>
<title>Lease Lines</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
</style>
<script language="javascript" type="text/javascript">
function ********()
{
var ****Id=window.parent.Xrm.Page.getAttribute('****name').getValue();
var table='';
var req = new XMLHttpRequest();
req.open("GET", window.parent.Xrm.Page.context.getClientUrl() + "/api/data/v9.1/mserp_*******entities?$filter=mserp_****id eq '"+l****Id+"'&$count=true", true);
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);
var recordCount = results["@odata.count"];
// Generate HTML Table Header
table+='<tr>';
table+= '<td>'+ '****id'+'</td>';
table+= '<td>'+ '****'+'</td>';
table+= '<>'+ '****'+'</td>';
table+= '<td>'+ '****Type'+'</td>';
table+= '<td>'+ '****date'+'</td>';
table+= '<td>'+ '****date'+'</td>';
table+= '<td>'+ '****Rent'+'</td>';
table+= '<td>'+ '****Rent '+'</td>';
table+= '<td>'+ '****Rent'+'</td>';
table+= '<td>'+ '****Amount'+'</td>';
table+= '<td>'+ '****frequency'+'</td>';
table+= '<td>'+ '****'+'</td>';
table+= '<td>'+ 'Details'+'</td>';
table+='</tr>';
for (var i = 0; i < results.value.length; i++) {
//Generate Table rows
var mserp_flxcontractleasedataentityid = results.value[i]["mserp_flxcontractleasedataentityid"];
table+='<tr>';
table+='<td>' + results.value[i]["****"] + '</td>';
table+='<td>' + results.value[i]["****"] + '</td>';
table+='<td>' + results.value[i]["****"] + '</td>';
table+='<td>' + results.value[i]["****"] + '</td>';
table+='<td>' + results.value[i]["****"] + '</td>';
table+='<td>' + results.value[i]["****"] + '</td>';
table+='<td>' + results.value[i]["****"] + '</td>';
table+='<td>' + results.value[i]["****"] + '</td>';
table+='<td>' + results.value[i]["****"] + '</td>';
table+='<td>' + results.value[i]["****"] + '</td>';
table+='<td>' + results.value[i]["****"] + '</td>';
table+='<td>' + results.value[i]["****"] + '</td>';
// Add a button to open a pop window on click
table+='<td>' + '<input type="button" value="Details" id="btn" onclick=OpenLeaseLineForms("'+mserp_****id+'")>' + '</td>';
table+='</tr>';
}
document.write('<table style="font-size: small;font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;width: 100%;">' + table + '</table>');
} else {
Xrm.Utility.alertDialog(this.statusText);
}
}
};
req.send();
}
function OpenLeaseLineForms(recordId)
{
// Open the form.
window.parent.Xrm.Utility.openEntityForm("mserp_*",recordId,null,true);
}
</script>
<meta></head>
<body style="overflow-wrap: break-word;" onload="LoadleaseLines()" onfocusout="parent.set**();">
</body></html>
The final outcome will look like
Happy learning..