SharePoint 2010 Ribbon Custom Command

In this last tutorial I show how to create a Web Part which adds a command to the Ribbon. This is an introduction to customizing the SharePoint 2010 Ribbon using custom actions.

Lets get started:
Create a new Visual Studio 2010 Project.
Select SharePoint and then Empty SharePoint Project.
Name the project and click on OK 

Specify the site to use for debugging, select "Deploy as farm solution" and click on Finish.
 

Using the Solution Explorer, add a new item to the project.
Select Visual C# --> SharePoint 2010 --> Empty Element.
Name the element RibbonActions and click on "add"

 In the editor for the Elements.xml file that has opened automatically add a new <CustomAction> element right inside the <Elements> node and add the following markup. (your project will contain two Elements.xml files. One under MyRibbonWebPart and another under RibbonActions. The changes required here is for the Elements.xml file under RibbonActions)


<?xml version="1.0" encoding="utf-8"?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction
    Id="Hello_world"
    RegistrationType="List"
    RegistrationId="101"
    Location="CommandUI.Ribbon"
    Sequence="5">
    <CommandUIExtension>
       <CommandUIDefinitions>
         <CommandUIDefinition Location="Ribbon.Documents.Manage.Controls._children">
            <Button
               Id="Ribbon.Documents.HelloWorldButton"
               Alt="Hello World"
               Sequence="5"
               Command="Show_HelloWorld"
               Image32by32="/_layouts/images/placeholder32x32.png"
               LabelText="Hello World Command"
               TemplateAlias="o1"/>
          </CommandUIDefinition>
      </CommandUIDefinitions>
  
    <CommandUIHandlers>
      <CommandUIHandler
        Command="Show_HelloWorld"
        CommandAction="javascript:alert('Hello World!');" />
      </CommandUIHandlers>
    </CommandUIExtension>

 </CustomAction>
</Elements>

Save the project and build the project.
In the Solution Explorer, right-click on the project and choose Deploy.
 
Open the web.config file of the web application which hosts the SharePoint site which you deployed to.
Add a SafeControls entry for the new assembly.(remember that your PublicKeyToken value will be different)
<SafeControl Assembly="MyRibbonWebPart, Version=1.0.0.0, Culture=neutral, PublicKeyToken=3d7d18f076284cdb" Namespace="MyRibbonWebPart.MyRibbonWebPart" TypeName="*" Safe="True" AllowRemoteDesigner="True" />

Save and close the web.config file.
Navigate to the target SharePoint Site, go to Site Actions -->Site Settings --> Manage Site Features and activate the new feature.

Navigate to a document libary and click on "Documents" group in the Ribbon. Notice the new action item.

Click on the new custom action to view execution of the javascript.

Enjoy !!