Reader Level:
Article
SharePoint

How to create custom button in SharePoint 2010 Ribbon User Interface

By Vijai Anand Ramalingam on Dec 13, 2010
In this article we will be seeing how to create a custom button in the SharePoint 2010 Ribbon user interface.


In this article we will be seeing how to create a custom button in the SharePoint 2010 Ribbon user interface.

Steps Involved:

I. Open Visual Studio 2010.

ii. Go to File => New =>Project.

iii. Select Empty SharePoint project template from the installed template SharePoint => 2010.

iv. Enter the Name and click OK.

v. Check the option "Deploy as a Sandbox solution".

vi. Click Ok.

vii. Right click on the solution and select "Add a new item".

viii. Select Empty Element template, enter the Name and click Ok.

ix. In the Elements.xml replace the code with the following.

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

x. Go to the SharePoint site where you have deployed your solution.

xi. Go to Shared Documents =>Library Tools => Documents.

xii. You will see My Custom Button in the Ribbon User Interface.

1.gif

xiii. Click on the button and you will see an alert message.

2.gif