CRM 9 - Bind HTML Table/Grid dynamically based on records from JS

Question

I am working on a HTML Page inside Dynamics CRM 9.0. I have written a Webresource JavaScript which I have called through the HTML page. There is a function in my JavaScript that fetches data from the CRM entity like below,

var Query = "$select=ParameterValue,transactioncode,ParameterName&$filter= PhonceCallId/Id eq(guid'" + phoneid + "')";
 XrmSvcToolkit.retrieveMultiple({
    entityName: entity ,  
    odataQuery: Query,
    async: false,
    successCallback: successCallback,
    errorCallback: errorCallback
});

Now, against the PhoneCallId, I am retrieving records and please note that the records are dynamic in nature which means the number of rows fetched against each hit is not fixed (I may get 3 rows first time, 5 rows the next time and so on).

I want to dynamically bind these records into my HTML page like a gridview which will have header columns and then the records will be bind at runtime on that gridview.

Answer 1

There are different ways you could achieve This. For Example here is one of my Fiddle using KnockoutJS which does populate data. In this fiddle Data is static for explanation and this can be dynamically populated from CRM and you could shown how many Rows once wish to show per page. Below code is just Ref to Fiddle

Basically below code is what you need for getting data from CRM into your local Array

var req = new XMLHttpRequest(); 
req.open("GET", Xrm.Page.context.getClientUrl() + "/api/data/v9.1/accounts?$select=accountnumber,emailaddress1,name&$filter=accountid ne null", 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=\"*\"");
var tempArray = new array();
req.onreadystatechange = function() {
    if (this.readyState === 4) {
        req.onreadystatechange = null;
        if (this.status === 200) {
            var results = JSON.parse(this.response);
            for (var i = 0; i < results.value.length; i++) {
                var accountnumber = results.value[i]["accountnumber"];
                var emailaddress1 = results.value[i]["emailaddress1"];
                var name = results.value[i]["name"];
                tempArray.push(results.value[i]["accountnumber"],results.value[i]["emailaddress1"],results.value[i]["name"]);

            }
        } else {
            Xrm.Utility.alertDialog(this.statusText);
        }
    }
};
req.send();

Normal HTML Table adding data. Link for Reference