List Aggregator App (SPFx)

Retrieve and Display TASK status using REST API in SharePoint

Retrieve and Display TASK status using REST API in SharePoint

This SharePoint tutorial, we will discuss how to retrieve and display task status using Rest API in SharePoint Online or in SharePoint 2013 / SharePoint 2016 / SharePoint 2019.

Here I have a task list in my SharePoint Online site which has the Status column. I want to display the Status column in a presentable manner.

SharePoint deveopment training course

Retrieve and Display TASK status using REST API in SharePoint

Step 1: Login to the SharePoint site and create a task as per below image.

retrieve task status using rest api sharepoint
retrieve task status using rest api sharepoint

Step 2: Next, I am using the REST API to get task status from ticketInfo list. the below is my code to get the details of the list.

<html>
<head>
		<script type="text/javascript" src="/sites/DLH/Documents/Task%20Management/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="/sites/DLH/Documents/Task%20Management/jquery.dataTables.min.js"></script>
		<script type="text/javascript" src="/sites/DLH/Documents/Task%20Management/dataTables.bootstrap4.min.js"></script>
		
		<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>
		<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
		<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
		<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>


		<link rel="stylesheet" href="/sites/DLH/Documents/Task%20Management/bootstrap.css">
		<link rel="stylesheet" href="/sites/DLH/Documents/Task%20Management/dataTables.bootstrap4.min.css">	
		<link rel="stylesheet" href="/sites/DLH/Documents/Task%20Management/dashboard.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
							
 <style>
  </style>			
</head>
<script>

$(document).ready(function() {
        getCount('Not-Started');
        getCount('In-Progress');
        getCount('On-Hold');
        getCount('Completed');
        getCount('Closed');

        $('.card-header').each(function() {
                $(this).prop('Counter', 0).animate({
                        Counter: $(this).text()
                }, {
                        duration: 1500,
                        easing: 'swing',
                        step: function(now) {
                                $(this).text(Math.ceil(now));
                        }
                });
        })


});

function getCount(status) {
        //console.log(category);
        var listName = "TicketInfo";
        var query = "$filter=(Status eq '" + status + "')";
        var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items?" + query;

        getListItems(url, function(data) {
                var items = data.d.results;
                $('#' + status).text(items.length);
        });

}

function getListItems(siteurl, success, failure) {
        $.ajax({
                url: siteurl,
                method: "GET",
                async: false,
                headers: {
                        "Accept": "application/json; odata=verbose"
                },
                success: function(data) {
                        success(data);
                },
                error: function(data) {
                        failure(data);
                }
        });
}
</script>
<body>

<div class="container">
<div class="card-deck">
  <div class="card t1" >
    <div class="card-header" id="Not-Started" style="width:100%">0</div>
    <div class="card-body">
      <h5 class="card-title"><i class="fa fa-ban"></i> Not-Started</h5>
    </div>
  </div>

  <div class="card t2" style="width:400px">
  <div class="card-header" id="In-Progress" style="width:100%">0</div>
    <div class="card-body">
      <h5 class="card-title"><i class="fa fa-clock-o"></i> In-Progress</h5>
    </div>
  </div>
  
    <div class="card t3" >
    <div class="card-header" id="On-Hold" style="width:100%">0</div>
    <div class="card-body">
      <h5 class="card-title"><i class="fa fa-pause-circle-o"></i> On-Hold</h5>
    </div>
  </div>
  
    <div class="card t4" >
    <div class="card-header" id="Completed" style="width:100%">0</div>
    <div class="card-body">
      <h5 class="card-title"><i class="fa fa-check"></i> Completed</h5>
    </div>
  </div>
 
     <div class="card t5" >
    <div class="card-header" id="Closed" style="width:100%">0</div>
    <div class="card-body">
      <h5 class="card-title"><i class="fa fa-close"></i> Closed</h5>
    </div>
  </div>
 
</div>

</div>
<br>
</body>
</html>

Step 3: Next, Create a Script editor Web part and add the above code. Make sure you have modified the code as per your requirement. Once you have done with your modification, save the page and check the output as below Image.

retrieve task status using rest api sharepoint online
retrieve task status using rest api sharepoint online

This is all about getting task status by using REST API in SharePoint.

Note: You can download the all JS file from this URL
https://www.enjoysharepoint.com/display-sharepoint-list-data-in-jquery-data-table/


You may like following SharePoint Rest API tutorials:

Hope this SharePoint tutorial, helps to learn how to retrieve and display task status using Rest API in SharePoint Online or SharePoint 2013/2016.

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

About Rajkiran Swain

Rajkiran is currently working as a SharePoint Consultant in QATAR . Rajkiran having 6 + years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).

View all posts by Rajkiran Swain →