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 above—CustomAction—to 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.
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.
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
Our Consultants Have What You Need
Federal Contractors
Microsoft 365
Our Consultants Have What You Need