Saturday 2 February 2013

SharePoint 2013 Site Level Ribbon Tabs

There are plenty of examples of adding a custom SharePoint ribbon tab to a list but very few examples of adding a custom ribbon tab to a site. 

If you want to add a custom ribbon tab to a site it requires custom code for the tab to be displayed (SPRibbon.MakeTabAvailable). Enabling buttons on the tab requires some JavaScript which reports that the buttons are enabled when queried.

I came across this example to add a contextual tab when a webpart is selected but I wanted the tab to always be visible. I've adapted the example for a standard (not contextual) tab which is displayed on a site when a webpart is added to the page. I've also changed the tab XML so that it is deployed as a feature rather than being declared in code.

  1. Open Visual Studio 2012 and create a new SharePoint 2013 Visual Web Part project.
  2. Name it something like CustomTabWebPart and select Farm Solution when prompted. 
  3. From Solution Explorer, right click on the project (CustomTabWebPart) and add a new item.
  4. Select Empty Element from the SharePoint templates and name it something like CustomTab.
  5. Paste the following into Elements.xml:
  6. From Solution Explorer, right click on the project (CustomTabWebPart) and add a new item.
  7. Select Module from the SharePoint templates and name it something like CustomTabJavascript.
  8. Delete the elements.xml and sample.txt files created for the module in Solution Explorer.
  9. Right click on the module (CustomTabJavascript) in Solution Explorer and add a new item.
  10. From the Web templates select JavaScript file and call it something like CustomTab.js.
  11. Past the following into the JavaScript file:
  12. Right click on the JavaScript (CustomTab.js) file in Solution Explorer, change the Deployment Type to RootFile and the Deployment Location path to Template\Layouts.
  13. Add a reference for the project to Microsoft.Web.CommandUI.
  14. Open the visual webpart’s .ascx.cs file and add the following using statements:
  15. Add the following to the same file:
  16. Add the following to the Page_Load method in the same file:
  17. Deploy the solution and add the webpart to a page. You should now see the My Tab tab on the page with a Hello World button which displays an alert when clicked.


If you want to make the button a bit more useful and launch an application page, you can do so by changing the alert in the JavaScript file to something like SP.UI.ModalDialog.showModalDialog. See the MSDN page for more details.

Its worth noting that Internet Explorer has a habit of caching JavaScript files so you might need to delete the file from your temporary internet files if changes aren't taking effect.

4 comments:

  1. Hi Tom,

    I Did all steps bellow, but when i´m trying do deploy the VS2012 returns in output window:

    Add Solution:
    Adding solution 'CustomTabWebPart.wsp'...
    Deploying solution 'CustomTabWebPart.wsp'...
    Activate Features:
    Activating feature 'Feature1' ...

    ReplyDelete
  2. Hi Tom...my bad. Permission issue.

    Tks for the sample. Great job!

    ReplyDelete
  3. I got bellow error for following line:
    string webPartPageComponentId = SPRibbon.GetWebPartPageComponentId(this);
    //
    error:
    Argument 1: cannot convert from 'CustomTabWebPart.VisualWebPart1.VisualWebPart1UserControl' to 'System.Web.UI.WebControls.WebParts.WebPart
    //
    any idea?

    ReplyDelete