Reader Level:
Articles

How to create custom button in SharePoint 2010 Ribbon User Interface

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


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









  

Vijai Anand

Vijai Anand has been working in IT industry for over 5 years. He holds Bachelor's degree in Electronics and Communication Engineering. Vijai write articles and blogs related to SharePoint 2013, SharePoint 2010, Silv... Read more

COMMENT USING

Trending up