Extending the Ribbon in SharePoint 2010


Presentation Layer point of view Ribbon is a big change in SharePoint 2010, which provides the consistent user experience between SharePoint and Microsoft Office products. Ribbon is defined in the form of XML and Javascript is used to provide client side functionality. The client side script is located in the following path %SharePointRootpath%\TEMPLATE\LAYOUTS\CUI.js Configuration of Ribbon is stored in XML file in %SharePointRootPath%\TEMPLATE\GLOBAL\XML\CMDUI.XML.


Extending the Ribbon

You can add the controls to Ribbon either declaratively using an element file or programmatically add controls using custom code. Adding the custom Tab declaratively

1. In Visual Studio Choose Project –> Add new item then select Empty Element from the Add New Item Dialogue  as shown below


2. Add the following code to the Element.xml file in the MyNewTab folder

   1: <?xml version="1.0" encoding="utf-8"?>

   2: <Elements xmlns="">

   3: <CustomAction Id="CustomTab" Location="CommandUI.Ribbon"

   4: RegistrationType="List" RegistrationId="101">

   5: </CustomAction>

   6: </Elements>

CustomAction elements are used to add command buttons to the user interface. Location attribute tells where the commands will be added. RegistrationId 101 refers to the Document Library List type. You can also use different content types to bind to the ribbon.
3. Add the below code in the CustomAction element
   1: <CommandUIExtension>

   2: <CommandUIDefinitions>

   3: <CommandUIDefinition Location="Ribbon.Tabs._children">

   4: <Tab Id="CustomTab" Title="MyCustomTab"

   5: Description="Tab for demo" Sequence="501">

   6: </Tab>

   7: </CommandUIDefinition>

   8: </CommandUIDefinitions>

   9: </CommandUIExtension>

The above code creates a new Tab element to the Ribbon, Set the value Ribbon.Tabs._children to Location when you want to add tab to existing group. Use Ribbon.ListItem.New.Controls._children to add a control to the new group in the tab.

4. Add the following code under Tab element

   1: <Scaling Id="CustomTab.Scaling">

   2: <MaxSize Id="DemoGroup.MaxSize"

   3: GroupId="DemoGroup"

   4: Size="OneLarge"/>

   5: <Scale Id="DemoGroup.Scaling.CustomTabScaling"

   6: GroupId="DemoGroup"

   7: Size="OneMedium" />

   8: </Scaling>

   9: <Groups Id="CustomGroups">

  10: <Group Id="CustomDemoGroup"

  11: Description="Contains Demo controls"

  12: Title="Demo Group"

  13: Sequence="52"

  14: Template="Ribbon.Templates.SingleButton">

  15: <Controls Id="CustomDemoGroup.Controls">

  16: </Controls>

  17: </Group>

  18: </Groups>

Scaling group contains two main elements MaxSize and Scale. Use MaxSize when there is no spacing constraints. Use Scale element when there is insufficient space for the template.

5. Add the below code in Controls element section as shown below

   1: <Button Id="DemoGroup.test"

   2: Sequence="15"

   3: Image16by16="/_layouts/images/abc.png"

   4: Image32by32="/_layouts/images/xyz.png"

   5: Description="Displays a test message"

   6: LabelText="Test"

   7: TemplateAlias="c1"/>

TemplateAlias attribute is used to hook up the control to the templates in the group element.

More about this concept can be read here

Share this post :

%d bloggers like this: