4

In SharePoint 2013, I'm trying to figure out how to hide or disable the Cancel button in the ribbon for the default form (NewForm) for a document library. Looking at the form source, I think this is the HTML element I'm after (ID of Ribbon.DocLibListForm.Edit.Commit.Cancel-Large):

<a class="ms-cui-ctl-large" id="Ribbon.DocLibListForm.Edit.Commit.Cancel-Large" onclick="return false;" href="javascript:;" mscui:controltype="Button" aria-describedby="Ribbon.DocLibListForm.Edit.Commit.Cancel_ToolTip" role="button" unselectable="on"><span class="ms-cui-ctl-largeIconContainer" unselectable="on"><span class=" ms-cui-img-32by32 ms-cui-img-cont-float ms-cui-imageDisabled" unselectable="on"><img class="" style="top: -511px;left: -273px;" unselectable="on" src="/_layouts/15/1033/images/formatmap32x32.png?rev=23"/></span></span><span class="ms-cui-ctl-largelabel" unselectable="on">Cancel</span></a>

I've tried various forms of the jQuery code:

$('#Ribbon.DocLibListForm.Edit.Commit.Cancel-Large').hide();

But that doesn't seem to have any effect. I believe I'm able to actually locate the object in the DOM because the code snippet:

var myObj = $('#Ribbon.DocLibListForm.Edit.Commit.Cancel-Large');
alert("myObj="+myObj);

... does populate the variable with an object. Also, I tried the .disable() method which interestingly resulted in the error "Object doesn't support property or method 'disable'", so that also leads me to believe I'm able to find the element ... just not hide it.

I've seen server-side solutions to accomplish this posted here, but I'm limited to coming up with something in JavaScript. Any advice is appreciated.

  • What version of jquery are you using? Try $(object).toggle() – Mike Sep 22 '14 at 17:30
  • jQuery version is 1.11.1. I tried .toggle() and .css("display", "none"), without any luck, I'm afraid. – Shawn Sep 22 '14 at 19:06
  • #s4-ribbonrow { visibility: hidden; } is the code i tried. its working. – userAZLogicApps Oct 26 '18 at 11:34
6

here the answer:

<script type="text/javascript">
    function hideEdit() {
        var edit = document.getElementById("Ribbon.ListForm.Display.Manage.EditItem-Large");
        edit.style.display = "none";
    }       
    _spBodyOnLoadFunctionNames.push("hideEdit");
</script>

Or

Enable/Disable ribbon button based on current item value of a field

  • That seemed to do the trick! :-) – Shawn Sep 22 '14 at 21:36
  • great! :) @Shawn – Andres Williams Sep 22 '14 at 21:40
4

I was able to do this using pure CSS, but had to escape the "." As follows:

<style type="text/css">
#Ribbon\.ListForm\.Display\.Manage\.EditItem-Large  {display:none !important;}
</style>
2

Did you mean EditForm.aspx? Cause for Doc libaries there's no NewForm.aspx

To hide it using CSS:

#Ribbon a[id$="Cancel-Large"] {
    display: none !important;
}

To hide it using jQuery:

$("#Ribbon a[id$='Cancel-Large']").hide();

I would suggest using a combination of both and use remove() instead of hide(). You could add the jQuery script using JSLink or Script editor.

  • Sorry, yes ... it is EditForm.aspx. But this didn't seem to solve it either. However the posting by Andres above seems to work as required. – Shawn Sep 22 '14 at 21:38
0

SharePoint Loads the ribbon at last and your jquery/javascript code to hide the cancel button is executed earlier. Write your code inside settimeout method.

E.g.

setTimeout(function() { $('#Ribbon.DocLibListForm.Edit.Commit.Cancel-Large').hide(); }, 5000);
  • Sorry, but that doesn't seem to work either. The code where I'm attempting to manipulate this is within a $(document).ready(function() {}); block, which I thought would not execute until the page is loaded (and the fact that my var myObj = $('#Ribbon.DocLibListForm.Edit.Commit.Cancel-Large'); test appears to be finding something would seem to indicate that the object is in the DOM at the time the code executes. But I did try your suggestion to no avail, I'm afraid. – Shawn Sep 22 '14 at 19:27
0

Folks,

Create a new js file and name it as DetailsView.js. Add the below script to it

window.onload = function () {

if (window.location.href.indexOf("user.aspx?obj") > -1) {

document.getElementById('Ribbon.Permission.Manage.Inherit-Large').style.display = "none";

} };

Here is a post explains well with sample script to do the same on any page. http://www.sharepointcollabs.com/2017/05/hide-ribbon-in-sharepoint-online-using.html

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.