Walkthrough: Adding a Tab to the Server Ribbon

Applies to: SharePoint Foundation 2010

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 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.

See Also

Concepts

Declarative Customization of the Server Ribbon