javascript - 通过 javascript 将下拉列表添加到自定义共享点功能区选项卡

Question

我正在尝试使用 JavaScript 将下拉列表添加到自定义共享点功能区栏选项卡，我知道这不是推荐的方法，我应该使用声明性方法。我已经设法创建选项卡、组并向其添加按钮，但由于某种原因，创建下拉列表不会执行任何操作，也不会出现任何错误。

这是我用来创建选项卡元素的函数

function CreateCustomTab(tabName, tabTitle, tabGroup, tabToolTip) {
        var ribbon = SP.Ribbon.PageManager.get_instance().get_ribbon();
        var tab;

        if (ribbon !== null) {
            tab = new CUI.Tab(ribbon, tabName + ".Tab", tabTitle, tabToolTip, tabName + ".Tab.Command", false, '', null);
            ribbon.addChild(tab);
        }
        return tab
    }
    function CreateTabGroup(tab, tabName, groupTitle, groupToolTip) {
        var ribbon = SP.Ribbon.PageManager.get_instance().get_ribbon();
        var group = new CUI.Group(ribbon, tabName + ".Tab.Group", groupTitle, groupToolTip, tabName + ".Group.Command", "test");
        tab.addChild(group);
        return group;
    }
    function CreateLayout(group, tabName, LayoutTitle) {
        var ribbon = SP.Ribbon.PageManager.get_instance().get_ribbon();
        var layout = new CUI.Layout(ribbon, tabName + ".Tab.Layout", LayoutTitle);
        group.addChild(layout);
        return layout;
    }
    function CreateDropDownList(tabName, layout, layoutTitle, listName, toolTip, listLabel, ToolTipTitle) {
        var ribbon = SP.Ribbon.PageManager.get_instance().get_ribbon();
        var section = new CUI.Section(ribbon, tabName + ".Tab.Section", 2, "Top"); //2==One Row 
        layout.addChild(section);
        var controlProperties = new CUI.ControlProperties();
        controlProperties.Command = listName + ".DropDown.Command";
        controlProperties.Id = listName + ".ControlProperties";
        controlProperties.TemplateAlias = "o1";
        controlProperties.ToolTipDescription = toolTip;
      //  controlProperties.Image32by32 = (Image32by32RelativePath ? Image32by32RelativePath : '_layouts/15/images/placeholder32x32.png');
        controlProperties.ToolTipTitle = ToolTipTitle;
        controlProperties.LabelText = listLabel;

        var dropDown = new CUI.Controls.DropDown(ribbon, listName + ".DropDown", controlProperties, ["Test1","Test2","Test3"]);
        var controlComponent = dropDown.createComponentForDisplayMode('Large');
        var row1 = section.getRow(1);
        row1.addChild(controlComponent);
    }
    function CreateButton(tabName, layout, layoutTitle, buttonName, toolTip, buttonText, ToolTipTitle,  Image32by32RelativePath) {
        var ribbon = SP.Ribbon.PageManager.get_instance().get_ribbon();
        var section = new CUI.Section(ribbon, tabName + ".Tab.Section", 2, "Top"); //2==One Row 
        layout.addChild(section);
        var controlProperties = new CUI.ControlProperties();
        controlProperties.Command = buttonName + ".Button.Command";
        controlProperties.Id = buttonName + ".ControlProperties";
        controlProperties.TemplateAlias = "o1";
        controlProperties.ToolTipDescription = toolTip;
        controlProperties.Image32by32 = (Image32by32RelativePath ? Image32by32RelativePath : '_layouts/15/images/placeholder32x32.png');
        controlProperties.ToolTipTitle = ToolTipTitle;
        controlProperties.LabelText = buttonText;

        var button = new CUI.Controls.Button(ribbon, buttonName + ".Button", controlProperties);
        //var controlComponent = new CUI.ControlComponent(ribbon, buttonName + ".MenuItem.Button", "Large",button)
        var controlComponent = button.createComponentForDisplayMode('Large');
        var row1 = section.getRow(1);
        row1.addChild(controlComponent);
    }       

