Introduced in Office 2007, Ribbon interface is something we first were reluctant to use but quickly got familiar with. Having ribbon interface in SharePoint 2010 Beta means to many - it`s here to stay. In SharePoint 2010 defining ribbon is a matter of XML definition in your feature; however, there are few tricks on making the most out of the available interface extensions.
In here we`ll start by something simple, create SharePoint 2010 Beta ribbon button which will open a sswug.org site, and show how to deploy it using Visual Studio 2010 Beta.
We start by creating a blank SharePoint 2010 project in VS 2010. We're going to click on Feature in our solution explorer and add new feature and a default name.
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>
Here is what our XML is all about:
1. 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.
2. RegistrationId - optional field specifying that our ribbon element will show up only for document libraries.
3. RegistrationType - optional value specifying that we`re bound to a list (includes document library)
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 -> Share tab of the library or list.
The last thing to do in this sample is to specify 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:window.open('http://www.sswug.org');" />
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 window redirect .
That`s about it, now we need to deploy our solution by using Deploy from VS 2010.
Once deployed you will see your custom button once navigate to any Document Library -> Share tab of the library or list.
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. In other word leave those definitions blank.
Using above mechanism you can implement any control you already see on the ribbon out of the box.
Let me know if you found this article interesting, and whether you`re interested to see more examples of various control definitions.
Yaroslav Pentsarskyy, Microsoft SharePoint MVP
Blog: www.sharemuch.com
