How to add custom ribbon action on list/libraries in SharePoint

This SharePoint tutorial, we will discuss how to add list ribbon custom action in SharePoint hosted app or add-in using visual studio.

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 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.

Add list ribbon custom action in SharePoint hosted app

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 a Ribbon control.

ribbon custom action in SharePoint

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

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

add custom action in ribbon sharepoint 2013

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

add custom action in ribbon sharepoint online

Customize Below is the Custom Ribbon XML that I created for custom Tab. Refer to the Ribbon XML Schema for more options.

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>

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

custom ribbon action sharepoint 2016
ribbon custom action sharepoint online
custom ribbon action sharepoint 2013 c#

Final O/p Custom Ribbon Tab.

custom ribbon action sharepoint 2013

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 like following SharePoint hosted app tutorials:

Here, we learned how to add custom ribbon action on list/libraries in SharePoint 2013/2016 using SharePoint hosted app.

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

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.

>