Extending the SharePoint 2013 Ribbon Using Visual Studio

Extending the Ribbon is one of the most common tasks in SharePoint.  If you’re familiar with this task from SharePoint 2010, you will recognize the XML structure that’s used.  However, in SharePoint 2013 much of the underlying XML is generated for you using wizards in Visual Studio. 

This makes a great starting point for more complex projects, and it also makes it very easy to get started and add Ribbon functionality to existing projects.

In this scenario, we’re going to create a simple Ribbon custom action for Task lists.  Clicking our button takes the user to the home page of the app, which greets the current user.

1. In Visual Studio 2013, click File, New,Project.
2. Under the heading Office/SharePoint, click Apps.
3. Choose App for SharePoint (see Figure 1).

4. Give your app a name and choose the proper location.
5. Click OK.
6. In the dialog that opens, type in the name of your development SharePoint 2013 site.
7. In the options for hosting your app, choose SharePoint-hosted.
8. Click Finish.
9. In the Solution explorer, right-click the name of your project and select Add, New Item… (see Figure 2).

10. In the Office/SharePoint section, select Ribbon Custom Action.
11. Give your Ribbon Custom Action a name and click Add (see Figure 3).

12. In the dialog that opens, select Host Web.
13. For Where is the custom action scoped to? choose List Template.
14. For Which particular item is the custom action scoped to? choose Tasks.
15. Click Next.
16. For Where is the control located?  Choose Ribbon.ListItem.Actions.
17. For What is the label text for the button control? type a brief (1-3 words) description to appear on the new Ribbon button.
18. For Where does the button control navigate to? type the path to the homepage in your project.
19. Click Finish.

Take a moment to look through the XML the wizard provided.  This is a great starting point, because it takes some of the guess work out of designing your custom action (see Figure 4). 

In particular, the RegistrationType and the RegistrationId are already filled in specifically for Task Lists, removing the requirement for developers to know off hand—or keep a cheat sheet around for—the specific Ids for a given list type.

Although this project is very simple, you can debug it and see the functionality that is already in place.  Click Start or hit the F5 key to start debugging. 

The app will build, install, and the home page will open in the browser, greeting the current user.  You can imagine that this is what the user will see (Figure 5) when he or she clicks on your new Ribbon button in a Task list.

This is a great start, but we aren’t yet able to see our new button in action.  I’ll cover installing the app and using the button in the next post.