One-click approval of tasks in SharePoint Online

I was looking for a way to make it easier for users to approve SharePoint tasks, and settled on a great way to have an Approve and Reject link in the task email, which goes to a page I created that runs some JavaScript to approve/reject the task based on the parameters passed to it.  I've outlined how I did this below:

Step 1:  Create a page that will contain the JavaScript code

Create a page, I named mine ApproveReject.aspx, and add a content editor web part and put the following code into it:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>

<script type="text/javascript" src="_layouts/15/sp.js"></script>

<script type="text/javascript">

function getStringValue(strToParse, begin, end) {

 var strValue = "";

 var indexBegin = strToParse.indexOf(begin) + begin.length;

 strToParse = strToParse.substring(indexBegin);

 

 if (strToParse.indexOf(end) > 0) 

 {

 var indexEnd = strToParse.indexOf(end);  

 strValue = strToParse.substring(0, indexEnd);

 }

 else 

 {

  strValue = strToParse;

 }

   

 return strValue;

}

function getParameterByName(name) {

var url = window.location.href;

name = name.replace(/[\[\]]/g, "\\$&");

var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),

results = regex.exec(url);

if (!results) return null;

if (!results[2]) return '';

return decodeURIComponent(results[2].replace(/\+/g, " "));

}

function onSuccess(){

 var name = getParameterByName('name');

 var outcome = getParameterByName('action');

 if (outcome == "Approved") 

 {

  document.getElementById("approve-reject-message").innerHTML = "<h2>Thanks for approving the Award for " + name + "</h2><br/><br/>You can now close this tab.";  

 }

 else 

 {

  document.getElementById("approve-reject-message").innerHTML = "<h2>The Award has been rejected for " + name + "</h2><br/><br/>You can now close this tab.";  

 }

}

function onError(sender, args) {

 document.getElementById("approve-reject-message").innerHTML = "Error:  " + args.get_message();

}

function approveTask(listTitle,itemId,action,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('Checkmark',true);

item.set_item('PercentComplete',1);

item.set_item('Status',action);

item.set_item('TaskOutcome',action);

item.update();

ctx.executeQueryAsync(onSuccess, onError);

}

jQuery(document).ready(function ()

{

var taskUrl = getParameterByName('taskUrl');

var action = getParameterByName('action');

taskListName = getStringValue(taskUrl, 'Lists/', '/');

taskId = getStringValue(taskUrl, 'ID=', '&');    

    

   approveTask(taskListName,taskId,action,function(){

},

function(sender,args){

});

}); 

</script>

<div id="approve-reject-message">

</div>

Step #2:  Add links in your tasks to Approve or Reject

In the text of the task email, add a link for Approve and a link for Reject:

With the url as follows:

https://vivity.sharepoint.com/sites/demo/OneClick/SitePages/Approve%20or%20Reject.aspx?action=Approved&taskUrl=[%Task URL%]&msg=Thank%20you%20for%20approving%20this%20task!&mobile=0

where the query parameters are as follows:

action:  the action we're taking (Approved/Rejected)

taskUrl:  a link to the url of the task

name:  the name to be displayed in the message that appears

mobile:  required to ensure the page gets displayed in the standard (non-mobile) view