使用 SharePoint REST API 批准工作流任务

使用 SharePoint REST API 审批工作流任务并导航到工作流审批页面

很多时候，我们面临着需要使用 SharePoint Rest API 审批/拒绝工作流任务或打开任何列表项的工作流任务的审批页面的情况。 这篇博文解释了如何进行 Rest 调用以显示工作流审批表单或直接审批或拒绝工作流任务。

背景场景

让我们以一个 HR 申请审批工作流为例。

在这里，我们有一个名为 HR_Request 的列表，并关联了 ApprovalWorkflow。 与工作流关联的任务列表是 HRTasks。 当将项目添加到列表中时，工作流将自动启动并将任务分配给 HR 组。

首先，让我们创建一个内容编辑器 Webpart 来显示当前分配的任务的状态。

以下代码显示了如何创建 Webpart 以及相应的 Rest API 调用。

Using the Code

Webpart 是使用 Angular JS 构建的，用于显示当前项目的工作流任务的状态。 以下代码用于显示设计结构。

<style>
td{border: solid 1px black; padding: 5px;} 
th{border: solid 1px black; padding: 5px;}
</style>

<script type="text/javascript" src="/sites/jccademo/style library/pnp.min.js"></script>   
<script type="text/javascript" src="/sites/jccademo/style library/workflow.js"></script>
<table ng-app="mainapp" style="border:solid 1px black; background-color:white;">
    <thead ng-controller="getHRRequest">
        <tr>
            <th>Task Title</th>
            <th>Task Request</th>
            <th>Approval Status</th>
            <th>Link for Approve/Reject</th>
            <th>Approve</th>
            <th>Reject</th>
        </tr>
        <tr ng-repeat="item in items">
            <td>{{item.Title}}</td>
            <td>{{item.Request}}</td>
            <td>
                <div ng-if="item.Approval==16">Approved</div> 
                <div ng-if="item.Approval==15">Cancelled</div> 
                <div ng-if="item.Approval==17">Rejected</div> 
                <div ng-if="item.Approval==2">InProgress</div> 
                <div ng-if="item.Approval==5">Completed</div> 
                <div ng-if="item.Approval==0">NotStarted</div> 
            </td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </thead>
</table>

以下是查找任务状态的 Rest API 调用。

var mainapp = angular.module("mainapp", []);
mainapp.controller('getHRRequest', ['$http', 'dataService', 
'$scope', function ($http, dataService, $scope) {
    var getHRRequest = _spPageContextInfo.webAbsoluteUrl + 
    "/_api/web/Lists/GetByTitle('HR_Request')/items?$select=ID,Title,
    Request,Approval&$orderby=Modified desc";

    $scope.items = [];
    dataService.get(getHRRequest).then(function (items) {
        $scope.items = items.data.d.results;

        angular.forEach(items.data.d.results, function (items) {
            var getCurrentUSerId = _spPageContextInfo.webAbsoluteUrl + 
            "/_api/Web/CurrentUser?$select=Id";

            dataService.get(getCurrentUSerId).then(function (users) {
                var getTaskId = _spPageContextInfo.webAbsoluteUrl+
                "/_api/lists/getbyTitle('HRTasks')/items?$select=Id,Title&$filter=WorkflowItemId eq " + 
                items.Id ;

                dataService.get(getTaskId).then(function (tasks) {
                    var Id = tasks.data.d.results.Id;
                });
            });
        })
    });
}]);

这将绑定 HR_Request 列表中每个项目的任务状态的详细信息，如下所示

Rest 调用以从 HRTasks 列表中获取关联的任务

现在，我们需要进行 rest 调用，以从 HRTasks 列表中获取与当前项目关联的任务。 Rest API 端点如下所示

/_api/lists/getbyTitle('HRTasks')/items?$select=Id,Title,AssignedToId&$filter=WorkflowItemId eq " + 
itemId 

其中 itemId 是 HR_Request 项目的 Id，WorkflowItemId 是关联列表项目的 Id。 这将显示所选项目的所有已分配任务。

此外，我们可以修改 rest 调用以获取分配给当前登录用户的任务。 以下是获取登录用户 ID 的 REST 调用

/_api/Web/CurrentUser?$select=Id

修改后的 Rest 调用，用于显示审批页面的链接，如下所示。 在这里，HTML 中的链接包含 HR_Request 列表的 guid，即 cb305ecc-17af-4f08-9d16-5f96195fbe55。

