We need to create one html and add the JavaScript and CSS. After Add the webresource to Form.
For this fist we need to create hml like below
<!DOCTYPE html>
<html>
<head>
<title>Contact Records</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse:collapse;
border-color:yellow;
}
td{
text-align:center;
color:blue;
background-color:blue;
}
th{
background-color:red;
}
td{
color:blueviolet;
}
</style>
</head>
<body>
<table >
<thead>
<tr>
<th>Column name1</th>
<th>Column name2</th>
<th>Column name3</th>
<th>Column name upto n</th>
</tr>
</thead>
<tbody id="contactTableBody"></tbody>
</table>
</body>
</html>
After creating html we need to add the some styles to out tables in head section.
<head>
<title>Contact Records</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse:collapse;
border-color:yellow;
}
td{
text-align:center;
color:blue;
background-color:blue;
}
th{
background-color:red;
}
td{
color:blueviolet;
}
</style>
</head>
After adding the CSS add the JavaScript functionality to the html like below. add the javascript in script tage after Tabel tag closing
<script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
<script>
// Function to retrieve contact records from CRM using Web API
function getContacts() {
var Xrm;
if (window.opener) { Xrm = window.opener.Xrm; }
else if (window.parent) { Xrm = window.parent.Xrm; }
//Above condtions we can get the xrm of the form
var accountid= Xrm.Page.data.entity.getId();
//guid of the record
Xrm.WebApi.online.retrieveMultipleRecords("contact", "?$select=emailaddress1,fullname,telephone1&$filter=_accountid_value eq " + accountid+"").then(
function success(results) {
for (var i = 0; i < results.entities.length; i++) {
var emailaddress1 = results.entities[i]["emailaddress1"];
var fullname = results.entities[i]["fullname"];
var telephone1 = results.entities[i]["telephone1"];
//Get the Row Element
var row = document.createElement("tr");
// get the td element in the row
var nameCell = document.createElement("td");
//Set the Filed name to Column
nameCell.textContent = fullname;
// Append the filed to Td
row.appendChild(nameCell);
var emailCell = document.createElement("td");
emailCell.textContent = emailaddress1;
row.appendChild(emailCell);
var phoneCell = document.createElement("td");
phoneCell.textContent = telephone1;
row.appendChild(phoneCell);
contactTableBody.appendChild(row);
}
},
function (error) {
Xrm.Utility.alertDialog(error.message);
}
);
}
getContacts();
</script>
</body>
After creating the Entire code. Add this code to webresource in the crm and select web resource as Html and Paste the Code in source Code
We can see the output like below
After creating, We need to go for the account entity
Add the web resource in that section with name. After adding save and publish the form.
After that open the form and its shows like below based on my CSS
We can use this for any entity. By using html also we can add sub grid with Good UI format with styles
Thanks for reading my post and follow the page for the latest Updates.
Nice mr.dinesh
ReplyDelete