Custom Subgrid Using HTML Web resource
Sometimes you will get requirement to show records in subgrid without any proper relationship.
In such scenario you can go with custom subgrid and show all those related records in HTML table that won't be possible with OOB way of ms crm
Below is the sample code for HTML web resource for creating sample custom subgrid
Here we are showing all accounts in Case entity where matching criteria is Case Number = Account number(that too without any relationship between Case and account)
html><head><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta></head><body onfocusout="parent.setEmailRange();" style="overflow-wrap: break-word;">
<script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="//cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<style type="text/css">
#ppp {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
#ppp thead tr {
background-color: #009879;
color: #ffffff;
text-align: left;
}
</style>
<p><b>Customer Engagements</b></p>
<script>
<!-- Read Window URL -->
debugger;
var caseNumber = window.parent.Xrm.Page.getAttribute("new_casenumber").getValue();
Xrm.WebApi.online.retrieveMultipleRecords("account", "?$select=accountid,accountname,phonenumber,_new_contact_value&$filter=new_accountnumber eq '"+caseNumber+"' and statecode eq 0").then(
function success(results) {
var t1 = "<table id='tblwoo' style='width:100%;background-color:#f0f0f0' class='display table table-striped table-bordered'> <thead><tr><th>Account Name</th><th>Phone Number</th><th>Contact</th><th>Record URL</th></tr> </thead><tbody>@tr</tbody></table>";
var trr ="";
for (var i = 0; i < results.entities.length; i++) {
var accountid = results.entities[i]["accountid"];
var accountName = results.entities[i]["accountname"];
var _new_contact_value = results.entities[i]["_new_contact_value"];
var _new_contact_value_formatted = results.entities[i]["_new_contact_value@OData.Community.Display.V1.FormattedValue"];
var _new_contact_value_lookupLogicalName = results.entities[i]["_new_contact_value@Microsoft.Dynamics.CRM.lookuplogicalname"];
var phoneNumber = results.entities[i]["phonenumber"];
var AccountURL = 'https://OrgName.crm.dynamics.com/main.aspx?appid=8034a314-3fbe-e811-a94d-000d3a3b5acf&pagetype=entityrecord&etn=account&id='+accountid+'&formid=f33da760-d123-4119-a1e8-d11e92283eee';
if(accountName == "" || accountName == null) accountName ="";
if(phoneNumber == "" || phoneNumber == null) phoneNumber ="";
if(_new_contact_value_formatted == null || _new_contact_value_formatted == undefined) _new_contact_value_formatted = "";
trr = trr + "<tr>
+"<td>"+name+"</td>"
+"<td>"+phoneNumber +"</td>"
+"<td>"+_new_contact_value_formatted+"</td>"
+"<td><a href="+AccountURL+" target='_blank'>Record URL</a></td>
</tr>";
}
t1 = t1.replace("@tr",trr);
document.getElementById("ppp").innerHTML=t1;
$('#tblwoo').DataTable( {
"pageLength": 3,
"pagingType": "numbers",
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"searching": false
} );
},
function(error) {
Xrm.Utility.alertDialog(error.message);
}
);
</script>
<p id="stss" style="padding-left:20px"></p>
<p id="ppp" style="padding:20px;max-height:400px;overflow:auto"></p>
</body></html>x
Drawbacks: If you need to add any new column or update criteria then you have to update HTML web resource
Comments
Post a Comment