Override Default Cancel Button on Ribbon in SharePoint 2013 or SharePoint 2016

sharepoint 2013 cancel button redirect
InfoPath alternatives for form designing SharePoint

In this SharePoint 2013 tutorial we will explore, how to Override default cancel button on a SharePoint form on the ribbon under Edit tab in the commit section. I would like to share my knowledge on this and be of some help there by saving your time.

Implementation:
First, we remove the default Cancel button from the ribbon and add a new custom Cancel button in the same place with the same classes and the same image.

The only thing is when a Cancel button is clicked; a certain set of operations were performed before redirecting the page back to the source.

Here, I have demonstrated this just by showing a confirmation box on clicking Cancel button and redirected the form back to the list view.

Cancel button is given below.

override default cancel button sharepoint 2013
override default cancel button sharepoint 2013

Following Cancel button, we have the confirmation box, which appears on hitting Cancel.


sharepoint 2013 cancel button redirect
sharepoint 2013 cancel button redirect

To achieve this, we have a code given below, which can be used as it is.
In the document.ready, I have called the overrideCancel() function.

$(function () {

overrideCancel();

});

Inside the override function, I have taken care of the required classes, which is required by Cancel button. I creates all the required elements on runtime, which will hold the button.

Out of these elements we have the image element. You have to get an image of Cancel button and save it somewhere in the site. Therefore, we specify the path of the image in the code.



function overrideCancel() {

var input = document.createElement(‘a’);

input.title = “Cancel”;

input.role = “button”;

input.id = “custominput”;

$(‘.ms-cui-group:first’).find(‘.ms-cui-row-onerow:first’).append(input)

$(“#custominput”).addClass(“ms-cui-ctl-large”);

var firstSpan = document.createElement(‘span’);

firstSpan.id = “fSpan”;

$(“#custominput”).append(firstSpan);

$(“#fSpan”).addClass(“ms-cui-ctl-largeIconContainer”)

var innserSpan = document.createElement(‘span’);

innserSpan.id = “iSpan”;

$(“#fSpan”).append(innserSpan);

$(“#iSpan”).addClass(“ms-cui-img-32by32”);

$(“#iSpan”).addClass(“ms-cui-img-cont-float”);

$(“#iSpan”).addClass(“ms-cui-imageDisabled”);

var cancelImg = document.createElement(‘img’);

cancelImg.src = _spPageContextInfo.webAbsoluteUrl + “/Style Library/CSS/Images/CancelRibbon.png”;

$(“#iSpan”).append(cancelImg);

var lbl = document.createElement(‘span’);

lbl.id = “lblSpan”;

$(“#custominput”).append(lbl);

$(“#lblSpan”).addClass(“ms-cui-ctl-largelabel”);

$(“#lblSpan”).text(“Cancel”);

$(“#custominput”).click(function () { Cancel() });

}

Also you can read some SharePoint 2013 jQuery articles:
SharePoint 2013 Create Custom Save and Redirect Button On A SharePoint Form

Get and Set Variable Values from One JavaScript File to another JavaScript File Using Local Storage

Different operations Using JQuery like hide show disable and set specific value to html control

Finally, I have written the code for Cancel function call, which is when called will display the confirmation box and on OK, click the form, which will redirect otherwise on clicking Cancel. It is just the confirmation box, which is closed and the form remains in the same state.

function Cancel() {

var url = _spPageContextInfo.webAbsoluteUrl + “/Lists/ListName/AllItems.aspx”;

if (confirm(“You have clicked on the overridden Cancel button, are you sure you want to close this form?”)) {

window.location = url;

}

else {

return false;

}

}

Hope, this article helps everyone to achieve something of this kind.

Similar SharePoint 2013 Tutorials


About Akash Kumhar

I am Akash Kumhar a SharePoint Consultant.

View all posts by Akash Kumhar →

Leave a Reply