Override Default Cancel Button On Ribbon

This time, I ran into a requirement, where I have to override the 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.

Here, I am removing the default Cancel button from the ribbon and adding 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 redirecting the form back to the list view.

Cancel button is given below..

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

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() });
}

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 helps everyone to achieve something of this kind.