Walkthrough: Replacing a Button on the Server Ribbon for a Site Collection

SharePoint 2010

Last modified: February 04, 2011

Applies to: SharePoint Foundation 2010

This topic shows a site collection-level replacement of a button on the Server ribbon in Microsoft SharePoint Foundation. You will use a custom action with the ScriptLink location to add the ECMAScript (JavaScript, JScript) on all pages.

Microsoft SharePoint Foundation 2010

SharePoint development tools in Microsoft Visual Studio 2010

To customize the ribbon, you start by creating an empty SharePoint project.

To create a SharePoint Project

  1. Start Microsoft Visual Studio 2010.

  2. On the File menu, point to New, and then click Project.

  3. In Project Types, select C#, and then select Empty SharePoint Project.

  4. Type ReplaceARibbonButtonUsingScriptLink as the project name, and then click OK.

  5. In the SharePoint Customization Wizard, select Deploy as a farm 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 Replace a Ribbon Button Using ScriptLink.

  3. In Solution Explorer, right-click Feature1, and then select Rename. Type ReplaceARibbonButtonUsingScriptLink as the new name.

  4. In Solution Explorer, right-click the ReplaceARibbonButtonUsingScriptLink project, point to Add, and then select New Item.

  5. In the Add New Item dialog box, select the Empty Element template. Type ReplaceARibbonButtonUsingScriptLink as the name.

You replace the ribbon button is replaced by using the Location attribute of the CommandUIDefinition element. The default values for ribbon buttons are listed in Default Server Ribbon Customization Locations. 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 XML into the Elements.xml file. This XML replaces the Connect to Outlook button on the Library tab in the Connect & Export group for a document library.

    Important note Important

    You must replace the Image32by32 and Image16by16 attributes with valid image URLs.

    <?xml version="1.0" encoding="utf-8"?>
    <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
      <CustomAction Id="Ribbon.Library.Actions.ConnectToClient"
        Location="CommandUI.Ribbon"
        RegistrationId="101"
        RegistrationType="List"
        Title="Custom ECMAScript Button">
        <CommandUIExtension>
          <CommandUIDefinitions>
            <CommandUIDefinition
              Location="Ribbon.Library.Actions.ConnectToClient">
              <Button Id="Ribbon.Library.Actions.ConnectToClient"
                Command="CustomECMAScriptCommand"
                Image16by16="Insert an image URL here."
                Image32by32="Insert an image URL here."
                LabelText="Hello World"
                TemplateAlias="o1" />
            </CommandUIDefinition>
          </CommandUIDefinitions>
          <CommandUIHandlers>
            <CommandUIHandler
              Command="CustomECMAScriptCommand"
              CommandAction="javascript:HelloWorld();" />
          </CommandUIHandlers>
        </CommandUIExtension>
      </CustomAction>
      <CustomAction Id="Ribbon.Library.Actions.NewButton.Script"
        Location="ScriptLink"
        ScriptBlock="
        function HelloWorld()
        {
          alert('Hello, world!');
        }" />
    </Elements>
    

Because the project was set up as a farm solution, it is automatically deployed, and Internet Information Services (IIS) is reset.

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 Library tab, look in the Connect & Export group, and observe the absence of the Connect to Outlook button.

Show: