Tuesday, June 27, 2017

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:

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