How Can One Hide Dynamically Loaded Ribbon Buttons in SharePoint 2013 with JavaScript?

Question

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.

Answer 1

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.

Answer 2

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.