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
