Walkthrough: Adding a Tab to the Server Ribbon

  • Article

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="https://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