Just like with Office 2007 Ribbon is a big change in SharePoint 2010 Beta, and there is a lot of interest in extending it as it`s a focal point of a custom application control area.
Here we`ll take a look at how to create SharePoint 2010 Beta Ribbon button which will display a simple message and show how to deploy it using Visual Studio 2010 Beta.
We start by creating a blank SharePoint project in VS 2010. We’re going to click on Feature in our solution explorer and add new feature and a default name – nothing fancy.
The we’re going to right click on the name of the SharePoint project, in my case SharePointProject1, and select Add -> New Item. From the list of SharePoint 2010 items we’ll select Empty Element , accept its default name and add it to our solution. You can verify your feature manifest or designer view to ensure that our empty element has been added to the feature.
Here is how your solution explorer will look like after all this:
Now to the code part:
Paste the following part into your Elements.XML
<?xml version=”1.0″ encoding=”utf-8″?>
<Elements xmlns=”http://schemas.microsoft.com/sharepoint/”>
<CustomAction
Id=”Ribbon.CustomGroup”
RegistrationId=”101″
RegistrationType=”List”
Title=”New Ribbon Button”
Location=”CommandUI.Ribbon”>
<CommandUIExtension>
<CommandUIDefinitions>
</CommandUIDefinitions>
<CommandUIHandlers>
</CommandUIHandlers>
</CommandUIExtension>
</CustomAction>
</Elements>
Above, we pretty much follow the same idea as creating ECB and Action menu items in MOSS with a couple of differences. The location field specifies that we’re going to provision items into the Ribbon (CommandUI.Ribbon) but the ID can be anything as long as it’s consistent and does not overlap with other IDs since this will change the behaviour or existing controls with the same ID.
Next, place the following within <CommandUIDefinitions> tags above:
<CommandUIDefinition
Location=”Ribbon.Library.Share.Controls._children”>
<Button Id=”Ribbon.Library.Share.MyButton”
Command=”MyButtonCommand”
Image32by32=”/_layouts/images/PPEOPLE.GIF”
LabelText=”Hello Ribbon”
TemplateAlias=”o2″ />
</CommandUIDefinition>
Above, the most important to keep in mind is again: Location which as you can see specifies nested location of where the button will be placed: Ribbon -> Document Library or List -> Share tab of the library or list.
The last thing to do in this sample is to spelcify what the button will do and the section for that will be CommandUIHandlers you have defined above, here is what we’ll have in this section:
<CommandUIHandler
Command=”MyButtonCommand”
CommandAction=”javascript:alert(‘Hello, Ribbon!’);” />
Ensure your Command is matching the command in your CommandUIDefinition definition. CommandAction is your Javascript that will handle the action, in our case just a “Hello” message.
Here is the tip: If you want to hide an existing ribbon button, all you have to do is to overwrite its definition in your feature and not implement CommandUIDefinition and CommandUIHandler.
Hope this will get your started on customizing SharePoint UI! Here is more on the topic.