<style>
td{border: solid 1px black; padding: 5px;} 
th{border: solid 1px black; padding: 5px;}
</style>

<script type="text/javascript" 
src="/sites/jccademo/style library/pnp.min.js"></script>   
<script type="text/javascript" 
src="/sites/jccademo/style library/workflow.js"></script>
<table ng-app="mainapp" 
style="border:solid 1px black; background-color:white;">
    <thead ng-controller="getHRRequest">
        <tr>
            <th>Task Title</th>
            <th>Task Request</th>
            <th>Approval Status</th>
            <th>Link for Approve/Reject</th>
            <th>Approve</th>
            <th>Reject</th>
        </tr>
        <tr ng-repeat="item in items">
            <td>{{item.Title}}</td>
            <td>{{item.Request}}</td>
            <td>
                <div ng-if="item.Approval==16">Approved</div> 
                <div ng-if="item.Approval==15">Cancelled</div> 
                <div ng-if="item.Approval==17">Rejected</div> 
                <div ng-if="item.Approval==2">InProgress</div> 
                <div ng-if="item.Approval==5">Completed</div> 
                <div ng-if="item.Approval==0">NotStarted</div> 
            </td>
            <td><a href="/sites/jccademo/_layouts/15/WrkTaskIP.aspx?
            List=cb305ecc-17af-4f08-9d16-5f96195fbe55&
            ID={{item.TaskId}}">Click</a></td>
            <td></td>
            <td></td>
        </tr>
    </thead>
</table>

var mainapp = angular.module("mainapp", []);
mainapp.controller('getHRRequest', ['$http', 
'dataService', '$scope', function ($http, dataService, $scope) {
    var getHRRequest = _spPageContextInfo.webAbsoluteUrl + 
    "/_api/web/Lists/GetByTitle('HR_Request')/items?$select=ID,
    Title,Request,Approval&$orderby=Modified desc";
    $scope.items = [];
    dataService.get(getHRRequest).then(function (items) {
        $scope.items = items.data.d.results;
        angular.forEach(items.data.d.results, function (items) {
            var getCurrentUSerId = _spPageContextInfo.webAbsoluteUrl + 
            "/_api/Web/CurrentUser?$select=Id";
            dataService.get(getCurrentUSerId).then(function (users) {
                var getTaskId = _spPageContextInfo.webAbsoluteUrl+
                "/_api/lists/getbyTitle('HRTasks')/
                items?$select=Id,Title&$filter=WorkflowItemId eq " + 
                items.Id +" and AssignedToId eq "+ users.data.d.Id;
                dataService.get(getTaskId).then(function (tasks) {
                    items.TaskId=tasks.data.d.results[0].Id;
                });
            });
        })
    });
}]);

Rest 调用以审批/拒绝项目

现在，我们需要将任务更新为已审批或已拒绝。 要审批/拒绝任务，函数如下所示。

$scope.ApproveTask = function (TaskId) {
        //Some times outcome field's internal name could be different
        //Go to list settings of your Workflow Tasks to verify the internal names of all the fields below
        var data = {
            "__metadata": { "type": "SP.Data.HRTasksListItem" },
            "WorkflowOutcome": "Approved",
            "Status": "Approved",
            "PercentComplete": 1 
        };
        var itemUrl = _spPageContextInfo.webAbsoluteUrl + 
        "/_api/lists/getbyTitle('HRTasks')/items(" + TaskId + ")";
        dataService.post(itemUrl, JSON.stringify(data),TaskId).then(function (response) {
            alert("Approved Successfully");
        });
    };
    $scope.RejectTask = function (TaskId) {
        //Some times outcome field's internal name could be different
        //Go to list settings of your Workflow Tasks to verify the internal names of all the fields below
        var data = {
            "__metadata": { "type": "SP.Data.HRTasksListItem" },
            "WorkflowOutcome": "Rejected",
            "Status": "Rejected",
            "PercentComplete": 1 
        };
        var itemUrl = _spPageContextInfo.webAbsoluteUrl + 
        "/_api/lists/getbyTitle('HRTasks')/items(" + TaskId + ")";
        dataService.post(itemUrl, JSON.stringify(data),TaskId).then(function (response) {
            alert("Rejected Successfully");
        });
    };

这将显示 Webpart，如下所示

