none
How to override behavior of the Cancel button in the ribbon and the form.

    Question

  • The default behavior of the Cancel button in the ribbon and the form on EditForm.aspx is to emulate the browser's Back button to return the user to the previous page.

    When editing an item in the Pages library, if the user clicks either Cancel button, I would like to return the user to the page view of the current item.

    Customizing EditForm.aspx does not seem to be a good option as it will overwrite part of the site definition.

    If I copy the content of EditForm.aspx and paste it into a new, custom edit form page, SharePoint will again warn about overwriting part of the site definition.

    The only other option I've found is to create a new Edit Form for each Content Type.  I'd like to avoid this approach since there are many Content Types in in the Pages library, which can lead to a lot of code maintenance.

    Are there any other alternatives?

    Thanks,

    -Dan


    • Edited by Dan.Kohls Tuesday, August 4, 2015 8:16 PM typo
    Tuesday, August 4, 2015 8:15 PM

Answers

  • I took some look into your need and came up with this code,

    It basically hides, ribbon based cancel button.

    then I have created my own input type and made SharePoint input types hidden.

    also, the back logic is there. if you need can tweak the code a bit.

    <script>
    
    function overrideCancel()
    {
    	//Custom input button
    	var input = document.createElement('input');
    	input.type = "button";
    	input.name = "Cancel";
    	input.value = "Cancel";
    	input.id = "custominput";
    	document.querySelectorAll('.ms-toolbar input[value=Cancel]')[1].parentNode.appendChild(input);
    	document.getElementById("custominput").setAttribute("class", "ms-ButtonHeightWidth");
    	
    	//Hiding already implemented cancel buttons
    	document.querySelectorAll('.ms-toolbar input[value=Cancel]')[0].style.display = "none";
    	document.querySelectorAll('.ms-toolbar input[value=Cancel]')[1].style.display = "none";
    	
    	//this is main logic to move history back
    	document.getElementById("custominput").setAttribute("onclick", "window.history.go(-1); return false;");
    }
    
    _spBodyOnLoadFunctionNames.push('overrideCancel');
    </script>
    
    <style>
    #Ribbon\.ListForm\.Edit\.Commit\.Cancel-Large
    {
    	display:none;
    }
    </style>

    It took some effort from my end but should surely help you.

    Let me know in case it solved your issue :)


    Regards,
    Rupesh Singh
    -------------------------------------------------------------
    Please don't forget to mark it as answered, if your problem resolved or helpful.

    Wednesday, August 5, 2015 4:51 AM
  • Hi Dan,

    1) Go to Editform.aspx of the page -> Add "&ToolPaneView=2" at the end of the url -> Click on page in ribbon -> Edit page.

    2) Add content editor webpart - >edit Source- > paste the code

    <script src="https://code.jquery.com/jquery-1.10.2.js"></script><script>
    var querystring = window.location.search.substring(1);  
    var parameters = querystring.split("&");
    var QueryString = Array();
    for (var i=0;i<parameters.length;i++)
    {
      QueryString[parameters[i].split("=")[0]] = parameters[i].split("=")[1];
    }
        var ID=unescape(QueryString["ID"]);
        var listName = "Pages";
        var url = _spPageContextInfo.webAbsoluteUrl;
     var redirecturl='';
        getListItems(listName, url,ID, function (data) {
        redirecturl=data.d.FieldValuesAsText.FileRef;
        }, function (data) {
            alert("Ooops, an error occured. Please try again");
        });
    
      var inputs = document.getElementsByTagName("INPUT");
      for (var i=0; i<inputs.length; i++)
      {
        if (inputs[i].value == "Cancel")
        {
          inputs[i].onclick =
           function () {
           document.location.href =redirecturl;
    };
        }
      }
    
    function getListItems(listName, siteurl,ID, success, failure) {
        $.ajax({
            url: siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items('"+ID+"')?$expand=FieldValuesAsText",
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            success: function (data) {
           
                success(data);
            },
            error: function (data) {
                failure(data);
            }
        });
    }
    </script> 

    3) Stop editing in page ribbon.

    Now on clicking the cance button, it should redirect to the page instead of pages library.

    Thanks.


    A'Kumar



    Wednesday, August 5, 2015 8:23 AM

