Skip to content
March 23, 2011 / red1s

SharePoint 2010 Ribbons


You’ll notice that SharePoint 2010 has newly created ribbons. These are representative of the new layout in Office 2010 and have been to a certain extent integrated into the new SharePoint 2010 user interface.

 

What I really like about the interface is that it is context based, so based on where you place your cursor SharePoint’s ribbon updates itself to show you the necessary options available to the user (based on permission and function)

 

The SharePoint 2010 Server ribbon has various components, as shown below:

SharePoint 2010 server ribbon components

The callout numbers in the figure point to the following specific components:

  1. Tab

  2. Group

  3. Control

  4. Contextual tab group

The next few sections briefly explain these components and their uses.

Tabs on the SharePoint 2010 Server Ribbon

Tabs are the root of the Server ribbon. They contain one or more groups, and contain similar functions. For example, in the image above the Page tab that is currently selected contains functions that pertain to working with the current page.

Contextual Tab Groups on the SharePoint 2010 Server Ribbon

Contextual tab groups are used to provide functions that are not global to the current context, such as the page. They appear only when certain circumstances have been met and contain one or more tabs.

For example, the ribbon in the image above shows the Library Tools contextual tab group, which appears only when inside a document library or, as in this case, when the List View Web Part on the current page that is associated with a document library is selected.

Contextual tab groups hide functionality and menu choices from the user when they are not available, and appear when applicable. Other examples of contextual tab groups include the Editing Tools contextual tab group that appears when editing a wiki page, or the Picture Tools contextual tab group that appears when a picture is selected in edit mode.

Groups on the SharePoint 2010 Server Ribbon

Every tab in the ribbon contains a series of one or more groups. Groups are used to associate controls with similar functionality. Each group is associated with a template that defines the layout of the group and how the group should appear based on the scale of the ribbon. The scale of the ribbon refers to situations where there are too many controls to show in the ribbon, for example, when the browser is not in a full-screen maximized state and is in a windowed state.

Controls on the SharePoint 2010 Server Ribbon

The ribbon would not be complete if users did not have anything to select or click. Controls are the items that live inside the ribbon that users can interact with. Controls reside within groups. These include things such as buttons, toggle buttons, check boxes, text boxes and many other controls. For a complete list of all the available controls, see Architecture of the Server Ribbon.

Each control definition contains a Command attribute that tells the ribbon infrastructure what to do when it is clicked or selected.

Server Ribbon Commands in SharePoint 2010

The Server ribbon handles click or selection actions by the user with commands.  This name is referenced in a control. At the core, commands contain two very important details:

  • Whether the current command is available For example, the Delete command is available only in a document library or if documents are selected.

  • What code should be run For example, the Delete command may use the SharePoint 2010 client-side object model to delete the item from the list, display a notification that the document was deleted, and refresh the List View Web Part on the page.

 

Below are a few Ribbon Types based on the Page or area you are within the site:

 

Browse Menu

image

 

Page Menu (with editing disabled)

image

 

Format Text (with Page editing enabled)

image

 

Insert Menu

image

 

Documents Menu

image

 

 

Library Menu

image

 

Options Menu

image

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: