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 adding a feature and 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 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 which 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 listId 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

        Applications

        SharePoint apps are stand-alone applications that perform specific tasks on a SharePoint site. Apps can perform functions such as managing a discussion board or knowledge base, performing project management or time tracking tasks, or doing other workflow operations.

        SharePoint

        Product Suites

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


        Essentials


        Essentials Plus


        Bamboo Premier


        Project Management Suite


        Knowledge Management Suite


        External User Manager


        SharePoint

        Web Parts

        Extend SharePoint beyond its out-of-the-box capabilities by tailoring it to your requirements with Bamboo Solution’s growing portfolio of Web Parts. Web Parts are the building blocks of pages on a SharePoint site that can be used to customize the user interface and content of a site page. 

        SharePoint

        Product Suites

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


        Essentials


        Essentials Plus


        Bamboo Premier


        Project Management Suite


        Knowledge Management Suite


        External User Manager


        Office 365

        Cloud Parts

        Cloud Parts are functional components that extend your SharePoint environment whether it’s hosted, on-premises, or part of Microsoft Office 365. More than mere ports of existing software to the cloud, our Cloud Parts have been built from the ground up to take advantage of the best that the cloud has to offer.

        SharePoint

        Product Suites

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


        Cloud Parts Suite for O365/SP Onl.


        Featured Services

        SharePoint Health Check

        A SharePoint Health Check will identify the causes of issues and risks associated with your specific environment, and is custom tailored to provide you with the best recommendations to optimize your SharePoint environment.

        SQL Health Check

        Document recommendations relating to performance, stability, availability, or a specific focus you request of your SQL Server database instances.

        My SharePointXperts

        The truth is that each SharePoint skill may not be a full time job for many organizations, and it is nearly impossible for one person to do everything you need – so augment your team with SharePointXperts; providing the skill sets you need when you need them!