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>

1 comment:

  1. very useful
    take a look into below post
    https://prudvihub.blogspot.com/2020/09/dynamically-create-html-table-in.html

    ReplyDelete

Day 11 - Customizing Option Sets Dropdown Fields with JavaScript

  In this Blog, we will see how to Customizing Option Sets Dropdown Fields with JavaScript label1 = formContext.getAttribute( "bosch_op...