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.
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.
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.
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:
- Create a Custom Calendar in SharePoint using Rest API and jQuery
- Display SharePoint list data in jQuery data table using Rest API
- Different ways to create auto increment column in SharePoint 2013/2016/Online list
- Create Highcharts in SharePoint using Rest API
- SharePoint Rest API Crud Operations
- Create SharePoint Quote of the day web part using Rest API and Bootstrap
- Display Task List data in a table using SharePoint REST API and filter by status column
- Google Pie Chart in SharePoint Online (Step by Step tutorial)
- HTTP Error 400 The size of the request headers is too long SharePoint Online Office 365
Hope this SharePoint tutorial, helps to learn how to retrieve and display task status using Rest API in SharePoint Online or SharePoint 2013/2016.
Rajkiran is currently working as a SharePoint Consultant in India . Rajkiran having 7+ 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).
[…] Retrieve and Display TASK status using REST API in SharePoint […]
[…] Retrieve and Display TASK status using REST API in SharePoint […]
Hello,
Nice blog, is there a way I can get the “/dashboard.css/, can’t find anywhere.
Thank you.
Hi, I have found file within the zip folder, thank you.
Appreciate it.
Hi,
I copied the below code to Script Editor, but this is not giving the count.
0
Not-Started
0
In Progress
0
On-Hold
0
Completed
0
Cancelled
My SharePoint List is named as “Learning”