All replies

  • I took some look into your need and came up with this code,

    It basically hides, ribbon based cancel button.

    then I have created my own input type and made SharePoint input types hidden.

    also, the back logic is there. if you need can tweak the code a bit.

    <script>
    
    function overrideCancel()
    {
    	//Custom input button
    	var input = document.createElement('input');
    	input.type = "button";
    	input.name = "Cancel";
    	input.value = "Cancel";
    	input.id = "custominput";
    	document.querySelectorAll('.ms-toolbar input[value=Cancel]')[1].parentNode.appendChild(input);
    	document.getElementById("custominput").setAttribute("class", "ms-ButtonHeightWidth");
    	
    	//Hiding already implemented cancel buttons
    	document.querySelectorAll('.ms-toolbar input[value=Cancel]')[0].style.display = "none";
    	document.querySelectorAll('.ms-toolbar input[value=Cancel]')[1].style.display = "none";
    	
    	//this is main logic to move history back
    	document.getElementById("custominput").setAttribute("onclick", "window.history.go(-1); return false;");
    }
    
    _spBodyOnLoadFunctionNames.push('overrideCancel');
    </script>
    
    <style>
    #Ribbon\.ListForm\.Edit\.Commit\.Cancel-Large
    {
    	display:none;
    }
    </style>

    It took some effort from my end but should surely help you.

    Let me know in case it solved your issue :)


    Regards,
    Rupesh Singh
    -------------------------------------------------------------
    Please don't forget to mark it as answered, if your problem resolved or helpful.

    Wednesday, August 5, 2015 4:51 AM
  • Forgot to mention, add this in a content editor web part of your Edit.aspx page.

    To add in CEWP, Go to list settings -->  Advance Settings --> disable showing of form in pop up

    now the edit form will not open in pop up.

    now go to edit form page and edit the page and add above given code in content editor web part.

    Once done, again Go to list settings -->  Advance Settings --> enable showing of form in pop up.


    Regards,
    Rupesh Singh
    -------------------------------------------------------------
    Please don't forget to mark it as answered, if your problem resolved or helpful.

    • Proposed as answer by Rupesh Singh Wednesday, August 5, 2015 4:55 AM
    Wednesday, August 5, 2015 4:55 AM
  • Hi Dan,

    1) Go to Editform.aspx of the page -> Add "&ToolPaneView=2" at the end of the url -> Click on page in ribbon -> Edit page.

    2) Add content editor webpart - >edit Source- > paste the code

    <script src="https://code.jquery.com/jquery-1.10.2.js"></script><script>
    var querystring = window.location.search.substring(1);  
    var parameters = querystring.split("&");
    var QueryString = Array();
    for (var i=0;i<parameters.length;i++)
    {
      QueryString[parameters[i].split("=")[0]] = parameters[i].split("=")[1];
    }
        var ID=unescape(QueryString["ID"]);
        var listName = "Pages";
        var url = _spPageContextInfo.webAbsoluteUrl;
     var redirecturl='';
        getListItems(listName, url,ID, function (data) {
        redirecturl=data.d.FieldValuesAsText.FileRef;
        }, function (data) {
            alert("Ooops, an error occured. Please try again");
        });
    
      var inputs = document.getElementsByTagName("INPUT");
      for (var i=0; i<inputs.length; i++)
      {
        if (inputs[i].value == "Cancel")
        {
          inputs[i].onclick =
           function () {
           document.location.href =redirecturl;
    };
        }
      }
    
    function getListItems(listName, siteurl,ID, success, failure) {
        $.ajax({
            url: siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items('"+ID+"')?$expand=FieldValuesAsText",
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            success: function (data) {
           
                success(data);
            },
            error: function (data) {
                failure(data);
            }
        });
    }
    </script> 

    3) Stop editing in page ribbon.

    Now on clicking the cance button, it should redirect to the page instead of pages library.

    Thanks.


    A'Kumar



    Wednesday, August 5, 2015 8:23 AM