Sharepoint Ribbon on Layout Pages Part 1

Sharepoint 2010 is different from MOSS in many ways and one of the feature that is more visible is Office like ribbon interface. Ribbon gives an office like feel to Sharepoint and creates a familiar impression among users. Ribbon is available in Home page and In Edit, Display and New Form out the box. Adding additional actions to the default ribbon is easy and it is a straight forward approach of creating a new custom action.

 There are times when we need to create custom pages that live in layouts which will be sometimes be assigned as a custom forms for Lists and libraries. There is direct approach to have ribbon and controls added to these pages similar to Out of the Box Ribbon.  This requires some additional lines of coding to create and add it to these pages. In here I am show you can add ribbon to any layout pages and how you can wire up events to these buttons that go into these ribbons.

Step 1:

Create a Sharepoint Project in Visual Studio 2010.

Step 2
Add an Empty Element File

Step 3
Add Custom Action for Ribbon as Shown below


 <CustomAction Id="BTRibbion" Location="CommandUI.Ribbon" Title="Application Page" Sequence="311">
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition Location="Ribbon.Tabs._children">
          <Tab Title="My Edit" Id="Ribbon.BT.AppPages.Tab" Description="Application Page Tab" Sequence="11">
            <Scaling Id="Ribbon.BT.AppPages.Tab.Scaling">
              <MaxSize GroupId="Ribbon.BT.AppPages.Tab.MainGroup" Id="Ribbon.BT.AppPages.Tab.Scaling.Data.MaxSize" Sequence="11" Size="LargeLarge" />
              <MaxSize Id="Ribbon.BT.AppPages.Tab.Scaling.Actions.MaxSize" Sequence="12" GroupId="Ribbon.BT.AppPages.Tab.ActionsGroup" Size="LargeLarge"/>
              <Scale GroupId="Ribbon.BT.AppPages.Tab.MainGroup" Id="Ribbon.BT.AppPages.Tab.Scaling.Data.MediumMedium" Sequence="21" Size="MediumMedium"/>
              <Scale Id="Ribbon.BT.AppPages.Tab.Scaling.Actions.Popup" Sequence="22" GroupId="Ribbon.BT.AppPages.Tab.ActionsGroup" Size="Popup" />
            </Scaling>
            <Groups Id="Ribbon.BT.AppPages.Tab.Groups">
              <Group Title="Main Group" Id="Ribbon.BT.AppPages.Tab.MainGroup" Description="Main Group"
                     Sequence="11" Template="Ribbon.Templates.Flexible2">
                <Controls Id="Ribbon.BT.AppPages.Tab.MainGroup.Controls">
                  <Button Id="Ribbon.BT.AppPages.Tab.MainGroup.Controls.SaveActivity" Sequence="1" TemplateAlias="o1" ToolTipDescription="Save" ToolTipTitle="Save"
                          LabelText="Save" Image32by32Left="-256" Image32by32Top="-416" Image32by32="/_layouts/$Resources:core,Language;/images/formatmap32x32.png"
                          Image16by16Left="0" Image16by16Top="-112" Image16by16="/_layouts/$Resources:core,Language;/images/formatmap16x16.png" Command="Ribbon.BT.AppPages.Tab.MainGroup.Controls.SaveActivity" />
                 
                  <Button Id="Ribbon.BT.AppPages.Tab.MainGroup.Controls.CancelActivity" Sequence="2" TemplateAlias="o1" ToolTipDescription="Cancel" ToolTipTitle="Cancel"
                          LabelText="Cancel" Image32by32Left="-288" Image32by32Top="-448" Image32by32="/_layouts/$Resources:core,Language;/images/formatmap32x32.png"
                          Image16by16Left="-248" Image16by16Top="0" Image16by16="/_layouts/$Resources:core,Language;/images/formatmap16x16.png" Command="Ribbon.BT.AppPages.Tab.MainGroup.Controls.CancelActivity" />
                </Controls>
              </Group>
              <Group Title="Actions Group" Id="Ribbon.BT.AppPages.Tab.ActionsGroup" Description="Actions Group"
                     Sequence="21" Template="Ribbon.Templates.Flexible2" >
                <Controls Id="Ribbon.BT.AppPages.Tab.ActionsGroup.Controls">
                  <Button Id="Ribbon.BT.AppPages.Tab.ActionsGroup.Controls.DeleteActivity" Sequence="1" TemplateAlias="o1" ToolTipDescription="Delete" ToolTipTitle="Delete"
                         LabelText="Delete" Image32by32Left="-288" Image32by32Top="-448" Image32by32="/_layouts/$Resources:core,Language;/images/formatmap32x32.png"
                         Image16by16Left="-248" Image16by16Top="0" Image16by16="/_layouts/$Resources:core,Language;/images/formatmap16x16.png" Command="Ribbon.BT.AppPages.Tab.ActionsGroup.Controls.Click"/>
                </Controls>
              </Group>
            </Groups>
          </Tab>
        </CommandUIDefinition>
      </CommandUIDefinitions>
     
    </CommandUIExtension>
   
  </CustomAction>


The Custom Action Section has 3 parts

1. Command UI Definition Section to mark the control as Ribbon
2. Group Section for grouping the Controls in the Ribbon
3.Control Section which holds the control and there actions

If you note that I haven't added the CommandUI Handlers section that attaches event to these buttons. The reason for not adding the command UI Handlers is to make these Ribbon control re-useable. I prefer to add it in the code behind of the page but you could always add the UI Handler section that does post back or another operation.

Part 2 : SharePoint Ribbon on Layout Page