Custom Ribbon in SharePoint 2010 & which not wrok when migrate from 2010 to 2013

博客地址 http://blog.csdn.net/foxdave

1. First of all, let me show you the ribbon modal in our project whcih just like the example from internet.

>>SPMIPRibbon.cs

I've add some clear comments.

using System.Collections.Generic;
using System.Reflection;
using System.Web.UI;
using System.Xml;
using Microsoft.SharePoint.WebControls;

namespace Common
{
    public class SPMIPRibbon
    {
        //Ribbon definition template
        private const string contextualTabTemplate = "
<GroupTemplate Id="Ribbon.Templates.Flexible2">" +
                                                                                            "
<Layout Title="LargeLarge">" +
                                                                                            "
<OverflowSection Type="OneRow" TemplateAlias="o1" DisplayMode="Large"/>" +
                                                                                            "
<OverflowSection Type="OneRow" TemplateAlias="o2" DisplayMode="Large"/>" +
                                                                                            "
</Layout>" +
                                                                                            "
<Layout Title="LargeMedium">" +
                                                                                            "
<OverflowSection Type="OneRow" TemplateAlias="o1" DisplayMode="Large"/>" +
                                                                                            "
<OverflowSection Type="ThreeRow" TemplateAlias="o2" DisplayMode="Medium"/>" +
                                                                                            "
</Layout>" +
                                                                                            "
<Layout Title="LargeSmall">" +
                                                                                            "
<OverflowSection Type="OneRow" TemplateAlias="o1" DisplayMode="Large"/>" +
                                                                                            "
<OverflowSection Type="ThreeRow" TemplateAlias="o2" DisplayMode="Small"/>" +
                                                                                            "
</Layout>" +
                                                                                            "
<Layout Title="MediumLarge">" +
                                                                                            "
<OverflowSection Type="ThreeRow" TemplateAlias="o1" DisplayMode="Medium"/>" +
                                                                                            "
<OverflowSection Type="OneRow" TemplateAlias="o2" DisplayMode="Large"/>" +
                                                                                            "
</Layout>" +
                                                                                            "
<Layout Title="MediumMedium">" +
                                                                                            "
<OverflowSection Type="ThreeRow" TemplateAlias="o1" DisplayMode="Medium"/>" +
                                                                                            "
<OverflowSection Type="ThreeRow" TemplateAlias="o2" DisplayMode="Medium"/>" +
                                                                                            "
</Layout>" +
                                                                                            "
<Layout Title="MediumSmall">" +
                                                                                            "
<OverflowSection Type="ThreeRow" TemplateAlias="o1" DisplayMode="Medium"/>" +
                                                                                            "
<OverflowSection Type="ThreeRow" TemplateAlias="o2" DisplayMode="Small"/>" +
                                                                                            "
</Layout>" +
                                                                                            "
<Layout Title="SmallLarge">" +
                                                                                            "
<OverflowSection Type="ThreeRow" TemplateAlias="o1" DisplayMode="Small"/>" +
                                                                                            "
<OverflowSection Type="OneRow" TemplateAlias="o2" DisplayMode="Large"/>" +
                                                                                            "
</Layout>" +
                                                                                            "
<Layout Title="SmallMedium">" +
                                                                                            "
<OverflowSection Type="ThreeRow" TemplateAlias="o1" DisplayMode="Small"/>" +
                                                                                            "
<OverflowSection Type="ThreeRow" TemplateAlias="o2" DisplayMode="Medium"/>" +
                                                                                            "
</Layout>" +
                                                                                            "
<Layout Title="SmallSmall">" +
                                                                                            "
<OverflowSection Type="ThreeRow" TemplateAlias="o1" DisplayMode="Small"/>" +
                                                                                            "
<OverflowSection Type="ThreeRow" TemplateAlias="o2" DisplayMode="Small"/>" +
                                                                                            "
</Layout>" +
                                                                                            "
<Layout Title="Popup" LayoutTitle="LargeMedium" />" +
                                                                                            "
</GroupTemplate>";