这是它们的名称

   SP.SOD.executeOrDelayUntilScriptLoaded(function () {

        var pm = SP.Ribbon.PageManager.get_instance();

        pm.add_ribbonInited(function () {

            var tab = CreateCustomTab("SomeTab", "Some Tab", "View Format", "Use this tab");
            var group = CreateTabGroup(tab, "SomeTab", "View Format", "Switch between");
            var layout = CreateLayout(group, "SomeTab", "SomeTabLayout");

            CreateButton("SomeTab", layout,         "SomeTabLayout", "ListViewButton",      "Switch to list view, this displays a grid with the items ungrouped in an editable table!", "List View", "Table List View");
            CreateButton("SomeTab", layout,         "SomeTabLayout", "HierarchyButton",     "Switch to tree view, this displays a grid with the items grouped in a parent child relationship!", "Tree View","Hierarchy view");

            var hierarchyEditGroup = CreateTabGroup(tab, "SomeTab", "Hierarchy Edit", "Edit hierarchy");

            var hierarchyLayout = CreateLayout(hierarchyEditGroup, "SomeTab", "HierarchyLayout");

            CreateButton("SomeTab", hierarchyLayout, "HierarchyLayout", "EditHierarchyButton", "Edit current hierarchy", "Edit Tree", "Edit current hierarchy");


            var ViewsGroup = CreateTabGroup(tab, "ISSQeueuListTab", "Views", "Change data views");
            var ViewsLayout = CreateLayout(ViewsGroup, "SomeTab", "ViewsLayOut"); 
            CreateDropDownList("SomeTab", ViewsLayout, "Current View", "DataViewList", "Change the the current view from the available public and private views", "Current View", "View Selection");

            group.selectLayout("SomeTabLayout");
            hierarchyEditGroup.selectLayout("HierarchyLayout");
            SelectRibbonTab("SomeTab.Tab", true);
            SelectRibbonTab("Ribbon.Read", true);
            $("#Ribbon\\.WebPartPage-title").hide();


            var Commands = [];
            Commands.push({ name: "SomeTab.Tab.Command", enabled: true, handler: function (a, b, c) {  } });
            Commands.push({ name: "SomeTab.Group.Command", enabled: true, handler: function (a, b, c) {  } });
            Commands.push({ name: "DataViewList.DropDown.Command", enabled: true, handler: function () { }});
            Commands.push({
                name: "HierarchyButton.Button.Command", enabled: true, handler: function (CommandID, properties, seq) {
                    AppFrame.contentWindow.postMessage("ShowTreeView()", "*");
                    var Ribbon = SOMESpAppSPPage.get_instance();
                    var button = Ribbon.GetCommand("EditHierarchyButton.Button.Command");
                    button.enabled = true; 
                    RefreshCommandUI(); 
                }
            });
            Commands.push({
                name: "ListViewButton.Button.Command", enabled: true, handler: function (CommandID, properties, seq) {
                    AppFrame.contentWindow.postMessage("ShowListView()", "*")
                    var Ribbon = SOMESpAppSPPage.get_instance();
                    var button = Ribbon.GetCommand("EditHierarchyButton.Button.Command");
                    button.enabled = false;
                    RefreshCommandUI();
                }
            });
            Commands.push({
                name: "EditHierarchyButton.Button.Command", enabled: false, handler: function (CommandID, properties, seq) {
                    AppFrame.contentWindow.postMessage("ShowHierarchyEdit()", "*");
                }
            });
            SOMESpAppSPPage.initializePageComponent(Commands);
        });

        var ribbon = null;
        try {
            ribbon = pm.get_ribbon();
        }
        catch (e) { }

        if (!ribbon) {
            if (typeof (_ribbonStartInit) == "function")
                _ribbonStartInit(_ribbon.initialTabId, false, null);
        }
        else {

            CreateCustomTab("SomeTab", "SOMESpApp List", "SOMESpAppTabGroup", "Use this tab to intertact with the ISS Queue");


        }
    }, "sp.ribbon.js");

我必须更改一些变量的名称，但这正是我正在使用的代码。按钮和选项卡可以工作，但下拉菜单不会有人知道。

Answer 1

将“function CreateDropDownList”中控件的 TemplateAlias 从“o1”更改为“o2”，我推测这将开始工作:

controlProperties.TemplateAlias = "o2";