Create a custom tab in the SharePoint ribbon interface

In this article we will be seeing how to create a custom tab, group and button to the server ribbon in Sharepoint 2010.

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

1. SharePoint Server 2010
2. SharePoint development tools in Microsoft Visual Studio 2010

Create a SharePoint project:

1. Open Visual Studio 2010.
2. On the File menu, go to New, and then click Project.
3. In Project Types, under Visual C#, select Empty SharePoint Project.
   
   
    
4. Enter CustomTab as the project name, and then click OK.
5. In the SharePoint Customization Wizard, select Deploy as a sandboxed solution, and then click Finish.
   
   
    
6. Right click on the solution, click on Add => New item.
   
   
    
7. Select Empty Element template and enter the name as CustomTab.
   
   
    
8. Click on Ok.
9. 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">
                                                          <Controls Id="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:

1. Right click on the solution, then click on Build.
2. Right click on the solution, then click on Deploy.
3. 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 ).
4. You could be able to see Custom Tab , Custom Group and the Custom Button as shown in the following