Walkthrough: Adding a Button to the Server Ribbon

Article
10/20/2016

Applies to: SharePoint Foundation 2010

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

Prerequisites

Microsoft SharePoint Foundation 2010

SharePoint development tools in Microsoft Visual Studio 2010

Creating a SharePoint Project

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

To create a SharePoint project

Start Microsoft Visual Studio 2010.
On the File menu, point to New, and then click Project.
In Project Types, under Visual Basic or C#, select Empty SharePoint Project.
Type AddARibbonButton as the project name. Click OK.
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

In Solution Explorer, right-click Features, and then click Add Feature.
Change the Title of the Feature to Custom Ribbon Button.
In Solution Explorer, right-click Feature1, and then click Rename. Type CustomRibbonButton as the new name.
In Solution Explorer, right-click the AddARibbonButton project, point to Add, and then select New Item.
In the Add New Item dialog box, select the Empty Element template. Type CustomRibbonButton as the name.

Defining the Custom Action

You define the ribbon button 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

Open the Elements.xml file.

Paste the following XML into the Elements.xml file. This XML adds a new button on the Library tab in the Share & Track group for a document library.

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.Library.Actions.AddAButton"
    Location="CommandUI.Ribbon"
    RegistrationId="101"
    RegistrationType="List"
    Title="Add a Ribbon Button">
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition
          Location="Ribbon.Library.Share.Controls._children">
          <Button Id="Ribbon.Library.Share.NewRibbonButton"
            Command="NewRibbonButtonCommand"
            Image16by16="Insert an image URL here."
            Image32by32="Insert an image URL here."
            LabelText="Hello World"
            TemplateAlias="o2" />
        </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers>
        <CommandUIHandler 
          Command="NewRibbonButtonCommand"
          CommandAction="javascript:alert('Hello, 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

Press F5. The SharePoint development tools in Visual Studio 2010 automatically build and deploy the Feature.
Navigate to a document library in your site or subsite.
Click the Library tab, look in the Share & Track group, and click the Hello World button.