Create HTML page show all contact related to specific account, add this web resource as a sub grid in the form
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
Note: Should Place Your Code in source code and then check it in Rich Text
We can see the output like below
After creating Web Resources, We need to open main form of the account entity
Create a Sub Grid inside a section and select the Web resource.
Now in field resource property provide Web resource by giving web resource.
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
.png)
Comments
Post a Comment