Dynamically Create HTML Table in microsoft dynamics crm
Dynamically Create HTML Table in Microsoft CRM
Requirment :
On Click of Button i need to display Account Entity Names by sorting dynamically in a HTML Table.
Solution :
Here i wrote the HTML code by using FetchXml in MicrosoftCRM.
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
<meta>
</head>
<body onfocusout="parent.setEmailRange();" style="overflow-wrap: break-word;">
<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>
<table id="myTable">
<tbody>
<tr>
<th>Name</th>
<th>id</th>
<th>phone</th>
</tr>
<!--<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
<td>Row1 cell3</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
<td>Row2 cell3</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
<td>Row3 cell3</td>
</tr>-->
</tbody>
</table>
<br>
<button onclick="myFunction()">Try it</button>
<p>Click the button to sort the table alphabetically, by name:</p>
<p><button onclick="sortTable()">Sort</button></p>
<script>
function myFunction() {
var table = document.getElementById("myTable");
var accountFetchXML = "<fetch version='1.0' output-format='xml-platform' mapping='logical' distinct='false'>" +
" <entity name='account'>" +
" <attribute name='name' />" +
" <attribute name='primarycontactid' />" +
" <attribute name='telephone1' />" +
" <attribute name='accountid' />" +
" <order attribute='name' descending='false' />" +
" </entity>" +
"</fetch>";
//Build an array containing Customer records.
var contactsLog = new Array();
contactsLog.push(["name", "primarycontactid", "telephone1"]);
var contactRecords = "?fetchXml=" + encodeURIComponent(accountFetchXML);
parent.Xrm.WebApi.retrieveMultipleRecords("account", contactRecords).then(
function success(result) {
//x.add(option, x[accountRecordsCount]);
//for (var contact = 0 ; contact < contactRecords.length; contact++) {
for (var accountRecordsCount = 0; accountRecordsCount < result.entities.length; accountRecordsCount++) {
var name=result.entities[accountRecordsCount].name;
var id=result.entities[accountRecordsCount].primarycontactid;
var phone=result.entities[accountRecordsCount].telephone1;
//outputText += result.entities[accountRecordsCount].name + "\t\t" + result.entities[accountRecordsCount].primarycontactid + "\t\t" + result.entities[accountRecordsCount].telephone1 + "\n";
contactsLog.push([name,id,phone
// name=result.entities[accountRecordsCount].name ? result.entities[accountRecordsCount].name : "",
//primarycontactid=result.entities[accountRecordsCount].primarycontactid ? result.entities[accountRecordsCount].primarycontactid : "",
// telephone1=result.entities[accountRecordsCount].telephone1 ? result.entities[accountRecordsCount].telephone1 : "",
]);
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = name;
cell2.innerHTML = id;
cell3.innerHTML = phone;
}
// parent.Xrm.Utility.alertDialog(outputText, null);
},
function (error) {
// Handle error conditions
parent.Xrm.Utility.alertDialog(error.message, null);
});
}
function sortTable() {
var table, rows, switching, i, x, y, shouldSwitch;
table = document.getElementById("myTable");
switching = true;
/*Make a loop that will continue until
no switching has been done:*/
while (switching) {
//start by saying: no switching is done:
switching = false;
rows = table.rows;
/*Loop through all table rows (except the
first, which contains table headers):*/
for (i = 1; i < (rows.length - 1) ; i++) {
//start by saying there should be no switching:
shouldSwitch = false;
/*Get the two elements you want to compare,
one from current row and one from the next:*/
x = rows[i].getElementsByTagName("TD")[0];
y = rows[i + 1].getElementsByTagName("TD")[0];
//check if the two rows should switch place:
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
/*If a switch has been marked, make the switch
and mark that a switch has been done:*/
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
}
}
}
</script>
</body>
</html>
1 Comments
Show picture in CRM :) nice work
ReplyDelete