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.
SharePoint Server 2010
SharePoint
Foundation 2010
