Basics: Customising the SP2010 Ribbon

An obvious change in the SharePoint 2010 User Interface is the implementation of the Office Ribbon, which was not available in the 2007 version of the platform. The Ribbon is an excellent addition for the end user since it provides a consisten way of interaction with the elements available on the page.

The Ribbon is made up of tabs, which in turn include groups and finally, controls. Controls do not appear and disappear, in order to avoid the phenomenon of the end users trying to find something they think was there before. Instead, controls are enabled and disabled according to context. Tabs however do appear and disappear according to context.

One thing to remember about the Ribbon, if you’re a SharePoint 2007 developer, is that any custom actions that you may have developed on your SharePoint 2007 installation, will appear as buttons in a custom commands tab on the SharePoint 2010 Ribbon.

In order to customise the Ribbon you need to:
1. Create a new Empty SharePoint Project
2. Add a Feature (rename, retitle, etc)
3. Add a new item, choose Empty Element (rename)

All customisations will take place in the new Empty Element. This is just an xml file and you will be using XML to customise your Ribbon. Also, you should remember that when you need to customise the Ribbon, you do not start with an empty Ribbon or with the default one. You work on a new file that will be merged with the default cmdui.xml in order to present the users with a Ribbon that includes your customisation along with the default elements.

For a fairly basic example of how to add a single button on the SP2010 Ribbon, please jump here.

Things that the developer will need to keep in mind when playing with the Ribbon:
1. the Ribbon supports up to 100 tabs but anything above 7 will confuse the end users. Keep the maximum number of tabs around 5.
2. the Ribbon is made up of CSS, AJAX, on demand Javascript and caching. In order to understand the CSS that runs the Ribbon, be sure to study the classes that start with ms-cui in the corev4.css CSS file.
3. the controls that are supported by the Ribbon are fairly specific and limited but they do include most of what the developer will require. The list of supported controls follows this list of basics.
4. you can customise the Ribbon with XML only operations or with a JavaScript Page Component if you’re looking to add more complex code.
5. there are some numbers that you need to keep in mind: the built-in tabs use a sequence of 100 and the built-in controls use a sequence of 10, so you need to avoid using any multiples of 100 for your tabs and 10 for your groups. The Sequence attibute is optional, however, if you don’t supply one, your controls will be placed last.
6. the Location attribute is responsible for where your customisations will appear. Possible options are: CommandUI.Ribbon (which, will make your customisations visible everywhere), CommandUI.Ribbon.ListView (which, will make your customisations visible when displaying lists), CommandUI.Ribbon.EditForm (which, will make your customisations visible on the Edit Form), CommandUI.Ribbon.NewForm (which, will make your customisations visible on the New Form) and CommandUI.Ribbon.DisplayForm (which, will make your customisations visible on the Display Form).
7. the RegistrationId and RegistrationType are used to define the set of content that the customised Ribbon will appear for. The RegistrationType can be a list, content type, file type or progId. The RegistrationId is mostly used with the content type RegistrationType to further customise when the custom Ribbon will appear.

Supported Ribbon Controls (copied from the WROX book):
Button – A simple button that can be pushed.
Checkbox – A checkbox that either can have a label or not.
ColorPicker – A grid of colors/styles that can be used to choose a color.
ComboBox – A menu of selections that can be typed or selected.
DropDown – A menu of selections that can be selected by clicking.
FlyoutAnchor – An anchor button that includes a button that triggers a fl y-out menu.
InsertTable – A 10×10 grid of boxes used to specify dimensions for a table.
Label – A line of text.
Menu – A container for showing popups. It can be put inside of other controls that show menus, such as the FlyoutAnchor.
MenuSection – A section of a menu. It can have a title and controls.
MRUSplitButton – A split button control that remembers the last item that was chosen out of its submenu and bubbles it up into its “button” part.
Spinner – Allows the entering of values and “spinning” through them using the up and down arrows.
SplitButton – A control with a button and a menu.
Textbox – A box where text can be entered.
ToggleButton – A button with an on/off state.

A simple example of how to customise your SP2010 Ribbon has already been mentioned above. Jump here to read the example. More complex examples will appear as they become available.