Working with the SharePoint 2010 Ribbon User Interface

Article
07/24/2014

SharePoint QuickStart Banner

Getting Started with Web Development in SharePoint 2010: Learn how to modify the new SharePoint 2010 ribbon menu.

Applies to: Office 2010 | SharePoint Foundation 2010 | SharePoint Server 2010 | Visual Studio | Visual Studio 2010

In this article
Create an Empty SharePoint 2010 Project
Add the Button Code to the Project
Deploy and Test the Solution
Remove the Button
Next Steps

Published: April 2010

Provided by: Frank Rice, Microsoft Corporation

In this exercise, you extend the Microsoft SharePoint 2010 ribbon by adding a custom button that executes server-side code. You can use this approach to add or replace buttons, groups, tabs or even the whole ribbon. You also remove the custom button from the ribbon. To complete this task, you must do the following:

Create an Empty SharePoint 2010 Project
Add the Button Code to the Project
Deploy and Test the Solution
Remove the Button

Create an Empty SharePoint 2010 Project

In this task, you create an empty SharePoint 2010 project in Microsoft Visual Studio 2010.

To create the SharePoint project

To start Visual Studio 2010, click the Start Menu, click All Programs, click Microsoft Visual Studio 2010, and then click Microsoft Visual Studio 2010.
On the File menu, point to New, and then click Project.
In the New Project dialog window, in the Installed Templates section, click Visual C#, click SharePoint, and then click 2010.
Click Empty SharePoint Project from the project items.
In the Name box, type RibbonDemo and then click OK.
In the SharePoint Customization Wizard, type the local Web site that you want to use for this exercise (such as https://localhost/SampleWebSite).
For the trust level, select Deploy as a farm solution and then click Finish.

Add the Button Code to the Project

In this task, you add the XML to create the button and ECMAScript (JavaScript, JScript) code to give it functionality.

To add XML code to the project

In Solution Explorer, right-click the RibbonDemo node, point to Add, and then click New Item.
In the Add New Item dialog screen, in the Installed Templates section, click Visual C#, click SharePoint, click 2010, and then click the Empty Element item type.
Leave the Name as EmptyElement1 and then click OK.
In Solution Explorer, right-click the EmptyElement1 node and then click View Code.
Delete the contents of the Elements.xml file.

Add the following code to the Elements.xml file.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
<CustomAction
  Id="DemoHelloWorldButton"
  RegistrationType="List"
  RegistrationId="101"
  Location="CommandUI.Ribbon">
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition
         Location="Ribbon.Documents.New.Controls._children">
          <Button
           Id="Ribbon.Documents.New.Controls.DemoHelloWorldButton"
           Alt="Hello World Ribbon Button"
           Sequence="10"
           Image32by32="/_layouts/images/PPEOPLE.GIF"
           Command="Demo_HelloWorld"
           LabelText="Hello World Demo"
           TemplateAlias="o2"/>
        </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers>
        <CommandUIHandler
         Command="Demo_HelloWorld"
         CommandAction="javascript:alert('Hello World!');" />
      </CommandUIHandlers>
    </CommandUIExtension>
  </CustomAction> 
</Elements>

The TemplateAlias attribute defines whether a medium (o2) or large (o1) button is displayed. The CommandAction element contains the ECMAScript (JavaScript, JScript) code that runs when you press the button.

Note that you can add a custom image to the button by right-clicking the RibbonDemo node, pointing to Add, and double-clicking SharePoint "Images" Mapped Folder. Then upload the 32 x 32 image or the 16 x 16 image to the Images/RibbonDemo folder. Finally, change the Image32by32 (or Image16by16) attribute to _layouts/images/ribbondemo/yourimage.png.

Deploy and Test the Solution

In this task, you deploy the solution and then verify that the button is displayed on the ribbon. Then you click the button to display the dialog box.

To test the solution

In Solution Explorer, right-click the RibbonDemo node and then click Deploy.
Start Internet Explorer and browse to the Web site specified previously.
In the left navigation pane, click Shared Documents to open the Shared Documents library.
Click the Documents tab in the SharePoint 2010 ribbon.

You should see the new Hello World Demo button added to the ribbon.
Click Hello World Demo. The Hello World JavaScript dialog box appears as shown Figure 1.

Figure 1. The Hello World dialog box

Remove the Button

In this task, you remove the Hello World Demo button.

To remove the button

In Solution Explorer, right-click the EmptyElement1 node and then click View Code.
Comment the existing code by typing  after the closing </CustomAction> element.

After the commented code, insert the following code.

<HideCustomAction Id="Ribbon.Documents.New.Controls.DemoHelloWorldButton" Location="Ribbon.Documents.New.Controls._children">
</HideCustomAction>

Deploy and test the updated solution by following steps 1 through 4 in Task 3, Deploy and Test the Solution.

You should see that the Hello World Demo button is no longer displayed on the ribbon.

Share via