Sometime we need to show our data in table format. We should use Jquery DataTable to show the data in sub-grid (Table) format. In this post i will explain step by step, how we can create a DataTable.
Step 1: Copy the below code and paste this code in your editor. And change the code as per your need. Here i will create a DataTable of Case Entity.
Step 2: After make changes in code, Create a new HTML Web-resource and Upload the code in this web-resource and check the table.
Step 1: Copy the below code and paste this code in your editor. And change the code as per your need. Here i will create a DataTable of Case Entity.
<html>
<head>
<title>MS Dynamic CRM</title>
<script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.5/css/select.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"> </script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"> </script>
<script>
var dataSet;
var arrData = [];
$(document).ready(function() {
// Get the data in Json format, Change the URL as per your need.
var entityName ="incident"; // This is the Entity name of Case.
var url = window.parent.Xrm.Page.context.getClientUrl() + "/api/data/v8.2/" + entityName +"s?$select=title,ticketnumber,prioritycode";
var myData = [];
var req = new XMLHttpRequest();
req.open("GET",url, false);
req.setRequestHeader("OData-MaxVersion", "4.0");
req.setRequestHeader("OData-Version", "4.0");
req.setRequestHeader("Accept", "application/json");
req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
req.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");
req.onreadystatechange = function() {
if (this.readyState === 4) {
req.onreadystatechange = null;
if (this.status === 200) {
myData = JSON.parse(this.response);
dataSet=myData.value;
} else {
Xrm.Utility.alertDialog(this.statusText);
}
}
};
req.send();
// Convert Json data into 2-d Array
arrItems = [];
$.each(dataSet, function (index, value) {
arrItems.push(value.title);
arrItems.push(value.ticketnumber);
// arrItems.push(value.prioritycode); or
arrItems.push(value["prioritycode@OData.Community.Display.V1.FormattedValue"]) ; // For OptionSet value
arrData.push(arrItems); // Push The Values Inside the Array to Create 2-D Array
arrItems = [];
});
table(); // Call a table function to create table.
});
function table() {
$('#customdatatable').DataTable( {
data: arrData,
columns: [
{ title: "Title" }, // Change the column name as per your need.
{ title: "Ticket Number" },
{ title: "Priority" }
]
} );
}
</script>
</head>
<body style="word-wrap: break-word;">
<table id="customdatatable" class="display" width="100%"></table>
</body>
</html>
<head>
<title>MS Dynamic CRM</title>
<script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.5/css/select.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"> </script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"> </script>
<script>
var dataSet;
var arrData = [];
$(document).ready(function() {
// Get the data in Json format, Change the URL as per your need.
var entityName ="incident"; // This is the Entity name of Case.
var url = window.parent.Xrm.Page.context.getClientUrl() + "/api/data/v8.2/" + entityName +"s?$select=title,ticketnumber,prioritycode";
var myData = [];
var req = new XMLHttpRequest();
req.open("GET",url, false);
req.setRequestHeader("OData-MaxVersion", "4.0");
req.setRequestHeader("OData-Version", "4.0");
req.setRequestHeader("Accept", "application/json");
req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
req.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");
req.onreadystatechange = function() {
if (this.readyState === 4) {
req.onreadystatechange = null;
if (this.status === 200) {
myData = JSON.parse(this.response);
dataSet=myData.value;
} else {
Xrm.Utility.alertDialog(this.statusText);
}
}
};
req.send();
// Convert Json data into 2-d Array
arrItems = [];
$.each(dataSet, function (index, value) {
arrItems.push(value.title);
arrItems.push(value.ticketnumber);
// arrItems.push(value.prioritycode); or
arrItems.push(value["prioritycode@OData.Community.Display.V1.FormattedValue"]) ; // For OptionSet value
arrData.push(arrItems); // Push The Values Inside the Array to Create 2-D Array
arrItems = [];
});
table(); // Call a table function to create table.
});
function table() {
$('#customdatatable').DataTable( {
data: arrData,
columns: [
{ title: "Title" }, // Change the column name as per your need.
{ title: "Ticket Number" },
{ title: "Priority" }
]
} );
}
</script>
</head>
<body style="word-wrap: break-word;">
<table id="customdatatable" class="display" width="100%"></table>
</body>
</html>
Step 2: After make changes in code, Create a new HTML Web-resource and Upload the code in this web-resource and check the table.
6 comments:
not working for other entities
Totally possible and doable. I used this method in Dynamics CRM Unified Interface to display duplicate records of the current record. Worked like a charm and fully customizable.
Nice Blog With Full of Knowledge Thanks For Sharing.. sugarcrm wordpress integration
Salesforce Customer Portal: Guide
Dynamics CRM WordPress Customer Portal
suitecrm joomla portal
Wonderful blog & good post.Its really helpful for me, Your blog is easily understandable and give complete information. Keep sharing new ideas and features.
CRM Software
CRM Software in Dubai
CRM Software in UAE
CRM Software Solution
My brother suggested I might like this website. He was entirely right. This post truly made my day. You cann't imagine simply how much time I had spent for this info! Thanks!
You've made some really good points there. I checked on the web to find out more about the issue and found most people will go along with your views on this web site.
Post a Comment