Microsoft SharePoint 2010 Web Applications : Presentation Layer Overview - Ribbon (part 1)

With SharePoint 2010, the biggest single change from a user interface perspective is the introduction of the ribbon. With previous versions, controls and menus were spread between a few components. For example, the ListViewWebPart, which was commonly used to display list data, included its own menu system. However, when it came to managing publishing pages, a separate page editing toolbar was used. With SharePoint 2010, both of these features are delivered via the ribbon, providing a continuity of user experience between SharePoint and other Microsoft Office products.

1. Ribbon Architecture

To set the stage for further discussion on how the ribbon can be customized, let’s take a look at the underlying architecture and the elements that are involved.

For the most part, the ribbon is defined using XML with client functionality being provided via JavaScript. Most of the functionality for the ribbon as it operates out of the box can be found in a number of files: the client-side script is contained in the file %SPROOT%\ TEMPLATE\LAYOUTS\CUI.js, with the majority of the configuration being found in %SPROOT%\TEMPLATE\GLOBAL\XML\CMDUI.XML. An examination of the configuration file reveals the key elements that make up the ribbon:

Tabs

The ribbon uses tabs to show or hide groups of controls. Tabs generally refer to a particular functional area, and their visibility can be programmatically toggled so as to reduce the number of irrelevant options presented to users. Visibility can only be toggled for tabs; you can’t hide an individual control or group of controls within a tab. This is a key design element of the ribbon because it helps to reduce user confusion by ensuring that the same controls always appear in the same place.

Groups

Each tab can contain many controls. So that these controls can be further grouped into logical categories, individual controls must exist within a group.

Templates

Groups make use of templates to determine the placement of individual controls within a group. These templates can be shared between groups and assist in providing a consistent user experience.

Controls

Controls are the lowest level of user interface element that can be added to the ribbon. The types of controls are well-defined and cannot be extended; this ensures consistency of user experience. Some of the most commonly used controls include buttons, checkboxes, and drop-downs. A few task-specific controls include a color picker and an insert table control that displays a grid that can be used to specify the dimensions of a table.

Contextual Tabs

In addition to the preceding components that are the basis of the ribbon user interface, you’ll also see contextual elements such as ContextualTabs and ContextualGroup. As mentioned, tabs can be hidden when not required. However, one of the design principles behind the ribbon is that commands should be easily discoverable. As a result, tabs should not be hidden in real time. For example, if a tab contains controls for editing images, the tab should not be hidden when no images appear on the page.

Although this makes sense from a command discoverability perspective, it also means that sometimes more tabs are available than are absolutely necessary. To get around this problem, the ribbon includes the contextual group, which can contain tabs that should be visible only if a specific action is performed in the user interface. To use our image example, if the user selects an image on the page, the Image Editing Tools contextual group becomes visible, giving access to the required tabs. The difference between using tabs within a contextual group and standard tabs is that a contextual group highlights the fact that the tabs have been added and includes a group name that helps users to establish the context of the tabs.

Scaling

One other aspect of the ribbon that is also defined using XML is scaling. Another key design principle of the ribbon is the idea of spaciousness. Looking back to older products such as Excel 95, recall that the user interface consisted of many square buttons, each with a different icon. For users familiar with the product, this didn’t present an issue because they understood what the icon meant; for new users, these aspects of the user interface meant a steep learning curve. The spaciousness of the ribbon allows as much descriptive information to be added to a control as possible. Rather than using a small button with an icon, a larger button with a more illustrative icon and a text description of the command are used. For new users, this makes life much easier.

To provide user interface designers with control over how commands are represented when the ribbon is resized, each tab must define scaling rules for each group within the tab. This allows user interface designers to prioritize certain commands at the expense of others if space is limited on the page. You can see this at work by navigating to a SharePoint page that contains a number of commands in the ribbon and then resizing the browser window. Generally speaking, the controls on the right side of the page will reduce in size, and the controls in the first group will retain their presentation.

2.Extending the Ribbon

You can add controls to the ribbon in a few ways: you can either add the controls declaratively using an elements file, or you can programmatically add controls using custom code. Let’s look at how to add a custom tab declaratively.

1. Use the Example project file that we created earlier. Choose Project | Add New Item. From the Add New Item dialog, select Empty Element. Name the item MyNewTab, as shown:

   

