Tasks List with PNP JS & DataTable in SharePoint
Hi ,
I have created one example for SharePoint with pnp-js & datatable.
Features which I have covered in this example :
Here is the code :
You need to add following references :
You need to download following files & add the reference :
Now you need to create HTML table with required columns :
This is the function which fill the data & format the datatable :
I have created one example for SharePoint with pnp-js & datatable.
Features which I have covered in this example :
- Open task display page in new tab.
- Show Priorities in different colors.
- Show Percent Completed as Progress Bar
- Show dates in proper formats.
- Show Assigned To (Multi-people)
Here is the code :
You need to add following references :
<script src="https://code.jquery.com/jquery-2.2.0.min.js" integrity="sha256-ihAoc6M/JPfrIiIeayPE9xjin4UWjsx2mjW/rtmxLM4=" crossorigin="anonymous"></script>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/plug-ins/1.10.12/sorting/datetime-moment.js"></script>
You need to download following files & add the reference :
- Download pnp.js
- Download the es6-promises polyfill from https://github.com/stefanpenner/es6-promise and upload it to your style library
- Download the fetch polyfill from https://github.com/github/fetch and upload it to your style library
<script type="text/javascript" charset="utf8" src="/sites/MyDev/Style%20Library/SPS/pnp.js"></script>
<script type="text/javascript" charset="utf8" src="/sites/MyDev/Style%20Library/SPS/es6-promise.min.js"></script>
<script type="text/javascript" charset="utf8" src="/sites/MyDev/Style%20Library/SPS/fetch.js"></script>
Now you need to create HTML table with required columns :
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="exampleTask">
<thead>
<th>Task Name</th>
<th>Due Date</th>
<th>Assigned To</th>
<th>Priority</th>
<th>Start Date</th>
<th>Task Status</th>
<th>Progress</th>
</thead>
</table>
This is the function which fill the data & format the datatable :
function LoadTaskItems()
{
$pnp.setup({
headers: {
"Accept" : "application/json; odata=verbose",
},
});
var baseUrl=_spPageContextInfo.siteAbsoluteUrl;
var MyWeb = new $pnp.Web(baseUrl);
//$pnp.sp.web.lists.getByTitle('Tasks').items.expand('AssignedTo').select('ContentTypeId,Title,Priority,Status,PercentComplete,AssignedTo/ID,AssignedTo/Title,StartDate,DueDate,ParentID,ID,Modified,Created,Author,Editor,FileDirRef').orderBy('ID').get().then(function (response) {
MyWeb.lists.getByTitle('Tasks').items.expand('AssignedTo').select('ContentTypeId,Title,Priority,Status,PercentComplete,StartDate,DueDate,ID,Modified,Created,AssignedTo/ID,AssignedTo/Title,FileDirRef').orderBy('ID').get().then(function (response) {
//alert(JSON.stringify( response[0].AssignedTo.results[0].Title));
var generateCustomerTable = $("#exampleTask")
.dataTable({
"aaData": response,
"processing": true,
"autoWidth": true,
"bDestroy": true,
"aoColumns": [
{ "mData": "Title", "width": "20%","fnCreatedCell" :
function (nTd, sData, oData, iRow, iCol)
{
$(nTd).html("<a href='"+ oData.FileDirRef +"/DispForm.aspx?ID="+oData.ID+"' target='_blank'>"+oData.Title+"</a>");
}
},
{ "data": "DueDate", "stype": "date",
"render": function( data, type, row, meta){
var ThisDate = moment(new Date(data)).format("Do MMM YYYY");
return ThisDate
}
},
{ "data": "AssignedTo.results[, ].Title"
},
{ "data": "Priority" ,"fnCreatedCell" :
function (nTd, sData, oData, iRow, iCol)
{
var displayValue='';
switch (oData.Priority) {
case "(1) High":
displayValue="<span style='color :#f00'>" + oData.Priority + "</span>";
break;
case "(2) Normal":
displayValue="<span style='color :#ff6a00'>" + oData.Priority + "</span>";
break;
case "(3) Low":
displayValue="<span style='color :#cab023'>" + oData.Priority + "</span>";
}
$(nTd).html(displayValue);
}
},
{ "data": "StartDate" , "stype": "date",
"render": function( data, type, row, meta){
var ThisDate = moment(new Date(data)).format("Do MMM YYYY");
return ThisDate
}
},
{ "data": "Status"
},
{ "data": "PercentComplete","width": "150px;" ,"fnCreatedCell" :
function (nTd, sData, oData, iRow, iCol)
{
var val= ((oData.PercentComplete * 100));
var tt= "<div style='background-color: #e5e5e5; width: 100px; display:inline-block;'><div style='width: " + val + "px; background-color: #0094ff;'> </div></div> " + (oData.PercentComplete * 100);
$(nTd).html(tt);
}
}
],
"language": {
"emptyTable": "There are no tasks at present.",
"zeroRecords": "There were no matching tasks found."
},
"caseInsensitive": false,
"searching": true,
"pageLength": 50,
"ordering": true,
"paging": true,
"order": [0, "asc"],
});
});
}
Comments