Adding Custom Ribbon Tab To the SharePoint 2013 Server Ribbon

Introduction 

In this article we will explore to how to create a custom tab in SharePoint 2013 Custom Action Ribbon.

I wanted to create a Custom Action Tab in my SharePoint Hosted app. Consider that SharePoint 2013 already provides a home that may be suitable for your customization, for list pages at least; the Custom Commands tab. It only appears on list pages and contains just one lonely button under normal circumstances. This tab is actually the post-upgrade home for any SharePoint 2007 CustomActions you had, assuming you don't introduce changes during your upgrade process, any CustomActions that didn't target the ECB will end up here. In any case, it could help avoid tab proliferation so don't forget it when building your customizations.

Solutions

1. Add a ribbon custom action for the App project that you have created. Right click on the project [Add] [New Item] [Ribbon Custom Action] and enter the Name and click on the Add button. It will start the wizard for creating a custom action for the Ribbon control.
   
   
2. In this wizard select the host web where you want to expose the custom action. In other words your custom action will be available in that host web.
   
   The custom action scoped can be a List template or a List instance or None. In this example I am selecting List template and the item is the custom action scoped to be "Custom list".
   
   
3. Selected "Ribbon.ListItem.Actions". What this does is, it will show the custom action under the Items section of the List Ribbon control.
   
   
4. The following is the Custom Ribbon XML that I created for the Custom Tab. Refer to the Ribbon XML Schema for more options: Server Ribbon schema.
   
   1. <?xml version="1.0" encoding="utf-8"?>  
   2. <Elements xmlns="http://schemas.microsoft.com/sharepoint/">  
   3.   
   4.   <CustomAction Id="Team Collaborate"  
   5.                 RegistrationType="List"  
   6.                 RegistrationId="100"  
   7.                 Location="CommandUI.Ribbon"  
   8.                 Sequence="10001"  
   9.                 Title="Team Collaborate"  
   10.               >  
   11.     <CommandUIExtension>  
   12.       <CommandUIDefinitions>  
   13.         <CommandUIDefinition Location="Ribbon.Tabs._children">  
   14.           <Tab Id="Team Collaborate.Tab"  
   15.                 Title="Team Collaborate"  
   16.                 Description="Special Risk Tracking Functionality"  
   17.                 Sequence="550">  
   18.   
   19.             <Scaling Id="Team Collaborate.Tab.Scaling">  
   20.               <MaxSize Id="Team Collaborate.Tab.EnterpriseRiskGroup.MaxSize"  
   21.                         GroupId="Team Collaborate.Tab.EnterpriseRiskGroup"  
   22.                         Size="OneLarge"/>  
   23.               <Scale Id="Team Collaborate.Tab.EnterpriseRiskGroup.Scaling.CustomTabScaling"  
   24.                       GroupId="Team Collaborate.Tab.EnterpriseRiskGroup"  
   25.                       Size="OneLarge" />  
   26.             </Scaling>  
   27.             <Groups Id="Team Collaborate.Tab.Groups">  
   28.               <Group Id="Team Collaborate.Tab.EnterpriseRiskGroup"  
   29.                       Description="Functions that can be performed on Enterprise Risks"  
   30.                       Title="Sharepoint Consulting"  
   31.                       Sequence="10"  
   32.                       Template="Ribbon.Templates.OneLargeExample">  
   33.                 <Controls Id="Team Collaborate.Tab.EnterpriseRiskGroup.Controls">  
   34.                   <Button Id="Team Collaborate.Tab.EnterpriseRiskGroup.Notify"  
   35.                           Command="Team Collaborate.EnterpriseRisk"  
   36.                           Sequence="10"  
   37.                           Image16by16="_layouts/15/TeamCollaborate.png"  
   38.                           Image32by32="_layouts/15/TeamCollaborate.png"  
   39.                           Description="Selected Largest Team of Certified SharePoint developers."  
   40.                           LabelText="Expert Sharepoint"  
   41.                           TemplateAlias="cust1"/>  
   42.                 </Controls>  
   43.               </Group>  
   44.   
   45.             </Groups>  
   46.           </Tab>  
   47.         </CommandUIDefinition>  
   48.         <CommandUIDefinition Location="Ribbon.Templates._children">  
   49.           <GroupTemplate Id="Ribbon.Templates.OneLargeExample">  
   50.             <Layout Title="OneLarge" LayoutTitle="OneLarge">  
   51.               <Section Alignment="Top" Type="OneRow">  
   52.                 <Row>  
   53.                   <ControlRef DisplayMode="Large" TemplateAlias="cust1" />  
   54.   
   55.                 </Row>  
   56.               </Section>  
   57.             </Layout>  
   58.           </GroupTemplate>  
   59.         </CommandUIDefinition>  
   60.       </CommandUIDefinitions>  
   61.   
   62.       <CommandUIHandlers>  
   63.         <CommandUIHandler Command="Team Collaborate.EnterpriseRisk"  
   64.                         CommandAction="~remoteAppUrl/Pages/TeamCollaborate.aspx?{StandardTokens}&Source={Source}&ListURLDir={ListUrlDir}&list={ListId}&SelectedItems={SelectedItemId}" />  
   65.   
   66.       </CommandUIHandlers>  
   67.   
   68.     </CommandUIExtension>  
   69.   
   70.   </CustomAction>  
   71. </Elements>  
5. Build and publish App and add into the apps in the Testing Library and deploy; Trust it.
   
   
   
   
   
   
   
   The following shows the final output Custom Ribbon Tab:
   
   

SummaryThe ribbon is a key building block for SharePoint 2013 solutions and if you see a ribbon tab for a Custom List on the Ribbon Control Bar then it can be customized.