Friday, March 2, 2012

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

3 comments:

  1. System.ArgumentException: The Ribbon Tab with id: "Ribbon.BT.AppPages.Tab" has not been made available for this page or does not exist. Use Ribbon.MakeTabAvailable(). at Microsoft.Web.CommandUI.Ribbon.Render(HtmlTextWriter writer) at Microsoft.SharePoint.WebControls.SPRibbon.Render(HtmlTextWriter writer) at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) at System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) at Microsoft.SharePoint.WebControls.AjaxDelta.RenderChildren(HtmlTextWriter output) at System.Web.UI.WebControls.WebControl.RenderContents(HtmlTextWriter writer) at System.Web.UI.WebControls.WebControl.Render(HtmlTextWriter writer) at Microsoft.SharePoint.WebControls.AjaxDelta.Render(HtmlTextWriter writer) at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) at System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) at System.Web.UI.HtmlControls.HtmlForm.RenderChildren(HtmlTextWriter writer) at System.Web.UI.HtmlControls.HtmlContainerControl.Render(HtmlTextWriter writer) at Microsoft.SharePoint.WebControls.SharePointForm.Render(HtmlTextWriter output) at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) at System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) at System.Web.UI.HtmlControls.HtmlContainerControl.Render(HtmlTextWriter writer) at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) at System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) at System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) at Microsoft.SharePoint.WebControls.UnsecuredLayoutsPageBase.RenderChildren(HtmlTextWriter writer) at System.Web.UI.Page.Render(HtmlTextWriter writer) at Microsoft.SharePoint.WebControls.DeltaPage.RenderToBase(HtmlTextWriter writer) at Microsoft.SharePoint.WebControls.DeltaPage.Render(HtmlTextWriter writer) at Microsoft.SharePoint.WebControls.UnsecuredLayoutsPageBase.Render(HtmlTextWriter writer) at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)

    Any idea? Getting above error after implementing the steps you mentioned.

    ReplyDelete
  2. Already followed steps in part 2, still same error is there.

    ReplyDelete
    Replies
    1. @Anuja,

      Could you please tell me where and when you are geting this error? Are you tying to access the page and you get this error? Could you check if you have the ribbon id named "Ribbon.BT.AppPages.Tab" correctly. If you want you can access my source code from the link below. It has the entire project and you can build it and deploy the solution to your SharePoint environment.I have a test page under layouts which you can access and see the button and the ribbon come up. Let me know if you still face problem.

      https://docs.google.com/file/d/0B27bWPlbBdYwMkpEVFhOam9Nc2M/edit?usp=sharing

      Delete