2. Add the following code to the Elements.xml file in the MyNewTab folder:

       <?xml version="1.0" encoding="utf-8"?>
       <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
         <CustomAction Id="Example.CustomTab" Location="CommandUI.Ribbon"
                       RegistrationType="List" RegistrationId="101">
         </CustomAction>
       </Elements>
   

   CustomAction elements are used to add command buttons and other elements to the user interface. The Location attribute dictates where the commands will be added. Since our custom tab will be added to the ribbon, we’ve used the location CommandUI.Ribbon.

   Tip

   For a complete list of locations, see http://msdn.microsoft.com/en-us/library/bb802730.aspx.

   
   

   CustomActions can optionally be bound to list types; in our example, we’re using type 101, which refers to the Document Library list type. You can also bind a custom action to a specific content type. 

3. Within the CustomAction element, add the following code:

   <CommandUIExtension>
         <CommandUIDefinitions>
           <CommandUIDefinition Location="Ribbon.Tabs._children">
             <Tab Id="Example.CustomTab" Title="Example"
   Description="Demo tab for Example" Sequence="501">
             </Tab>
           </CommandUIDefinition>
         </CommandUIDefinitions>
       </CommandUIExtension>
   

   We’re creating a Tab element. Because we want to add a new tab to the ribbon, we’re setting the Location attribute of the parent CommandUIDefinition element to Ribbon.Tabs._children. If we were adding a group to an existing tab or a control to an existing group, we’d set the Location to an appropriate value such as Ribbon .ListItem.New.Controls._children to add a control to the New group in the ListItem tab.

4. Within the Tab element, add the following code:

   <Scaling Id="Example.CustomTab.Scaling">
     <MaxSize Id="Example.FirstDemoGroup.MaxSize"
              GroupId="Example.FirstDemoGroup"
              Size="OneLarge"/>
     <Scale Id="Example.FirstDemoGroup.Scaling.CustomTabScaling"
            GroupId="Example.FirstDemoGroup"
            Size="OneMedium" />
   </Scaling>
   <Groups Id="Example.Groups">
     <Group Id="Example.FirstDemoGroup"
            Description="Contains Demo controls"
            Title="Demo Group"
            Sequence="52"
            Template="Ribbon.Templates.SingleButton">
       <Controls Id="Example.FirstDemoGroup.Controls">
       </Controls>
     </Group>
   </Groups>
   

   We’re performing two actions in this step. First, we’re specifying how the groups within our tab should scale. For each group, a MaxSize and a Scale element should be added to the Scaling group. The MaxSize element defines the default template that should be used when there are no space constraints. The Scale element defines the template that should be used when there is insufficient space to display the template reference in the MaxSize element.

   The second action that we’re performing is to define the groups that make up the tab. Each Group element has a Template attribute that is used to specify the template that will be used to lay out the group controls within the ribbon.

5. Within the Controls element, add the following code:

   <Button Id="Example.FirstDemoGroup.HelloWorld"
           Sequence="15"
           Image16by16="/_layouts/images/NoteBoard_16x16.png"
           Image32by32="/_layouts/images/NoteBoard_32x32.png"
           Description="Displays a Hello World message"
           LabelText="Hello World"
           TemplateAlias="c1"/>
   

   This addition is relatively straightforward: we’re adding a button control to our group. One thing worth noting is the TemplateAlias attribute; as you’ll see, this value is used to hook controls up to positions within the template that’s specified in the Group element.

6. After the CommandUIDefinition element, add the following code:

   <CommandUIDefinition Location="Ribbon.Templates._children">
     <GroupTemplate Id="Ribbon.Templates.SingleButton">
       <Layout Title="OneLarge" LayoutTitle="OneLarge">
          <Section Alignment="Top" Type="OneRow">
            <Row>
             <ControlRef DisplayMode="Large" TemplateAlias="c1" />
            </Row>
          </Section>
        </Layout>
       <Layout Title="OneMedium" LayoutTitle="OneMedium">
          <Section Alignment="Top" Type="OneRow">
            <Row>
             <ControlRef DisplayMode="Medium" TemplateAlias="c1" />
            </Row>
          </Section>
        </Layout>
     </GroupTemplate>
   </CommandUIDefinition>
   

   In this section, we’re defining a template for use by our custom group. Things to notice in this snippet are the TemplateAlias attributes, which are used to hook up the ControlRef elements in the template to the actual controls in the group. Also notice the two layout elements; each template can contain multiple layout elements. Effectively, a template is a collection of layouts, and groups can be bound to a maximum of two layouts: one layout to use when there are no space restrictions and another to use when space is restricted.

7. We can now deploy our customization. Choose Build | Deploy Example. Using the browser, navigate to the demo site that we created earlier, and from the navigation pane select the MyCustomPages document library. Our new Example tab will be visible within the ribbon, as shown: