Pages

Thursday, March 8, 2012

Sharepoint Ribbon on Layout Page Part 2


In my previous post which you can access here I have described how you can create Share UI Ribbon with Custom Tab and groups. Here in this post we are going to see how to include it to the layout pages.

One of the important thing to remember while dealing with Ribbon is to create a PageComponent.js file which kind of template file for ribbon. This file is what empowers the ribbon controls defined in the control section to perform the operation specified in the handler section or specified in the code behind. The page component file needs to be added to the layouts folder.

Steps to Create Page Component

1. In visual studio add a mapped folders for layouts
2. you can add the PageComponent.js file either in the root of layouts or in any folder where you defined your page which will host the ribbon.

In my case I am adding it at the layouts folder itself which you can see in the code section below.

PageComponent.js

function ULS_SP() { if (ULS_SP.caller) { ULS_SP.caller.ULSTeamName = "Windows SharePoint Services 4"; ULS_SP.caller.ULSFileName = "SP.Ribbon.Custom.UI.js"; } }

Type.registerNamespace('SP.Ribbon.Custom.UI');

// RibbonApp Page Component
SP.Ribbon.Custom.UI.RibbonAppPageComponent = function () {
    ULS_SP();
    SP.Ribbon.Custom.UI.RibbonAppPageComponent.initializeBase(this);
}
SP.Ribbon.Custom.UI.RibbonAppPageComponent.initialize = function () {
    ULS_SP();
    ExecuteOrDelayUntilScriptLoaded(Function.createDelegate(null, SP.Ribbon.Custom.UI.RibbonAppPageComponent.initializePageComponent), 'SP.Ribbon.js');


} /SP.Ribbon.Custom.UI.js" />

SP.Ribbon.Custom.UI.RibbonAppPageComponent.initializePageComponent = function () {
    ULS_SP();
    var ribbonPageManager = SP.Ribbon.PageManager.get_instance();
    if (null !== ribbonPageManager) {
        ribbonPageManager.addPageComponent(SP.Ribbon.Custom.UI.RibbonAppPageComponent.instance);
        ribbonPageManager.get_focusManager().requestFocusForComponent(SP.Ribbon.Custom.UI.RibbonAppPageComponent.instance);

    }

}
SP.Ribbon.Custom.UI.RibbonAppPageComponent.refreshRibbonStatus = function () {
    SP.Ribbon.PageManager.get_instance().get_commandDispatcher().executeCommand(Commands.CommandIds.ApplicationStateChanged, null);

}
SP.Ribbon.Custom.UI.RibbonAppPageComponent.prototype = {
    getFocusedCommands: function () {
        ULS_SP();
        return [];
    },
    getGlobalCommands: function () {
        ULS_SP();
        return getGlobalCommands();
    },
    isFocusable: function () {
        ULS_SP();
        return true;
    },
    receiveFocus: function () {
        ULS_SP();
        return true;
    },
    yieldFocus: function () {
        ULS_SP();
        return true;
    },
    canHandleCommand: function (commandId) {
        ULS_SP();
        return canHandleCommand(commandId);
    },
    handleCommand: function (commandId, properties, sequence) {
        ULS_SP();
        return handleCommand(commandId, properties, sequence);

    }
}


// Register classes
SP.Ribbon.Custom.UI.RibbonAppPageComponent.registerClass('SP.Ribbon.Custom.UI.RibbonAppPageComponent', CUI.Page.PageComponent);
SP.Ribbon.Custom.UI.RibbonAppPageComponent.instance = new SP.Ribbon.Custom.UI.RibbonAppPageComponent();

// Notify waiting jobs
NotifyScriptLoadedAndExecuteWaitingJobs("SP.Ribbon.Custom.UI.js");
SP.Ribbon.TrackTabPageComponent.registerWithPageManager();


You can use this page component file as is but you can also implement your own version of this file. All this file does is registers the controls using SP.Ribbon.UI.js file.

Now we have the PageComponent.js file and now we are half way through in adding the ribbon to the page.

Adding Ribbon to the page is fairly simple and straight forward. Here is how you can add the ribbon to the page

 protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
            SPRibbon current = SPRibbon.GetCurrent(this.Page);
            if (current != null)
            {
                current.CommandUIVisible = true;
                current.MakeTabAvailable("Ribbon.BT.AppPages.Tab");
                current.InitialTabId = "Ribbon.BT.AppPages.Tab";
                current.Minimized = false;
                current.CommandUIVisible = true;
                current.Enabled = true;


                // Create ribbon commands
                List<IRibbonCommand> commands = new List<IRibbonCommand>();
                commands.Add(new SPRibbonCommand("Ribbon.BT.AppPages.Tab.Groups", ""));
                commands.Add(new SPRibbonCommand("Ribbon.BT.AppPages.Tab.MainGroup.Controls.SaveActivity", "javascript:__doPostBack('__Page', '')"));

                //commands.Add(new SPRibbonPostBackCommand("Ribbon.BT.AppPages.Tab.MainGroup.Controls.SaveActivity",
                                                                //this, "NewScorecard", null, "true"));

                // Register ribbon scripts
                SPRibbonScriptManager spRibbonScriptManager = new SPRibbonScriptManager();
                spRibbonScriptManager.RegisterGetCommandsFunction(this.Page, "getGlobalCommands", commands);
                spRibbonScriptManager.RegisterCommandEnabledFunction(this.Page, "canHandleCommand", commands);
                spRibbonScriptManager.RegisterHandleCommandFunction(this.Page, "handleCommand", commands);

                //Register Ribbon Page Components
                CustomScriptManager.RegisterInitializeFunction(this, "InitPageComponent", "/_layouts/", "PageComponent.js", false, "SP.Ribbon.Custom.UI.RibbonAppPageComponent.initialize()");

             
            }
           
        }



 In here I am overriding the onload event and not the page load so as soon as the control is bound to be loaded the Ribbon gets in to the page. The "InitialTabId" property is set to refer to the custom Ribbon Tab. 

I am adding action to only one of the 3 controls in my tab which does a post back.

I am using the Scriptmanager to register the pagecomponent.js and in here as I mentioned earlier I am refering the path as /_layouts/

This action is going to register the pagecomponent when the page is loading.

In this code above I am using javascript to trigger postback from the ribbon controls. you can also create a custom user control and raise postback events. I will explain this in my next post. If you have any comments please post it comment section.




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