Hiding Inactive Ribbon Commands in SharePoint 2010

The SharePoint ribbon is still new to some end users who are still using Office 2003 or have limited knowledge about Office in general. I have on several occasions heard that the amount of options made available to the user are daunting.

In this post, I am looking at removing the ribbon commands that are unavailable for the user, or “greyed out” and also removing the entire group should none of the commands in that group be available.

The whole purpose of this is to increase usability for the end users and I am fully aware that this will not be everyone’s cup of tea, so like it or leave it. I would definitely recommend end user training over technical implementations, but the combination of these worked well for clients of mine in several occasions.

Customizing the Ribbon

First of all, you can add new tab sections, remove existing tabs, limit what options are available to the rich-text editor and add your own context-driven groups.

Chris O’Brien has an excellent series of posts on ribbon customizations, which can be read at:

• Customizing the ribbon (part 1) – creating tabs, groups and controls
• Adding ribbon items into existing tabs/groups (ribbon customization part 2)
• Ribbon customizations - dropdown controls, Client Object Model and JavaScript Page Components
• Customize the ribbon programmatically from web parts and field controls

For information on how to customize the editing options for the rich text editor, check out Waldek Mastykarz’s blog entries:

• Consistent content authoring in SharePoint 2010 Rich Text Editor
• Fool-proof consistent content authoring in SharePoint 2010 Rich Text Editor

Hiding Inactive Commands and Groups

If a read-only user uses the ribbon on a team site, he/she will see a set of options that are not available:

Running a small amount of jQuery and CSS, the user is instead presented with the following options:

Implementation:

The inactive links in a ribbon is attributed with the CSS class “ms-cui-disabled” and we can hide these with a CSS stylesheet as:

   1: <style type="text/css">

   2: a.ms-cui-disabled

   3: {

   4:     display: none !important;

   5: }

   6: </style>

Then, a jQuery function checks to see what tab groups have only hidden content and hides these. In addition, the hidden tab actions containers are removed so that all controls are top aligned.

   1: function checkRibbon() {

   2:     // Loop the tab groups

   3:     $("div.ms-cui-tabContainer ul li.ms-cui-group").each(function () {

   4:  

   5:         var obj = $(this);

   6:  

   7:         // How many links in total in this group?

   8:         var allLinks = $("a", obj).length;

   9:         

  10:         // How many are disabled?

  11:         var disabledLinks = $("a.ms-cui-disabled", obj).length;

  12:  

  13:         // If all links are gone, hide the ribbon group

  14:         if (allLinks == disabledLinks) {

  15:             obj.hide();

  16:         }

  17:         else {

  18:             // Some are active, show the group

  19:             obj.show();

  20:  

  21:             // Remove the container for inactive controls so that all 

  22:             // controls are top aligned

  23:             $("a.ms-cui-disabled", obj).each(function () {

  24:                 if ($(this).parent().attr("class") == "ms-cui-row") {

  25:                     $(this).parent().hide();

  26:                 }

  27:             });

  28:         }

  29:  

  30:         // Personally, I do not like the pages view on the page editing 

  31:         // section and the ID is in a format that do not allow direct 

  32:         // removal in CSS. Very optional.

  33:         $("span", obj).each(function () {

  34:             if ($(this).attr("id") == 

  35:                     "Ribbon.Library.CustomViews-LargeMedium-2-2") {

  36:                 $(this).hide();

  37:             }

  38:         });

  39:     });

  40: }

  41:  

  42: // Track current selected ribbon tab

  43: var ribbonSelected;

  44:  

  45: function checkRibbonState() {

  46:     // Has the ribbon tab changed or has the ribbon never been set up?

  47:     var id = $("li.ms-cui-tt-s").attr("id");

  48:     if (ribbonSelected != id)

  49:     {

  50:         ribbonSelected = id;

  51:         checkRibbon();

  52:     }

  53: }

  54:  

  55: // Start the watcher for ribbon select. Decrease interval if you find 

  56: // client has performance issues, I found none during testing

  57: function beginCheckRibbon() {

  58:     // Increase parameter from 10 up if you have performance issues

  59:     var checkRibbonStateInterval = setInterval("checkRibbonState()", 10); 

  60: }

  61:  

  62: // Start the watcher when the page has finished loading

  63: $(document).ready(function () {

  64:     setTimeout("beginCheckRibbon()", 500);

  65: });

Last, I add a CSS style to hide the ribbon inside wrapper until the script has determined its visibility, otherwise the tab “jumps” around while the script is executed.

   1: <style type="text/css">

   2: div.ms-cui-tabContainer ul li.ms-cui-group

   3: {

   4:     display: none;

   5: }

   6: </style>