Tuesday, January 10, 2017

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 :
  • 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 :
 <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;'>&nbsp;</div></div>&nbsp;" + (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"],
            });
        });

}