Hide/disable ribbon bar buttons with client-side code

Question

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.

Answer 1

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

Answer 2

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>

Answer 3

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.

Answer 4

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

Answer 5

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