Adding Custom Ribbon Tab in the SharePoint 2013 Server Ribbon

Adding Custom Ribbon Tab in the SharePoint 2010 Server Ribbon
InfoPath alternatives for form designing SharePoint

In this article we will explore to create custom tab in SharePoint 2013 custom Action Ribbon using visual studio.

I wanted to create a Custom Action Tab in my SharePoint Hosted app; consider that SharePoint 2013 already provides a home which 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 which 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.

Read some SharePoint online tutorials:
Download a FREE PDF on SharePoint online tutorial

Download FREE PDF on HUB site in SharePoint online

SharePoint 2013 Get current login User Profile Properties through REST API

Solutions:
1. Add ribbon custom action for the App project which you have created, right click on the project [Add] [New Item] [Ribbon Custom Action] and enter the Name and click on Add button. It will start the wizard for creating custom action for Ribbon control


Adding Custom Ribbon Tab in the SharePoint 2013 Server Ribbon
Adding Custom Ribbon Tab in the SharePoint 2013 Server Ribbon

2. In this wizard select host web where you want to expose the custom action. i.e. Your custom action will be available in host web.

The custom action scoped can be List template or List instance or None. In this example I am selecting List template and the item is the custom action scoped to be “Custom list”.

Adding Custom Ribbon Tab in the SharePoint 2016 Server Ribbon
Adding Custom Ribbon Tab in the SharePoint 2016 Server Ribbon

3. Selected “Ribbon.ListItem.Actions”. What this does is, it will show the custom action under Items section of List Ribbon control.

Adding Custom Ribbon Tab in the SharePoint 2010 Server Ribbon
Adding Custom Ribbon Tab in the SharePoint 2010 Server Ribbon

4. Customize Below is the Custom Ribbon XML that I created for custom Tab. Refer the Ribbon XML Schema for more options http://msdn.microsoft.com/en-us/library/office/ff458369(v=office.15).aspx



Code:

<?xml version=”1.0″ encoding=”utf-8″?>
<Elements xmlns=”http://schemas.microsoft.com/sharepoint/”>
<CustomAction Id=”Team Collaborate”
RegistrationType=”List”
RegistrationId=”100″
Location=”CommandUI.Ribbon”
Sequence=”10001″
Title=”Team Collaborate”>
<CommandUIExtension>
<CommandUIDefinitions>
<CommandUIDefinition Location=”Ribbon.Tabs._children”>
<Tab Id=”Team Collaborate.Tab”
Title=”Team Collaborate”
Description=”Special Risk Tracking Functionality”
Sequence=”550″>
<Scaling Id=”Team Collaborate.Tab.Scaling”>
<MaxSize Id=”Team Collaborate.Tab.EnterpriseRiskGroup.MaxSize”
GroupId=”Team Collaborate.Tab.EnterpriseRiskGroup”
Size=”OneLarge”/>
<Scale Id=”Team Collaborate.Tab.EnterpriseRiskGroup.Scaling.CustomTabScaling”
GroupId=”Team Collaborate.Tab.EnterpriseRiskGroup”
Size=”OneLarge” />
</Scaling>

<Groups Id=”Team Collaborate.Tab.Groups”>
<Group Id=”Team Collaborate.Tab.EnterpriseRiskGroup”
Description=”Functions that can be performed on Enterprise Risks”
Title=”Sharepoint Consulting”
Sequence=”10″
Template=”Ribbon.Templates.OneLargeExample”>
<Controls Id=”Team Collaborate.Tab.EnterpriseRiskGroup.Controls”>
<Button Id=”Team Collaborate.Tab.EnterpriseRiskGroup.Notify”
Command=”Team Collaborate.EnterpriseRisk”
Sequence=”10″
Image16by16=”_layouts/15/TeamCollaborate.png”
Image32by32=”_layouts/15/TeamCollaborate.png”
Description=”Selected Largest Team of Certified SharePoint developers.”
LabelText=”Expert Sharepoint”
TemplateAlias=”cust1″/>
</Controls>
</Group>
</Groups>
</Tab>
</CommandUIDefinition>

<CommandUIDefinition Location=”Ribbon.Templates._children”>
<GroupTemplate Id=”Ribbon.Templates.OneLargeExample”>
<Layout Title=”OneLarge” LayoutTitle=”OneLarge”>
<Section Alignment=”Top” Type=”OneRow”>
<Row>
<ControlRef DisplayMode=”Large” TemplateAlias=”cust1″/>
</Row>
</Section>
</Layout>
</GroupTemplate>
</CommandUIDefinition>
</CommandUIDefinitions>
<CommandUIHandlers>
<CommandUIHandler Command=”Team Collaborate.EnterpriseRisk”
CommandAction=”~remoteAppUrl/Pages/TeamCollaborate.aspx?{StandardTokens}&amp;Source={Source}&amp;ListURLDir={ListUrlDir}&amp;list={ListId}&amp;SelectedItems={SelectedItemId}”/>
</CommandUIHandlers>
</CommandUIExtension>
</CustomAction>
</Elements>

5. Build and publish App and Add into Apps in Testing Library and deploy, Trust it

Adding Custom Ribbon Tab in the SharePoint 2013 Server Ribbon
Adding Custom Ribbon Tab in the SharePoint 2013 Server Ribbon
Adding Custom Ribbon Tab in the SharePoint 2013 Server Ribbon
Adding Custom Ribbon Tab in the SharePoint 2013 Server Ribbon
Adding Custom Ribbon Tab in the SharePoint 2013 Server Ribbon
Adding Custom Ribbon Tab in the SharePoint 2013 Server Ribbon

Final O/p Custom Ribbon Tab.

Adding Custom Ribbon Tab in the SharePoint 2016 Server Ribbon
Adding Custom Ribbon Tab in the SharePoint 2016 Server Ribbon

The ribbon is a key building block for SharePoint 2013 solutions, and if you see a ribbon tab for Custom List on the ribbon control bar it can be customized.


You May Also like the Following SharePoint Online Tutorials:

About Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

View all posts by Sagar Pardeshi →

Leave a Reply