Building Block: Server Ribbon

SharePoint 2010

Last modified: August 22, 2011

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.

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

Server Objects

ECMAScript Objects

  • SP.Ribbon.PageManager

  • CUI.Page.CommandDispatcher

  • CUI.Page.PageComponent

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="">
            Description="Custom Group" 
            Title="Custom Group" 
            <Controls Id="Ribbon.WikiPageTab.CustomGroup.Controls">
                Sequence="15" />
        <CommandUIHandler Command="CustomButtonCommand1" CommandAction="javascript:alert('Hello, world!');" />

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.