Ways and Locations to add a custom action to a Ribbon in SharePoint 2010

There are different ways of adding your own custom actions to the ribbon in SharePoint 2010. The ribbon is made up of tabs and groups. Each tab consists of Groups. So when we want to add a custom action we need to identify the correct tab and group.

This is referenced by Tab.Group ID.

1. SharePoint Designer

Using SPD 2010, open the list that you want to customize. You can see the Custom Actions section on the page.

In the Ribbon, click on Quick Step and you will get 5 options to choose from.

The IT Leader's Guide to Multicloud Readiness

This guide provides practical key insights and important factors to consider to make informed decisions in your multicloud journey.

Download the Guide

If you select Edit Form Ribbon, you will see a screen where you can specify the url for the icon, url for the application and the location.

If you scroll down,

Now if you refresh the list screen in the internet explorer.

2. Features

To add a button using a feature, create a feature file as specified below.

<?xml version="1.0" encoding="utf-8" ?>
<Feature Id="{a49bc1a4-e324-47fb-bdf2-3441117cd364}"
Title="My Own Action"
Description="Description of the Feature."
Version="1.0.0.0"
Scope="Web"
xmlns="http://schemas.microsoft.com/sharepoint/">
<ElementManifests>
<ElementManifest Location="manifest.xml" />
</ElementManifests>
</Feature>

Create a manifest file specifying the button and its location.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction Id="Ribbon.ListForm.Edit" Location="ViewToolbar" RegistrationId="100" RegistrationType="List" Title="Add a Button">
<CommandUIExtension>
<CommandUIDefinitions>
<CommandUIDefinition Location="Ribbon.Library.Actions.AddAButton.Controls._children">
<Button Id="Ribbon.CustomCommands.NewRibbonButton" Command="NewRibbonButtonCommand" Image16by16="/_layouts/images/FILMSTRP.GIF" Image32by32="/_layouts/images/PPEOPLE.GIF" LabelText="New Button" TemplateAlias="o2" />
</CommandUIDefinition>
</CommandUIDefinitions>
<CommandUIHandlers>
<CommandUIHandler Command="NewRibbonButtonCommand" CommandScript="javascript:alert(‘This is a new button!’);" />
</CommandUIHandlers>
</CommandUIExtension>
</CustomAction>
</Elements>

Install and activate the feature. This will make a button appear on the Toolbar of a list. This approach has been explained in the technical documentation for SharePoint 2010.

In my next blog, I have some code snippets to add buttons to the Ribbon using code.