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:
