Building Block: Server Ribbon

Article
10/20/2016

Applies to: SharePoint Foundation 2010

The Server ribbon in Microsoft SharePoint Foundation creates a consistent user interface (UI) when working with SharePoint objects. The top-level elements in the ribbon are Tabs. Tabs appear across the top of the page in a 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 operated by a unique command.

Object Model for the Server Ribbon

The ribbon uses both the ECMAScript (JavaScript, JScript) object model and the server object model.

Server Objects

IRibbonMenu – Represents the interface that is used to implement the ribbon.
SPRibbonButton – Represents a button inside the ribbon.
SPRibbonCommand – Represents a command that is handled by a control on the ribbon.
SPRibbonMenu – Represents a menu that is present on the ribbon.
SPRibbonMenuItem – Represents a control in a menu on the ribbon.
SPRibbonMenuSection – Represents a section of a ribbon menu.
SPRibbonPopulateQueryCommand – Represents a command that populates a dynamic menu in the ribbon from XML.
SPRibbonQueryCommand – Represents a ribbon command for the QueryCommand event.

ECMAScript Objects

SP.Ribbon.PageManager
CUI.Page.CommandDispatcher
CUI.Page.PageComponent

XML Used for the Server Ribbon

You can define and customize the Server ribbon by using XML in a Feature or through a user custom action. The XML that is 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 Architecture of the Server Ribbon. Here is an example of XML code that customizes the ribbon.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
  <CustomAction 
    Id="Ribbon.WikiPageTab.CustomGroupAndControls" 
    Location="CommandUI.Ribbon" 
    RegistrationId="100" 
    RegistrationType="List">
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition 
          Location="Ribbon.WikiPageTab.Groups._children">
          <Group 
            Id="Ribbon.WikiPageTab.CustomGroup" 
            Sequence="55" 
            Description="Custom Group" 
            Title="Custom Group" 
            Template="Ribbon.Templates.Flexible2">
            <Controls Id="Ribbon.WikiPageTab.CustomGroup.Controls">
              <Button
                Id="Ribbon.WikiPageTab.CustomGroup.Controls.CustomButton1" 
                Command="CustomButtonCommand1" 
                Image16by16="/_layouts/images/FILMSTRP.GIF" 
                Image32by32="/_layouts/images/PPEOPLE.GIF" 
                LabelText="" 
                TemplateAlias="o2" 
                Sequence="15" />
            </Controls>
          </Group>
        </CommandUIDefinition>
       </CommandUIDefinitions>
      <CommandUIHandlers>
        <CommandUIHandler Command="CustomButtonCommand1" CommandAction="javascript:alert('Hello, world!');" />
      </CommandUIHandlers>
    </CommandUIExtension>
  </CustomAction>
</Elements>

The ribbon in SharePoint Foundation can be customized by using XML and ECMAScript (JavaScript, JScript). The XML defines the controls on the ribbon; the JavaScript performs actions on the page or an object on the page. You can use JavaScript that exists in the SharePoint FoundationJavaScript object model or built-in JavaScript functions. You can also add your own JavaScript to the page and use it to interact with the ribbon. For more information about customizing the ribbon, see Customizing the Server Ribbon.

Building Block: Features

Building Block: Pages and User Interface

Building Block: Solutions