通过单击“审批”或“拒绝”按钮，您可以更改任务的状态。

整个代码将如下所示

HTML

<style>
td{border: solid 1px black; padding: 5px;} 
th{border: solid 1px black; padding: 5px;}
</style>

<script type="text/javascript" src="/style library/pnp.min.js"></script>   
<script type="text/javascript" src="/style library/workflow.js"></script>
<table ng-app="mainapp" style="border:solid 1px black; background-color:white;">
    <thead ng-controller="getHRRequest">
        <tr>
            <th>Task Title</th>
            <th>Task Request</th>
            <th>Approval Status</th>
            <th>Link for Approve/Reject</th>
            <th>Approve</th>
            <th>Reject</th>
        </tr>
        <tr ng-repeat="item in items">
            <td>{{item.Title}}</td>
            <td>{{item.Request}}</td>
            <td>
                <div ng-if="item.Approval==16">Approved</div> 
                <div ng-if="item.Approval==15">Cancelled</div> 
                <div ng-if="item.Approval==17">Rejected</div> 
                <div ng-if="item.Approval==2">InProgress</div> 
                <div ng-if="item.Approval==5">Completed</div> 
                <div ng-if="item.Approval==0">NotStarted</div> 
            </td>
            <td><a href="/_layouts/15/WrkTaskIP.aspx?List=cb305ecc-17af-4f08-9d16-5f96195fbe55&
            ID={{item.TaskId}}">Click</a></td>
            <td><a href="#" 
            ng-click="ApproveTask(item.TaskId)">Approve</a></td>
            <td><a href="#" 
            ng-click="RejectTask(item.TaskId)">Reject</a></td>
        </tr>
    </thead>
</table>

JavaScript

var mainapp = angular.module("mainapp", []);
mainapp.controller('getHRRequest', ['$http', 
'dataService', '$scope', function ($http, dataService, $scope) {
    var getHRRequest = _spPageContextInfo.webAbsoluteUrl + 
    "/_api/web/Lists/GetByTitle('HR_Request')/items?$select=ID,Title,
    Request,Approval&$orderby=Modified desc";
    $scope.items = [];
    dataService.get(getHRRequest).then(function (items) {
        $scope.items = items.data.d.results;
        angular.forEach(items.data.d.results, function (items) {
            var getCurrentUSerId = _spPageContextInfo.webAbsoluteUrl + 
            "/_api/Web/CurrentUser?$select=Id";
            dataService.get(getCurrentUSerId).then(function (users) {
                var getTaskId = _spPageContextInfo.webAbsoluteUrl + 
                "/_api/lists/getbyTitle('HRTasks')/
                items?$select=Id,Title&$filter=WorkflowItemId eq " + 
                items.Id + " and AssignedToId eq " + users.data.d.Id;
                dataService.get(getTaskId).then(function (tasks) {
                    items.TaskId = tasks.data.d.results[0].Id;
                });
            });
        })
    });
    $scope.ApproveTask = function (TaskId) {
        //Some times outcome field's internal name could be different
        //Go to list settings of your Workflow Tasks to verify the internal names of all the fields below
        var data = {
            "__metadata": { "type": "SP.Data.HRTasksListItem" },
            "WorkflowOutcome": "Approved",
            "Status": "Approved",
            "PercentComplete": 1 
        };
        var itemUrl = _spPageContextInfo.webAbsoluteUrl + 
        "/_api/lists/getbyTitle('HRTasks')/items(" + TaskId + ")";
        dataService.post(itemUrl, JSON.stringify(data),TaskId).then(function (response) {
            alert("Approved Successfully");
        });
    };
    $scope.RejectTask = function (TaskId) {
        //Some times outcome field's internal name could be different
        //Go to list settings of your Workflow Tasks to verify the internal names of all the fields below
        var data = {
            "__metadata": { "type": "SP.Data.HRTasksListItem" },
            "WorkflowOutcome": "Rejected",
            "Status": "Rejected",
            "PercentComplete": 1 
        };
        var itemUrl = _spPageContextInfo.webAbsoluteUrl + 
        "/_api/lists/getbyTitle('HRTasks')/items(" + TaskId + ")";
        dataService.post(itemUrl, JSON.stringify(data),TaskId).then(function (response) {
            alert("Rejected Successfully");
        });
    };
}]);

通过这种方式，我们可以使用 SharePoint REST API 更新与 listitem 关联的任务。