Introduction:
In this article we will be seeing how to create a custom tab, group and button to the server ribbon in Sharepoint 2010. Tabs are the root of the Server ribbon and they contain one or more groups. Every tab in the ribbon contains a series of one or more groups. Groups are used to associate controls with similar functionality. Controls are the items that live inside the ribbon that users can interact with. In this we will be creating a tab, group and control as shown in the following
Prerequisites
SharePoint Server 2010
SharePoint development tools in Microsoft Visual Studio 2010
Create a SharePoint project:
Open Visual Studio 2010.On the File menu, go to New, and then click Project.
In Project Types, under Visual C#, select Empty SharePoint Project.
Enter CustomTab as the project name, and then click OK.
In the SharePoint Customization Wizard, select Deploy as a sandboxed solution, and then click Finish.
Right click on the solution, click on Add => New item.
Select Empty Element template and enter the name as CustomTab.
Click on Ok.
Open Elements.xml and replace the xml with the following
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">Â Â Â Â Â Â
<CustomAction Id="CustomRibbonTab" Location="CommandUI.Ribbon" RegistrationId="101" RegistrationType="List">Â Â Â Â Â Â Â Â Â Â Â Â Â
<CommandUIExtension>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
<CommandUIDefinitions>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
<CommandUIDefinition Location="Ribbon.Tabs._children">Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
<Tab Id="Ribbon.CustomTab" Title="Custom Tab" Description="Custom Tab !!!" Sequence="501">Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
<Scaling Id="Ribbon.CustomTab.Scaling">Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
<MaxSize Id="Ribbon.CustomTab.MaxSize" GroupId="Ribbon.CustomTab.CustomGroup" Size="OneLargeTwoMedium"/>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
<Scale Id="Ribbon.CustomTab.Scaling.CustomTabScaling" GroupId="Ribbon.CustomTab.CustomGroup" Size="OneLargeTwoMedium" />Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
</Scaling>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
<Groups Id="Ribbon.CustomTab.Groups">Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
<Group Id="Ribbon.CustomTab.CustomGroup" Description="Custom Group!" Title="Custom Group" Sequence="52" Template="Ribbon.Templates.CustomTemplate">Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
<ControlsId="Ribbon.CustomTab.CustomGroup.Controls">Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
<Button Id="Ribbon.CustomTab.CustomGroup.CustomButton" Command="CustomTab.CustomButtonCommand" Sequence="15" Description="" LabelText="Custom Button" Image32by32="/_layouts/images/PPEOPLE.GIF" TemplateAlias="cust1"/>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
</Controls>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
</Group>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
</Groups>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
</Tab>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
</CommandUIDefinition>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
<CommandUIDefinition Location="Ribbon.Templates._children">Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
<GroupTemplate Id="Ribbon.Templates.CustomTemplate">Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
<Layout Title="OneLargeTwoMedium" LayoutTitle="OneLargeTwoMedium">Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
<Section Alignment="Top" Type="OneRow">Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
<Row>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
<ControlRef DisplayMode="Large"TemplateAlias="cust1" />Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
</Row>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
</Section>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
</Layout>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
</GroupTemplate>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
</CommandUIDefinition>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
</CommandUIDefinitions>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
<CommandUIHandlers>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
<CommandUIHandler Command="CustomTab.CustomButtonCommand" CommandAction="javascript:alert('Hello, world!');" />Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
</CommandUIHandlers>
</CommandUIExtension>Â Â Â
</CustomAction>
</Elements>
Deploy the solution:
Right click on the solution, then click on Build.
Right click on the solution, then click on Deploy.
Go to the SharePoint site => Document Library (In the Elements.xml file we have mentioned RegistrationId="101" the custom tab that we have created will be available only in the document library ).
You could be able to see Custom Tab , Custom Group and the Custom Button as shown in the following
