SharePoint on the Client : Working with the Ribbon

Recipe #1: Hidding WebParts Context Ribbon tabs


In many custom applications it is not desirable to have the full set of options the ribbon provides for 'Read Only' users. Here we show how to prevent contextual tabs from being added to the ribbon.

Contextual Ribbon explained

The SharePoint ribbon shows dynamic tabs/buttons depending on the user's permissions and the selected web part.

In the example below the ribbon's initial tab is set depending if the user has edit permissions or not:

Initial State with Read rights Initial State with Edit rights
Browse tab selected by defaultPage tabe selected by default

If the user activates a webpart, a set of tabs are added to the ribbon:

Contextual tabs inserted when you click on the webpart


This behavior is triggered by a click inside a web part. An inspection of the markup revealed the event handler is set up at the cell level of the webpart table:

event handlers

By clearing the event handlers we prevent the WpClick function from running.

//jQuery selector : all cells in all webparts
var webpartCells = $('td[id*="WebPart"]');

// Clear event handlers


The approach taken here to clear the event handlers might seem a bit outdated, jQuery has an unbind method that may be a better option.


  1. jQuery Unbind
  2. Manipulating the ribbon in SharePoint 2010 with JavaScript: Part 1

comments powered by Disqus


Under Construction

About Me

Martin here. I'm a developer by choice. Focused in SharePoint & JavaScript.

  • Follow me on Twitter