Блог

Я пытаюсь добавить выпадающий список на пользовательскую вкладку панели ленты sharepoint с помощью 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");
  

Мне пришлось изменить некоторые имена переменных, но это точный код, который я использую. кнопки и вкладки работают, но в раскрывающемся списке ни у кого не будет идеи.

Измените значения шаблонов для элемента управления в «function CreateDropDownList» с «o1» на «o2», и я предполагаю, что это начнет работать:

controlProperties.TemplateAlias = «o2»;