Approve listitem task from button with javascript

Question

I am trying to find out the right way to approve a listitem workflow task clicking on a button using JavaScript (client object model). An approver should be able to approve/reject his own task by clicking on a link or a button associated with the current item.

Answer 1

How to approve workflow task item using JSOM

The following example demonstrates how to approve task item using JSOM

function approveTask(listTitle,itemId, success,error){
    var ctx = SP.ClientContext.get_current();
    var list = ctx.get_web().get_lists().getByTitle(listTitle);
    var item = list.getItemById(itemId);
    item.set_item('Completed',true);
    item.set_item('PercentComplete',1);
    item.set_item('Status','Approved');
    item.set_item('WorkflowOutcome','Approved');
    item.update();
    ctx.executeQueryAsync(
      function() {
          success();
      },
      error
    );
}

Example

approveTask('Workflow Tasks',1,function(){
    console.log('Task has been approved');
},
function(sender,args){
    console.log(args.get_message());
});

Answer 2

var siteURL = "https://xxxxxxxxxxxxxxxxxxxx"; //Your site URL here
var varComments = 'Task approved from test'; //Approver comments
var varOutcome = 'Approve'; //Workflow flexi task outcome
var varTaskListName = 'Workflow Tasks'; //Workflow Tasks list name
var varTaskId = 44;    //Workflow task item ID
  
var webSvc = siteURL + "/_vti_bin/NintexWorkflow/Workflow.asmx";
var rqst = '<?xml version="1.0" encoding="utf-8"?>';
rqst += '<soap:Envelope xmlns:soap="http://www.w3.org/2003/05/soap-envelope" xmlns:m="http://nintex.com">'; 
rqst += '<soap:Header>';
rqst += '</soap:Header>';
rqst += '<soap:Body>';
rqst += '<m:ProcessFlexiTaskResponse2>';
rqst += '<m:comments>'+varComments+'</m:comments>';
rqst += '<m:outcome>'+varOutcome+'</m:outcome>';
rqst += '<m:spTaskId>'+varTaskId+'</m:spTaskId>'; 
rqst += '<m:taskListName>'+varTaskListName+'</m:taskListName>';
rqst += '</m:ProcessFlexiTaskResponse2>';
rqst += '</soap:Body>'; 
rqst += '</soap:Envelope>';
$.ajax({
    type: "POST",
    url: webSvc, 
    contentType: "text/xml;charset=UTF-8",
    data: rqst,
    dataType: "xml", 
    success: function(data,status,xhr) {console.log('OK: ' + status);},
    error: function (data) {console.log(data.responseText);}
});

Answer 3

Using JSOM you can update any list item.

In particular to approve a task item, you should update following fields

taskItem["WorkflowOutcome"] = "Approved";
taskItem["FormData"] = "Completed";
taskItem["Status"] = "Approved";
taskItem["PercentComplete"] = 1;
taskItem["Completed"] = true;