• Girijesh Dixit

How to retrieve matching records from Virtual Entity by XMLHTTP request using JavaScript

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..

34 views0 comments

Recent Posts

See All