0

I have a custom SharePoint designer new form where on cancel button (on ribbon), I want to give a confirmation box.

On clicking Yes, it should redirect to allitems.aspx and on clicking No it should remain on the form and do nothing.

I have implemented the following code.

$("#Ribbon\\.ListForm\\.Edit\\.Commit\\.Cancel-Large").removeAttr("onclick");
$("#Ribbon\\.ListForm\\.Edit\\.Commit\\.Cancel-Large").click(function(e){
    if (confirm('The data on this form might have changed. Are you sure you want to close this form?'))
    {
        return true;
    }
    else
    {
        e.preventDefault();
        e.stopImmediatePropagation();
        // Do nothing!
    }
});`

I get the confirmation box but whether clicking on Yes or No, it anyway redirects me to allitems.aspx.

0

Please return false in case of else condition.

function Confirm()
{
  var x = confirm("Are you sure ?");
  if (x)
      return true;
  else
    return false;
}
  • I've tried that, still on clicking no it redirects – Mayank Srivastava Jan 25 '17 at 10:41
  • How you have written redirect code, Could you please share here? – Virendra Kumar Jan 25 '17 at 10:54
  • I haven't written any redirection code, by default Sharepoint cancel button redirects to allitems.aspx. – Mayank Srivastava Jan 25 '17 at 10:56
  • As you can see in the first loc, I've even tried to override that by removing onclick attribute, but I guess it doesn't work – Mayank Srivastava Jan 25 '17 at 10:57
  • Have you checked in which condition it's going to If Block and when in else block. You can debug in different way- If {Redirect to page A} else {redirect to page B}, see how your code react in this case.. – Virendra Kumar Jan 25 '17 at 11:00
0

You are removing the default 'onclick' of the Cancel button so its click can't redirect you to "AllItems.aspx" page unless and until you redirect your page. Refer below code:

$("#Ribbon\\.ListForm\\.Edit\\.Commit\\.Cancel-Large").removeAttr("onclick");
$("#Ribbon\\.ListForm\\.Edit\\.Commit\\.Cancel-Large").click(function(e){
    if (confirm('The data on this form might have changed. Are you sure you want to close this form?'))
    {
        window.location = url;  //the url variable contains page location of "AllItems.aspx"
    }
});`

@Mayank, please try below code might it works.

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

function Cancel()
{
    if(confirm("Are you sure to leave the page?"))
    {
        window.location = url;
    }
    else
    {
        return false;
    }
}

_spBodyOnLoadFunctionNames.push('overrideCancel');
</script>

<style>
#Ribbon\.ListForm\.Edit\.Commit\.Cancel-Large
{
    display:none;
}
</style>
  • The click is redirecting me to allitems.aspx – Mayank Srivastava Jan 25 '17 at 17:14
  • The click which you set after removing default click is redirecting you to Allitems.aspx page, isn't it? – Divya Sharma Jan 25 '17 at 17:16
  • When I click cancel, a confirmation box appears. Then whether I click Yes or No, it redirects me to AllItems.aspx. I want this happening only on clicking Yes – Mayank Srivastava Jan 25 '17 at 17:18
  • Please add "return false;" in the else part of if condition. – Divya Sharma Jan 25 '17 at 17:22
  • I've tried that, it's the above answer – Mayank Srivastava Jan 25 '17 at 17:23
0

I have hidden the original button through css and created exactly the same custom button via javascript and jquery. It works great.

Here is 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.style = "top: -511px;left: -273px";
    cancelImg.src = "/_layouts/15/1033/images/formatmap32x32.png?rev=23";
    $("#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() });
}

function Cancel() {
    var url = _spPageContextInfo.webAbsoluteUrl + "/Lists/(ListName)/AllItems.aspx";
    if (confirm("Are you sure you want to close this form?")) {
        window.location = url;
    }
    else {
        return false;
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.