Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I would like to know how to hide specific buttons from a SharePoint 2013 ribbon particularly when the ribbon buttons are loaded dynamically using JavaScript. For example, when the "List" tab of a ribbon is clicked, how can I hide the "Quick Edit", "Create View", and associated "List" buttons?

My requirement is to rewrite an existing JavaScript function which hides elements in a SP 2007 toolbar to SP 2013 such that the analogous 2013 Ribbon elements are hidden. The goal is to keep the signature of the original function unchanged and, ideally, avoid any additional JavaScript libraries such as jQuery. The rational for all of this is that calls to these functions were embedded in many, many Content Editor Web Parts and my client would like the migrated CEWP web parts to work without changing their individual contents.

I found this blog entry on triggering ribbon change events in SP 2010 by Dennis George, but it does use jQuery to do the event triggering and I had issues getting the "ribbontabselected" event to fire when tab selection changed (I'm not sure if this is my error or something that changed in SharePoint 2013). Had I gotten this to work, I would have subscribed to the "ribbontabselected" event and set the CSS display of the appropriate elements to 'none'. So to clarify the question a bit, using JavaScript to manipulate CSS dynamically is fine for my needs.

I checked the SP Ribbon docs on MSDN and didn't find quite what I was looking for.

Final Solution

The assistance from RJ and Aveenav below led me to a fairly straightforward solution which was to simply modify the existing JavaScript function mentioned in the question such that it dynamically adds an HTML style tag which sets the display of the desired ribbon elements to 'none'. As long as this is accomplished before the ribbon elements are loaded, the display setting will be honored (tested in IE 9 and Firefox 28).

In order to ensure that the dynamic style snippet gets loaded at the right time, I created a helper function to subscribe to the 'DOMContentLoaded' event which looks like this (inspired by Nicholas Zackas' "Professional JavaScript for Web Development"):

function subscribe(element, type, handler) {
    if (type && handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        }
        else if (element.attachEvent) {
            element.attachEvent('on' + type, handler);
        }
        else {
            element['on' + type] = handler;
        }
    }
};

This helper method was then used in the migrated version of the original function:

function hideListViewToolbarItems() {
  var index = 0,
      args = arguments,
      arg = '';

  function hide() {
    var sheet = document.createElement('style'),
        styleMap = {
            'edit in datasheet': '#Ribbon\\.List\\.ViewFormat\\.Datasheet-Large {display:none;}',
            'quick edit': '#Ribbon\\.List\\.ViewFormat\\.Datasheet-Large {display:none;}',
            '<%additional "friendly" names%>': '<%corresponding ribbon element IDs%>'
        };
    sheet.type = 'text/css';
    sheet.innerHTML = '';
    for (index; index < args.length; index++) {
        arg = args[index];
        sheet.innerHTML += styleMap[arg] + '\n';
    }
    document.body.appendChild(sheet);
  }
  subscribe(window, 'DOMContentLoaded', hide);
}

This function rifles through the implicit JS "arguments" property and looks for friendly names which then trigger the hiding of ribbon elements simply by setting the ribbon element's CSS display to none via a dynamic style snippet. The style snippet is appended to the HTML body tag when DOMContentLoaded is fired. One thing to keep in mind when referencing dotted SharePoint IDs in JavaScript is that the dots should be escaped with a backslash in CSS, hence the backslash itself must also be escaped or you can use the CSS "endsWith" ($=) as mentioned by Aveenav below as long as the target browser supports it.

share|improve this question

2 Answers 2

up vote 1 down vote accepted

To add to Aveenav's answer, if you need the trigger to be purely JS, why not add the CSS in the page head via the native JavaScript API?

Without jQuery it would look something like:

var yourCss = document.createElement('style');
yourCss.type = 'text/css';
yourCss.innerHTML = '#RibbonContainer a[id$="Datasheet-Large"] ... { display: none !important; }';
document.getElementsByTagName('head')[0].appendChild(yourCss);

But take into account which browsers support CSS3 selectors for the "attribute ends with" selector: Can I use CSS3 selectors?

You should be relatively safe, but only you and your client know your client's policy on older versions of IE.

share|improve this answer
    
Thanks RJ and Aveenav. I used RJ's technique to add a style snippet to the head of the document. –  Mike Atkisson May 9 at 0:35

Since you don't want to use jQuery, you can use CSS to hide the ribbon buttons.

For ex.

#RibbonContainer a[id$="Datasheet-Large"], #RibbonContainer a[id$="Datasheet-Medium"], #RibbonContainer a[id$="CreateView-Large"], #RibbonContainer a[id$="CreateView-Medium"] #RibbonContainer span[id$="ModifyView-Medium"] {
    display: none !important; 
}

Use firebug/IE tools to find the element's id and use id$ (for endsWith) since those Ids created by SP are not really CSS selector-friendly.

In addition to hiding it with CSS, You can also use CSOM to get ribbon elements and remove from DOM.

share|improve this answer
    
First, thanks for the CSS endsWith tip. Your solution addresses part of the question posed in the title and I would upvote your answer if I had enough reputation. However, I do need the solution to be JS only so that the function mentioned in the details of the question is the only thing that needs to be modified. I did look for a JSOM solution, but didn't find an obvious answer via google. Do you know of a specific JSOM solution? –  Mike Atkisson May 8 at 22:50
    
Take a look at: sharepoint247.wordpress.com/2013/05/24/… Those ribbon tabs fire an _ribbonStartInit events. You can try to manipulate that event. There are also 'addEventListener' function that you can bind to your elements and fire your callback function. google.com/#q=sharepoint+_ribbonStartInit –  Aveenav May 8 at 23:51

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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