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)
- 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:
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:
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.
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.