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:

SharePoint Online

The cloud parts are functional components that extend your SharePoint Online environment in Microsoft 365.

Supports Classic and Modern sites for SharePoint Online/Microsoft 365

Small Business Pricing and Discounts

SharePoint

Top SharePoint Online Products

Experience greater power and savings by bundling our SharePoint apps and cloud parts.


Calendar Plus


Carousel


Employee Directory Plus


Org Chart Plus


Simple Search


Tabify


Tree View

 

On-Premises Only

These web parts extend SharePoint beyond its out-of-the-box capabilities by tailoring it to your requirements with Bamboo Solution’s growing portfolio of SharePoint Web Parts.

SharePoint 2016, 2019, 2022 – Classic Pages Only

SharePoint

Top On-Premises Only Products

Experience greater power and savings by bundling our SharePoint apps and web parts.


Calendar Plus


Data Viewer


Password Change


Password Expiration


Password Reset

 

Our team of Microsoft 365 Technology Consultants helps you get the most out of your Microsoft technology, we have the best Microsoft 365 talent to streamline your organization.

Consulting to Streamline Your Department

M365 Plus

Managed Services

Microsoft 365

Consulting to Streamline Your Department


Human Resources


Information Technology


Marketing Campaigns


Healthcare


Sales

 

Our Consultants Have What You Need

Federal Contractors