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:

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

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:

image

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

image

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>