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

简介: 博客地址 http://blog.csdn.net/foxdave1. First of all, let me show you the ribbon modal in our project whcih just like the example from internet.

博客地址 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 = "\r\n<GroupTemplate Id=\"Ribbon.Templates.Flexible2\">" +
                                                                                            "\r\n<Layout Title=\"LargeLarge\">" +
                                                                                            "\r\n<OverflowSection Type=\"OneRow\" TemplateAlias=\"o1\" DisplayMode=\"Large\"/>" +
                                                                                            "\r\n<OverflowSection Type=\"OneRow\" TemplateAlias=\"o2\" DisplayMode=\"Large\"/>" +
                                                                                            "\r\n</Layout>" +
                                                                                            "\r\n<Layout Title=\"LargeMedium\">" +
                                                                                            "\r\n<OverflowSection Type=\"OneRow\" TemplateAlias=\"o1\" DisplayMode=\"Large\"/>" +
                                                                                            "\r\n<OverflowSection Type=\"ThreeRow\" TemplateAlias=\"o2\" DisplayMode=\"Medium\"/>" +
                                                                                            "\r\n</Layout>" +
                                                                                            "\r\n<Layout Title=\"LargeSmall\">" +
                                                                                            "\r\n<OverflowSection Type=\"OneRow\" TemplateAlias=\"o1\" DisplayMode=\"Large\"/>" +
                                                                                            "\r\n<OverflowSection Type=\"ThreeRow\" TemplateAlias=\"o2\" DisplayMode=\"Small\"/>" +
                                                                                            "\r\n</Layout>" +
                                                                                            "\r\n<Layout Title=\"MediumLarge\">" +
                                                                                            "\r\n<OverflowSection Type=\"ThreeRow\" TemplateAlias=\"o1\" DisplayMode=\"Medium\"/>" +
                                                                                            "\r\n<OverflowSection Type=\"OneRow\" TemplateAlias=\"o2\" DisplayMode=\"Large\"/>" +
                                                                                            "\r\n</Layout>" +
                                                                                            "\r\n<Layout Title=\"MediumMedium\">" +
                                                                                            "\r\n<OverflowSection Type=\"ThreeRow\" TemplateAlias=\"o1\" DisplayMode=\"Medium\"/>" +
                                                                                            "\r\n<OverflowSection Type=\"ThreeRow\" TemplateAlias=\"o2\" DisplayMode=\"Medium\"/>" +
                                                                                            "\r\n</Layout>" +
                                                                                            "\r\n<Layout Title=\"MediumSmall\">" +
                                                                                            "\r\n<OverflowSection Type=\"ThreeRow\" TemplateAlias=\"o1\" DisplayMode=\"Medium\"/>" +
                                                                                            "\r\n<OverflowSection Type=\"ThreeRow\" TemplateAlias=\"o2\" DisplayMode=\"Small\"/>" +
                                                                                            "\r\n</Layout>" +
                                                                                            "\r\n<Layout Title=\"SmallLarge\">" +
                                                                                            "\r\n<OverflowSection Type=\"ThreeRow\" TemplateAlias=\"o1\" DisplayMode=\"Small\"/>" +
                                                                                            "\r\n<OverflowSection Type=\"OneRow\" TemplateAlias=\"o2\" DisplayMode=\"Large\"/>" +
                                                                                            "\r\n</Layout>" +
                                                                                            "\r\n<Layout Title=\"SmallMedium\">" +
                                                                                            "\r\n<OverflowSection Type=\"ThreeRow\" TemplateAlias=\"o1\" DisplayMode=\"Small\"/>" +
                                                                                            "\r\n<OverflowSection Type=\"ThreeRow\" TemplateAlias=\"o2\" DisplayMode=\"Medium\"/>" +
                                                                                            "\r\n</Layout>" +
                                                                                            "\r\n<Layout Title=\"SmallSmall\">" +
                                                                                            "\r\n<OverflowSection Type=\"ThreeRow\" TemplateAlias=\"o1\" DisplayMode=\"Small\"/>" +
                                                                                            "\r\n<OverflowSection Type=\"ThreeRow\" TemplateAlias=\"o2\" DisplayMode=\"Small\"/>" +
                                                                                            "\r\n</Layout>" +
                                                                                            "\r\n<Layout Title=\"Popup\" LayoutTitle=\"LargeMedium\" />" +
                                                                                            "\r\n</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.

相关文章
|
6月前
|
UED
SAP Commerce Cloud SmartEdit Advanced Edit 点了 Save 按钮之后的 CMS 请求
SAP Commerce Cloud SmartEdit Advanced Edit 点了 Save 按钮之后的 CMS 请求
30 0
upload Fiori application to ABAP server via report /UI5/UI5_REPOSITORY_LOAD
upload Fiori application to ABAP server via report /UI5/UI5_REPOSITORY_LOAD
110 0
upload Fiori application to ABAP server via report /UI5/UI5_REPOSITORY_LOAD
|
JSON Go 数据格式
How to create extension project from standard CRM Fiori application
How to create extension project from standard CRM Fiori application
116 0
How to create extension project from standard CRM Fiori application
|
开发框架 JavaScript 前端开发
使用HANA Web-based Development Workbench创建最简单的Server Side JavaScript
使用HANA Web-based Development Workbench创建最简单的Server Side JavaScript
使用HANA Web-based Development Workbench创建最简单的Server Side JavaScript
|
Java Maven 数据库
SAP Hybris(Commerce)安装recipe包含的三个任务,setup, initialize和start
SAP Hybris(Commerce)安装recipe包含的三个任务,setup, initialize和start
128 0
SAP Hybris(Commerce)安装recipe包含的三个任务,setup, initialize和start
SAP XS Engine 里的 HANA live report metadata
SAP XS Engine 里的 HANA live report metadata
107 0
SAP XS Engine 里的 HANA live report metadata
SAP CRM Product simple search的启用步骤
SAP CRM Product simple search的启用步骤
109 0
SAP CRM Product simple search的启用步骤
|
Android开发
Mock server的实现 - run Fiori application using mock data in offline mode
Mock server的实现 - run Fiori application using mock data in offline mode
Mock server的实现 - run Fiori application using mock data in offline mode
|
移动开发 Java HTML5
Cross domain issue for an pure HTML5 application on SAP Cloud Platform
I have created an SAPUI5 application using SAP WebIDE and deployed it to SAP Cloud Platform as an HTML5 application. This is an pure HTML5 application, not an Java application or others. But when we got resources of the HTML5 application from another domain, there is an error message indicates cross
108 0
Cross domain issue for an pure HTML5 application on SAP Cloud Platform

热门文章

最新文章