Friday, October 14, 2016

Dynamically Create HTML Table with JQGrid FetchXML MSCRM

Hi All,

Dynamically Create HTML Table with JQGrid FetchXML MSCRM

<html>
<head>

    <title>Log Details</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }

        table {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

            table th {
                background-color: #F7F7F7;
                color: #333;
                font-weight: bold;
            }

            table th, table td {
                padding: 5px;
                border-color: #ccc;
            }
    </style>
    <script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
    <script src="../WebResources/Jquery.min.js" type="text/javascript"></script>
    <script src="../WebResources/bootstrap.min.js" type="text/javascript"></script>
    <script src="../WebResources/grid.locale_en.js" type="text/javascript"></script>
    <script src="../WebResources/jquery.jqgrid.min.js" type="text/javascript"></script>
    <script src="../WebResources/scripts/XrmServiceToolkit" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        function getAccountServices() {
            var getQueryString = function (field) {
                var href = decodeURIComponent(window.location.href);
                var reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i');
                var string = reg.exec(href);
                return string ? string[1] : null;
            };

            var ContactID = getQueryString('contact');
            var CaseID = getQueryString('case');

            var SecurityLogFetchXML = "<fetch version='1.0' output-format='xml-platform' mapping='logical' distinct='false'>" +
  "<entity name= 'new_names'>" +
    "<attribute name='new_namesid' />" +
    "<attribute name='new_name' />" +
    "<attribute name='new_dates' />" +
    "<attribute name='new_loopstring' />" +
    "<order attribute='new_name' descending='false' />" +
    "<filter type='and'>" +
      "<filter type='and'>" +
        "<condition attribute='new_case' operator='eq' value='" + CaseID + "' />" +
        "<condition attribute='new_contact' operator='eq' value='" + ContactID + "' />" +
      "</filter>" +
    "</filter>" +
  "</entity>" +
"</fetch>";
            var contactsLog = new Array();
            contactsLog.push(["Name", "Date", "LoopString"]);
            var contactRecords = XrmServiceToolkit.Soap.Fetch(SecurityLogFetchXML);
            if (contactRecords.length > 0) {
                for (var contact = 0 ; contact < contactRecords.length; contact++) {
                    contactsLog.push([
                        contactRecords[contact].attributes.new_name? contactRecords[contact].attributes.new_name.value : "",
                        contactRecords[contact].attributes.new_dates ? contactRecords[contact].attributes.new_dates.value : "",
                        contactRecords[contact].attributes.new_loopstring ? contactRecords[contact].attributes.new_loopstring.value : "",
                    ]);
                }
                //Build an array containing Customer records.

                //Create a HTML Table element.
                var table = document.createElement("TABLE");
                table.border = "1";
                //Get the count of columns.
                var columnCount = contactsLog[0].length;
                //Add the header row.
                var row = table.insertRow(-1);
                for (var i = 0; i < columnCount; i++) {
                    var headerCell = document.createElement("TH");
                    headerCell.innerHTML = contactsLog[0][i];
                    row.appendChild(headerCell);
                }
                //Add the data rows.

                for (var i = 1; i < contactsLog.length; i++) {
                    row = table.insertRow(-1);
                    for (var j = 0; j < columnCount; j++) {
                        var cell = row.insertCell(-1);
                        cell.innerHTML = contactsLog[i][j];
                    }
                }
                var dvTable = document.getElementById("dvTable");
                dvTable.innerHTML = "";
                dvTable.appendChild(table);
            }
        }

    </script>
</head>
<body onload="getAccountServices();" style="overflow-wrap: break-word;">
    <div id="dvTable">

    </div>

</body>

No comments:

Post a Comment

How to Clear Cache in Canvas PowerApps while working on Offline mode?

  Introduction In this blog, we’ll look at how to clear cache in Canvas Apps when using the Power Apps mobile application, especially when t...