Export (0) Print
Expand All
3 out of 5 rated this helpful - Rate this topic

Walkthrough: Adding a Tab to the Server Ribbon

SharePoint 2010

Published: May 2010

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

SharePoint Foundation 2010

SharePoint development tools in Microsoft Visual Studio 2010

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.

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.

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>
    

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.

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.