Post
Ask Question

How To Fetch Data From Task List Using Rest For Workflow History In SharePoint Online

I got a requirement to make a history form for a workflow. For that, I had to fetch the data from a task list. We can use Rest API, SP Services, or any other methods for this kind of task. So, I chose REST API for the same. Now, the question is, what will be the scenario? Because Workflow status columns of Assign to and Modified Date are not available in the normal list. Then, I learned that we can fetch it from the task list or history list, because all the workflow information resides there.

History list

History List is the hidden list which consists of all the details of workflow and it also consists of GUID of list and workflow ID also. With the help of the following URL, we can access the History List.

http://[servername]/[sitename]/lists/Workflow%20History

You have to change [server name] & site name from your tenant. Here we will fetch the data from Task List.

In this history form, I need to display Assign Date, Request id, assigned to, and some other columns

So, first of all, create a custom list, as per the required columns, such as Request no., Employee Name, Start Date, End Date, 1st Manager Name, 2nd Manager Name etc.

  • Employee Name: Single Line Text.
  • Start Date: Date and time Type.
  • End Date: Date and Time Type.
  • 1st Manager: People and Group Type.
  • 2nd Manager Name: People and Group Type.

SharePoint

After that, you have to make a workflow. You can make approval workflow with a condition using "Start approval workflow". In which you can take multiple approvers as per your requirement. You can take “Start Approval Process” Approval Workflow for this.

For fetching the data, you can take Rest API or SP Services or other methods. You can perform basic operations like Create, Update, Delete using GET or POST methods. To get an item, you can use GET Method and to give any value or to post any value, you can use POST Method. For Rest API, you don’t need to attach any other SharePoint library or Client assemblies for performing these operations. You can use Rest endpoints.

Now, the code is given below for fetching the data from the task list.

  1. <script type="text/javascript">  
  2.     $(document).ready(function() {  
  3.         getDatafromWFTaskList();  
  4.     });  
  5.   
  6.     function getDatafromWFTaskList() {  
  7.         var serverURL = _spPageContextInfo.webAbsoluteUrl;  
  8.         $.ajax({  
  9.             url: serverURL + "/_api/web/lists/Getbytitle('Tasks')/items?$filter=ID eq 91&$expand=Author,AssignedTo&$select=ID,Author/Title,Created,WorkflowOutcome,AssignedTo/Title,  
  10.             type: "GET",  
  11.             headers: {  
  12.                 "Accept": "application/json;odata=verbose;"  
  13.             },  
  14.             success: function(data) {  
  15.                 var count = data.d.results.length;  
  16.                 for (var i = 0; i < count; i++) {  
  17.                     var RequestID = data.d.results[i].ID;  
  18.                     //alert(RequestID);  
  19.                     $('#RequestID').html(RequestID);  
  20.                     var InitiatedBy = data.d.results[i].Author.Title;  
  21.                     $("#InitiatedBy").html(InitiatedBy);  
  22.                     alert(InitiatedBy);  
  23.                     var Initiated = data.d.results[i].Created;  
  24.                     $("#Initiated").html(Initiated);  
  25.                     //alert(Initiated);  
  26.                     var CurrentStatus = data.d.results[i].WorkflowOutcome;  
  27.                     $("#CurrentStatus").html(CurrentStatus);  
  28.                     var AssignedTo = data.d.results[i].AssignedTo.Title;  
  29.                     $("#AssignTo").html(AssignedTo);  
  30.                     // alert(AssignedTo);  
  31.                     var AssignDate = data.d.results[i].Created;  
  32.                     $("#AssignDate").html(AssignDate);  
  33.                 }  
  34.             },  
  35.             error: function(data) {  
  36.                 console.log("error details: " + data);  
  37.             },  
  38.         });  
  39.     }  
  40. </script>  
  41.   
  42. <body>  
  43.     <div id="IntiateHistory">  
  44.         <h2>Initiation History</h2>  
  45.         <table>  
  46.             <tr>  
  47.                 <td><label>Request ID : </label> <label id="RequestID"></label></td>  
  48.                 <td>    </td>  
  49.                 <td><label>Initiated By : </label> <label id="InitiatedBy"></label></td>  
  50.             </tr>  
  51.             <tr>  
  52.                 <td><label>Initiated : </label> <label id="Initiated"></label></td>  
  53.                 <td>    </td>  
  54.                 <td><label>Current Status : </label> <label id="CurrentStatus"></label></td>  
  55.             </tr>  
  56.         </table>  
  57.     </div>  
  58.     <div id="ReviewHistory">  
  59.         <h2>Review History</h2>  
  60.         <table>  
  61.             <tr>  
  62.                 <td><label>AssignTo : </label> <label id="AssignTo"></label></td>  
  63.                 <td>    </td>  
  64.                 <td><label>AssignDate : </label>  
  65.                     <td> <label id="AssignDate"></label></td>    </td>  
  66.             </tr> table> </div>  
  67.     <div id="Buttons"> </div>  
  68. </body>  
  69.   
  70. </html>  

The output is given below. It doesn’t consist of CSS or designing part much. So, you can also design it as per as your requirement. Here, the date format is not ISO, so you can also change your date format as per as your requirement.

SharePoint

This will be the output which consists of two parts - Initiation History & Review History.


Similar Articles