I know a lot of people don’t like the Ribbon, but I personally love it. It’s being put into more and more of Microsoft (and third party!) applications and SharePoint 2010 is no exception. But how do you go about and customize it? I’ve been looking at doing so for the last few days, and I’m glad to say that so far it’s not too tricky.
I’m thinking I’ll probably do a few blog posts on this, but I’m going to start out really simple. I wanted to find out how to add a new button (or control in general) to an already existing tab group on the Ribbon using a feature. This would be a good way of doing it if you are extending functionality that you want to be permanent. I believe you can also customize the Ribbon programmatically from a web part, which would allow you custom behavior only when that web part is visible.
Anyway, I started out by creating a new empty SharePoint 2010 solution.
After that it asked what type of solution it wanted me to make. For my purpose a sandbox solution was going to be sufficient, so I went with that.
OK. At this point I had the new solution all set up. Now I just needed to create a new feature in the solution. This was as easy as just right-clicking on the feature folder in the project and clicking Add Feature. If you’ve done any development on 2007, you’ll appreciate that this is a lot easier to do than before.
After I created the feature I had to add the elements file. I did this by right-clicking the project and click Select -> New Item.
I then selected the Empty Element template and gave it an appropriate name.
At this point my solution had all the files that were needed to create our feature.
Well that’s all well and good, but I needed some meat to the elements file for this to work. So I headed over to MSDN and dug out some articles on how to customize the Ribbon. Here’s the XML that I ended up with.
LabelText="Show an alert"
Let’s first have a look at the CustomAction element. This is the element that tells SharePoint that we want to add a custom action. Give it a unique name and set the Location to CommandUI.Ribbon. The RegistrationType and RegistrationId specifies when the extended UI should be visible. In my case I’ve set it to only be visible on Announcement Lists (it’s ID is 104), but you can set this to any kind of List, Content Type, File Type or ProgId.
Next up is the CommandUIExtension element. It contains the actual controls and actions that are to be taken with our custom action. More specifically, CommandUIDefinition contains the definition of the control, which is my case is a button, while the CommandUIHandler contains the information of what to actually do when the control is interacted with.
The Location attribute on the CommandUIDefinition element is what actually decides where on the ribbon our custom button shows up. You can check out this page on MSDN for possibilities of where to put it. I wanted it to show up in the items section of the ribbon, under the Manage group, so I chose Ribbon.ListItem.Manage.Controls._children.
That’s it! Now let’s try it out. Time for some more pictures. Make sure your elements file is included in the feature.
Then make sure that the feature is attached to the package.
Then deploy the project to the server.
Now head into Site Setting -> Site features and activate your feature.
And finally, go to your announcement list to see the new button in action. If you don’t have an announcement list, you’ll need to create one (obviously). Click on the List Tools -> Items to see the button in all it’s glory (remember, we put it in Ribbon.ListItems).
And that’s all there is to it. This is a really simple example, but hopefully it can be a stepping stone to get into the customizations you can do with the Ribbon. There’s a bunch of more things you can do, and I’m going to try and cover a few more in future posts.