SharePoint 2010 Cookbook: How to Add a Button to the Server Ribbon

Start personalizing your SharePoint site now with a custom SharePoint Ribbon. Creating your custom Ribbon is simple and can be completed easily. In this post, we’ll demonstrate the steps needed to first create a custom SharePoint page, and then how to customize your Ribbon by adding a feature and a custom Ribbon button to open the new page.

Create an Empty SharePoint Project:

  • Using Microsoft Visual Studio, go to File > New > Project
  • Under Installed Templates in your Project Types menu, go to Visual C# >SharePoint > 2010 and select Empty SharePoint Project.
  • Input the Name of the project as well as its location, Solution (in this example, we’ll create a new solution), and Solution Name.
  • Click OK.

Modify your project and add custom elements to define the Ribbon structure:

  • Open your SharePoint Project and click Add New Item. In this example, we will be selecting the template Module and have named it CustomAction:
  • Next, add an XML file to define the Ribbon structure:
  • In my example, I have created a custom command item that will be located on the Ribbon which I have customized.
  • Open the project’s Feature Design. Add the module you created aboveCustomActionto the items in the features pane:

Execute the client script when the Ribbon is clicked and open your custom page:

  • In Solution Explorer, add two new SharePoint folders titled Images and Layouts. These folders will be used to store the images used in your project as well as your custom page:
  • In the Images folder, add an icon image that can be accessed on your Ribbon.
  • In the Layouts folder, add your custom page and client scripts:
  • To add your Custom Page to your SharePoint site, open the Layouts folder. Right-click the folder and select Add New Item. For this example, we will be adding an Application Page from a SharePoint 2010 template:
  • In the file CustomRibbon.js, we will add instructions that will prompt the custom Ribbon to implement an action when it is clicked.
  • In the client code, you can load client context in order to get site and/or list information. In this example, I used the listed and the source URL and inputted them as a query string in the native URL:

Deploy your Custom Page:

  • When you have successfully completed the steps above, you will see that there is now a new Open Custom Page button located on the Ribbon on the List Tools menu:
  • When you click on the Open Custom Page icon, you will now be redirected to the custom page you added above:

See also: