Use Jquery DataTable to Create a custom Sub-Grid in MS Dynamic CRM.

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.

<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.



Posted by 6 comments:

How to get GUID of selected records from home page entity view using Java-Script in MS Dynamic CRM.

Sometime we need to apply some operations on selected records in home page entity view by clicking on custom button. To apply operations, firstly we need to get GUID of these selected records then we can apply any kind of operations of these records. In this post, i will show you how to retrieve GUID of selected records.


Step 1: Copy the below code and paste it in your Java-Script file .

function selectedRecord(selectedIds) {
    if (selectedIds != null && selectedIds != "") {
        var strIds = selectedIds.toString();
        var arrIds = strIds.split(",");
        for (var i = 0; i < arrIds.length; i++) {          
alert(arrIds[i]);
// do your operations here
        }       
    }
    else {
        alert("No records selected!");
    }
}

Step 2: Now Add custom button in your home page using Ribbon Workbench Tool.


Step 3: Now Add New Command for this button. And after that, add new actions for this command.



Step 4: In this Action, add lib. and give the Function Name.Here our function is selectedRecord. Now click on parameter to get selected records GUID.

Step 5: Click on Add to add a new parameter. And then select the CRM Parameter option.


Step 6: Value of parameter is SelectedControlSelectedItemsIds as show in below Snapshot.

Step 7: Now select your command in command bar and then publish your solution.



Now do the testing. Select the records and then click on button. you will get GUID of these selected records.
Posted by 6 comments:
Subscribe to: Posts (Atom)