        /// <summary>
        /// Add Ribbon UI Method
        /// </summary>
        /// <param name="page">current control</param>
        /// <param name="tab">ribbon definition</param>
        /// <param name="tabID">ribbon tab id</param>
        /// <param name="isAvailable">is available</param>
        private static void AddRibbonTab(Page page, string tab, string tabID, bool isAvailable)
        {
            SPRibbon current = SPRibbon.GetCurrent(page);
            if (current != null)
            {
                XmlDocument doc = new XmlDocument();
                doc.LoadXml(tab);
                current.RegisterDataExtension(doc.FirstChild, "Ribbon.Tabs._children");
                doc.LoadXml(contextualTabTemplate);
                current.RegisterDataExtension(doc.FirstChild, "Ribbon.Templates._children");
                current.Minimized = false;
                current.CommandUIVisible = true;
                if (!current.IsTabAvailable(tabID))
                {
                    current.MakeTabAvailable(tabID);
                }
                if (isAvailable)
                {
                    current.InitialTabId = tabID;
                }
            }
        }

        /// <summary>
        /// Add Ribbon Event Method
        /// </summary>
        /// <param name="page">current control</param>
        /// <param name="cmds">event detail</param>
        private static void AddTabEvents(Page page, List<IRibbonCommand> cmds)
        {
            SPRibbonScriptManager manager = new SPRibbonScriptManager();
            typeof(SPRibbonScriptManager).GetMethod("RegisterInitializeFunction", BindingFlags.NonPublic | BindingFlags.Instance).Invoke(manager, new object[] { page, "InitPageComponent", "/_layouts/SCRIPTS/SPMIPRibbon.js", false, "SPMIPRibbon.PageComponent.initialize()" });
            manager.RegisterGetCommandsFunction(page, "getGlobalCommands", cmds);
            manager.RegisterCommandEnabledFunction(page, "commandEnabled", cmds);
            manager.RegisterHandleCommandFunction(page, "handleCommand", cmds);
        }

        /// <summary>
        /// Set Ribbon Method
        /// </summary>
        /// <param name="page">current control</param>
        /// <param name="tab">ribbon definition</param>
        /// <param name="tabID">ribbon tab id</param>
        /// <param name="cmds">event detail</param>
        /// <param name="isAvailable">is available</param>
        public static void Set(Page page, string tab, string tabID, List<IRibbonCommand> cmds, bool isAvailable)
        {
            AddRibbonTab(page, tab, tabID, isAvailable);
            AddTabEvents(page, cmds);
        }
    }
}

>>SPMIPRibbon.js

Ribbon command javascript file

function ULS_SP() {
    if (ULS_SP.caller) {
        ULS_SP.caller.ULSTeamName = "Windows SharePoint Services 4";
        ULS_SP.caller.ULSFileName = "SPMIPRibbon.js";
    }
}

Type.registerNamespace('SPMIPRibbon');

SPMIPRibbon.PageComponent = function () {
    ULS_SP();
    SPMIPRibbon.PageComponent.initializeBase(this);
}

SPMIPRibbon.PageComponent.initialize = function () {
    ULS_SP();
    ExecuteOrDelayUntilScriptLoaded(Function.createDelegate(null, SPMIPRibbon.PageComponent.initializePageComponent), 'SP.Ribbon.js');
}

SPMIPRibbon.PageComponent.initializePageComponent = function () {
    ULS_SP();
    var ribbonPageManager = SP.Ribbon.PageManager.get_instance();
    if (null !== ribbonPageManager) {
        ribbonPageManager.addPageComponent(SPMIPRibbon.PageComponent.instance);
        ribbonPageManager.get_focusManager().requestFocusForComponent(SPMIPRibbon.PageComponent.instance);
    }
}

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

SPMIPRibbon.PageComponent.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 commandEnabled(commandId);
    },
    handleCommand: function (commandId, properties, sequence) {
        ULS_SP();
        return handleCommand(commandId, properties, sequence);
    }
}
SPMIPRibbon.PageComponent.registerClass('SPMIPRibbon.PageComponent', CUI.Page.PageComponent);
SPMIPRibbon.PageComponent.instance = new SPMIPRibbon.PageComponent();
NotifyScriptLoadedAndExecuteWaitingJobs("SPMIPRibbon.js");

Now let us see how to use it

Declare a ribbon definition like this as below

