Adding a Tab to the Server Ribbon

This topic describes how to add a new tab to the Server ribbon in Microsoft SharePoint Foundation.

Prerequisites

---

SharePoint Foundation 2010
SharePoint development tools in Microsoft Visual Studio 2010

Creating a SharePoint Project

---

To add a new tab, 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 AddARibbonTab 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 Tab.
   
3. In Solution Explorer, right-click Feature1, and then select Rename. Type CustomRibbonTab as the new name.
   
4. In Solution Explorer, right-click the AddARibbonTab project, point to Add, and then click New Item.
   
5. In the Add New Item dialog box, select the Empty Element template. Enter CustomRibbonTab as the name.
   

Defining the Custom Action

---

The ribbon customization is defined by using ribbon XML in a custom action. 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 ribbon XML into the Elements.xml file. This adds a new My Custom Tab tab with a group and three buttons on a document library.
   
   XML

   <?xml version="1.0" encoding="utf-8"?>
   <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
     <CustomAction
       Id="MyCustomRibbonTab"
       Location="CommandUI.Ribbon.ListView"
       RegistrationId="101" 
       RegistrationType="List">
         <CommandUIExtension>
           <CommandUIDefinitions>
             <CommandUIDefinition
               Location="Ribbon.Tabs._children">
               <Tab 
                 Id="Ribbon.CustomTabExample" 
                 Title="My Custom Tab" 
                 Description="This holds my custom commands!" 
                 Sequence="501">
               <Scaling
                 Id="Ribbon.CustomTabExample.Scaling">
                 <MaxSize
                   Id="Ribbon.CustomTabExample.MaxSize" 
                   GroupId="Ribbon.CustomTabExample.CustomGroupExample" 
                   Size="OneLargeTwoMedium"/>
                 <Scale 
                   Id="Ribbon.CustomTabExample.Scaling.CustomTabScaling"
                   GroupId="Ribbon.CustomTabExample.CustomGroupExample" 
                   Size="OneLargeTwoMedium" />
               </Scaling>
               <Groups Id="Ribbon.CustomTabExample.Groups">
                 <Group 
                   Id="Ribbon.CustomTabExample.CustomGroupExample" 
                   Description="This is a custom group!" 
                   Title="Custom Group" 
                   Sequence="52" 
                   Template="Ribbon.Templates.CustomTemplateExample">
                   <Controls Id="Ribbon.CustomTabExample.CustomGroupExample.Controls">
                     <Button 
                       Id="Ribbon.CustomTabExample.CustomGroupExample.HelloWorld" 
                       Command="CustomTabExample.HelloWorldCommand" 
                       Sequence="15" 
                       Description="Says hello to the World!" 
                       LabelText="Hello, World!" 
                       TemplateAlias="cust1"/>
                     <Button 
                       Id="Ribbon.CustomTabExample.CustomGroupExample.GoodbyeWorld" 
                       Command="CustomTabExample.GoodbyeWorldCommand" 
                       Sequence="17" 
                       Description="Says good-bye to the World!" 
                       LabelText="Good-bye, World!" 
                       TemplateAlias="cust2"/>
                     <Button 
                       Id="Ribbon.CustomTabExample.CustomGroupExample.LoveWorld" 
                       Command="CustomTabExample.LoveWorldCommand" 
                       Sequence="19" 
                       Description="Says I love the World!" 
                       LabelText="I love you, World!" 
                       TemplateAlias="cust3"/>
                   </Controls>
                 </Group>
               </Groups>
             </Tab>
           </CommandUIDefinition>
           <CommandUIDefinition Location="Ribbon.Templates._children">
             <GroupTemplate Id="Ribbon.Templates.CustomTemplateExample">
               <Layout 
                 Title="OneLargeTwoMedium" 
                 LayoutTitle="OneLargeTwoMedium">
                 <Section Alignment="Top" Type="OneRow">
                   <Row>
                     <ControlRef DisplayMode="Large" TemplateAlias="cust1" />
                   </Row>
                 </Section>
                 <Section Alignment="Top" Type="TwoRow">
                   <Row>
                     <ControlRef DisplayMode="Medium" TemplateAlias="cust2" />
                   </Row>
                   <Row>
                     <ControlRef DisplayMode="Medium" TemplateAlias="cust3" />
                   </Row>
                 </Section>
               </Layout>
             </GroupTemplate>
           </CommandUIDefinition>
         </CommandUIDefinitions>
         <CommandUIHandlers>
           <CommandUIHandler
             Command="CustomTabExample.HelloWorldCommand" 
             CommandAction="javascript:alert('Hello, world!');" />
           <CommandUIHandler 
             Command="CustomTabExample.GoodbyeWorldCommand" 
             CommandAction="javascript:alert('Good-bye, world!');" />
           <CommandUIHandler 
             Command="CustomTabExample.LoveWorldCommand" 
             CommandAction="javascript:alert('I love you, 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 a document library in your site or subsite.
   
3. Click the My Custom Tab tab, observe the Custom Group, and then click the Hello, World, Good-bye, World, or I Love You, World buttons.