Architecture of the Server Ribbon

Applies to: SharePoint Foundation 2010

The Server ribbon in Microsoft SharePoint Foundation 2010 creates a consistent user interface for working with SharePoint objects. You can extend the ribbon declaratively using Server ribbon XML and simple ECMAScript (JavaScript, JScript), or you can use ribbon XML and a page component for more advanced scenarios.

Basic Objects in the Server Ribbon

The top-level elements in the ribbon are tabs. Tabs appear across the top of the page in a SharePoint site. Each tab organizes a set of groups. These groups contain sets of controls. Each group can contain multiple controls and has a label to identify each group. The controls inside the group include buttons, drop-down menus, check boxes, combo boxes, split buttons, and galleries. Each of these controls is tied to a unique command.

The Server ribbon is defined by using Server ribbon XML in a Feature manifest or a user custom action. The XML used for the ribbon defines each tab, group, and control. The Tab element contains one Groups element. Each Groups element has multiple Group elements. Inside the Group element is a single Controls element that contains multiple types of controls. The types of controls that are available are listed in the Controls in the Server Ribbon section. For a detailed explanation of ribbon XML, see Server Ribbon XML.

Server Ribbon Communication

The ribbon uses multiple objects to interact with the rest of the page. It must know which controls are enabled, the state of the controls, and when to refresh. The Server ribbon communicates by using the CommandDispatcher, PageManager, and PageComponent objects among others. Each of these objects plays an important role in interacting with the ribbon.

The PageManager initializes all of the controls and registers the PageComponent objects for the ribbon. One instance of the PageManager lives on the page.

The CommandDispatcher handles all of the PageComponent objects and the commands they can handle. When a command is received on the page, the CommandDispatcher receives the command and passes it to the correct PageComponent.

A PageComponent is created in ECMAScript (JavaScript, JScript) and handles commands passed by the CommandDispatcher. After the PageComponent is added to the page, you use JavaScript to create an instance of your PageComponent and register it with the PageManager. The PageComponent can then respond to the commands you defined in ribbon XML.

Controls in the Server Ribbon

The Server ribbon contains many types of controls. These can include simple controls, such as check boxes, buttons, and combo boxes. The controls can also be more advanced, such as a split button or flyout anchor. The following controls are available in the ribbon.

Control Type	Description
Button	A simple button used to perform an action.
Checkbox	A check box used to select an option.
Color Picker	A grid used to select a color or style.
Combo Box	A list used to select a value by clicking or typing.
Drop Down	A list used to select a value by clicking.
Flyout Anchor	A button with a down arrow used to open a menu.
Insert Table	A 10-by-10 grid used to specify the dimensions of a table.
Label	A line of text used to provide information.
Menu	A container used to show pop-up menus.
Menu Section	A section used to divide a menu. A menu section can have a title and contain controls.
MRU Split Button	A button used to execute a recently used menu action. This control uses the last action chosen from its submenu as the button action.
Spinner	A control used to insert a value by typing or using the arrow keys to cycle through the values.
Split Button	A control used as both a button and a menu.
Text Box	A control used to enter text.
Toggle Button	A button used to toggle between an on and off state.