Walkthrough: Adding a Group to the Server Ribbon

Applies to: SharePoint Foundation 2010

This topic describes how to add a new group to the Server ribbon in Microsoft SharePoint Foundation. To add a group, you identify the tab on the ribbon where the group will appear. You also define the controls inside the group and decide how the group will render those controls. The following procedure adds a new group to the Page tab for a website.

Prerequisites

Microsoft SharePoint Foundation 2010

SharePoint development tools in Microsoft Visual Studio 2010

Creating a SharePoint Project

To add a new group, you start by creating an empty SharePoint project.

To create a SharePoint project

1. Start Visual Studio 2010.

2. On the File menu, point to New, and then click Project.

3. In Project Types, under Visual Basic or C#, select Empty SharePoint Project.

4. Type AddARibbonGroup as the project name, and then click OK.

5. In the SharePoint Customization Wizard, select Deploy as a sandboxed solution, and then click Finish.

Adding a New Feature

You customize the ribbon by using a Feature. The following steps add a new Feature to your solution.

To add a new Feature

1. In Solution Explorer, right-click Features and then select Add Feature.

2. Change the Title of the Feature to Custom Ribbon Group.

3. In Solution Explorer, right-click Feature1, and then select Rename. Type CustomRibbonGroup as the new name.

4. In Solution Explorer, right-click the AddARibbonGroup project, point to Add, and then click New Item.

5. In the Add New Item dialog box, select the Empty Element template. Type CustomRibbonGroup as the Name.

Defining the Custom Action

The ribbon group is defined by using ribbon XML in a custom action. This identifies where the group will appear on the ribbon. For an in-depth explanation of the ribbon XML, see Server Ribbon XML.

To define the custom action

1. Open the Elements.xml file.

2. Paste the following XML into the Elements.xml file. This XML adds a new Custom group with two buttons on the Page tab for a website.

   Important

   You must replace the Image32by32 and Image16by16 attributes with valid image URLs.

   <?xml version="1.0" encoding="utf-8"?>
   <Elements xmlns="https://schemas.microsoft.com/sharepoint/">
     <CustomAction 
       Id="Ribbon.WikiPageTab.CustomGroup" 
       Location="CommandUI.Ribbon">
       <CommandUIExtension>
         <CommandUIDefinitions>
           <CommandUIDefinition 
             Location="Ribbon.WikiPageTab.Groups._children">
             <Group 
               Id="Ribbon.WikiPageTab.CustomGroup" 
               Sequence="55" 
               Description="Custom Group" 
               Title="Custom" 
               Command="EnableCustomGroup" 
               Template="Ribbon.Templates.Flexible2">
               <Controls Id="Ribbon.WikiPageTab.CustomGroup.Controls">
                 <Button 
                   Id="Ribbon.WikiPageTab.CustomGroup.CustomGroupHello" 
                   Command="CustomGroupHelloWorld" 
                   Image16by16="Insert an image URL here." 
                   Image32by32="Insert an image URL here." 
                   LabelText="Hello, World" 
                   TemplateAlias="o2" 
                   Sequence="15" />
                 <Button 
                   Id="Ribbon.WikiPageTab.CustomGroup.CustomGroupGoodbye" 
                   Command="CustomGroupGoodbyeWorld" 
                   Image16by16="Insert an image URL here." 
                   Image32by32="Insert an image URL here." 
                   LabelText="Good-bye, World" 
                   TemplateAlias="o2" 
                   Sequence="18" />
               </Controls>
             </Group>
           </CommandUIDefinition>
           <CommandUIDefinition 
             Location="Ribbon.WikiPageTab.Scaling._children">
             <MaxSize 
               Id="Ribbon.WikiPageTab.Scaling.CustomGroup.MaxSize" 
               Sequence="15" 
               GroupId="Ribbon.WikiPageTab.CustomGroup" 
               Size="LargeLarge" />
           </CommandUIDefinition>
         </CommandUIDefinitions>
         <CommandUIHandlers>
           <CommandUIHandler 
             Command="EnableCustomGroup"
             CommandAction=”javascript:return true;” />
           <CommandUIHandler 
             Command="CustomGroupHelloWorld" 
             CommandAction="javascript:alert('Hello, world!');" />
           <CommandUIHandler 
             Command="CustomGroupGoodbyeWorld" 
             CommandAction="javascript:alert('Good-bye, world!');" />
         </CommandUIHandlers>
       </CommandUIExtension>
     </CustomAction>
   </Elements>
   

Deploying the Customization

Because the project was set up as a sandboxed solution, it is deployed to the Solution Gallery.

To deploy the customization

1. Press F5. The SharePoint development tools in Visual Studio 2010 automatically build and deploy the Feature.

2. Navigate to the home page of your site or subsite.

3. Click the Page tab, look for the Custom group, and click the Hello, World or Good-bye, World buttons.

See Also

Tasks

Walkthrough: Adding a Tab to the Server Ribbon

Concepts

Declarative Customization of the Server Ribbon