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.