private string ribbonTab = @"
          <Tab Id=""SPMIPRibbon.Tab1"" Sequence=""400"" Description="""" Title=""清单采购一览"">
            <Scaling Id=""SPMIPRibbon.Scaling1"">
              <MaxSize Id=""SPMIPRibbon.MaxSize1"" Sequence=""10"" GroupId=""SPMIPRibbon.Group1"" Size=""LargeLarge""/>
              <Scale Id=""SPMIPRibbon.Scale1"" Sequence=""20"" GroupId=""SPMIPRibbon.Group1"" Size=""Popup"" />
            </Scaling>
            <Groups Id=""SPMIPRibbon.Groups1"">
              <Group Id=""SPMIPRibbon.Group1""
                     Sequence=""10"" 
                     Description=""""
                     Title=""操作区""
                     Image32by32Popup=""/_layouts/2052/images/formatmap32x32.png"" Image32by32PopupTop=""-416"" Image32by32PopupLeft=""-256""
                     Template=""Ribbon.Templates.Flexible2"" >
                <Controls Id=""SPMIPRibbon.Controls1"">
                <Button
                    Id=""SPMIPRibbon.Button2""
                    Sequence=""20""
                    Command=""SPMIPRibbon.Command2""
                    Image32by32=""/_layouts/2052/images/formatmap32x32.png"" Image32by32Top=""-128"" Image32by32Left=""-96""
                    LabelText=""编辑""
                    ToolTipTitle=""编辑采购清单""
                    ToolTipDescription=""编辑采购清单""
                    TemplateAlias=""o1""/>
                <Button
                    Id=""SPMIPRibbon.Button4""
                    Sequence=""30""
                    Command=""SPMIPRibbon.Command4""
                    Image32by32=""/_layouts/2052/images/formatmap32x32.png"" Image32by32Top=""-160"" Image32by32Left=""-416""
                    LabelText=""确认招标""
                    ToolTipTitle=""确认招标采购清单""
                    ToolTipDescription=""确认招标采购清单""
                    TemplateAlias=""o1""/>
                <Button
                    Id=""SPMIPRibbon.Button5""
                    Sequence=""30""
                    Command=""SPMIPRibbon.Command5""
                    Image32by32=""/_layouts/2052/images/formatmap32x32.png"" Image32by32Top=""-320"" Image32by32Left=""-224""
                    LabelText=""上传附件""
                    ToolTipTitle=""上传采购清单附件""
                    ToolTipDescription=""上传采购清单附件""
                    TemplateAlias=""o1""/>
                </Controls>
              </Group>
            </Groups>
          </Tab>";

Override OnPreRender method and add the following code

var cmds = new System.Collections.Generic.List<IRibbonCommand>();
            cmds.Add(new SPRibbonCommand("SPMIPRibbon.Command2", "gdv.GetSelectedFieldValues('ID;Qing_dlx;Chuang_jzh', Edit);", "CheckEditEnabled();"));
            cmds.Add(new SPRibbonCommand("SPMIPRibbon.Command5", "gdv.GetSelectedFieldValues('ID;Qing_dlx;Chuang_jzh', Upload);", "CheckEditEnabled();"));
            cmds.Add(new SPRibbonCommand("SPMIPRibbon.Command4", "gdv.GetSelectedFieldValues('ID;Qing_dlx;Que_rzhb;Chuang_jzh', Confrim);", "CheckEditEnabled();"));
            SPMIPRibbon.Set(Page, ribbonTab, "SPMIPRibbon.Tab1", cmds, true);

Enjoy it.

 

Here is one problem when we migrate it from SP14 to SP15, we may get error message as "getGlobalCommands not found".

The reason is in SharePoint 2013, the SPRibbonScriptManager class's execution is slower than the js execution, when the js object initializes, the needed commands have not generated.

To solve this, we need to do a little change to the js file.

Change the

ExecuteOrDelayUntilScriptLoaded(Function.createDelegate(null, SPMIPRibbon.PageComponent.initializePageComponent), 'SP.Ribbon.js');

to

_spBodyOnLoadFunctionNames.push("SPMIPRibbon.PageComponent.initializePageComponent");

That is all, thanks.