Add a custom button SharePoint 2010 ribbon that executes server-side code

In this blog, we learn about the Microsoft SharePoint 2010 ribbon by adding or removing a custom button that executes server-side code.

To add button into ribbon follow below steps:

1.     Click Microsoft Visual Studio 2010.

2.     On the File menu, point to New, and then click Project.

3.     In the New Project dialog window, in the Installed Templates section, click Visual C#, click SharePoint, and then click 2010.

4.     Click Empty SharePoint Project from the project items.

5.     In the Name box, type RibbonDemo and then click OK.

6.     In the SharePoint Customization Wizard, type the local Web site that you want to use for this exercise (such as http://localhost/SampleWebSite).

7.     For the trust level, select Deploy as a farm solution and then click Finish.

8.     In Solution Explorer, right-click the RibbonDemo node, point to Add, and then click New Item.

9.     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.

10.  Leave the Name as EmptyElement1 and then click OK.

11.  In Solution Explorer, right-click the EmptyElement1 node and then click View Code.

12.  Delete the contents of the Elements.xml file.

13.  Add the following code to the Elements.xml file.

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

<Elements xmlns="http://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>

14.   In Solution Explorer, right-click the RibbonDemo node and then click Deploy.

15.   Open the Web site specified previously.

16.   Click the Documents tab in the SharePoint 2010 ribbon.

17.   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

To remove button into ribbon follow below steps:

1.       In Solution Explorer, right-click the EmptyElement1 node and then click View Code.

2.       Comment the existing code by typing <!-- in front of the opening <CustomAction> element. Next, type --> after the closing </CustomAction> element.

3.       After the commented code, insert the following code.

<HideCustomAction Id="Ribbon.Documents.New.Controls.DemoHelloWorldButton" 

Location="Ribbon.Documents.New.Controls._children">

</HideCustomAction>

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