SharePoint Ribbon API. Использование ToggleButton

22 января, 2014

Пример работы с ToggleButton при использовании SharePoint Ribbon API. Я покажу как создать новую вкладку, разместить в ней контролы и отобразить её на странице.

Веб-часть

Для регистрации риббон-элементов, используя SharePoint Ribbon API, необходимо иметь "доступ" к текущей странице (если быть точным необходим SPRibbon.Current). Поэтому самым простым будет создать веб-часть, которая будет регистрировать элементы рибона.

Я создал визуальную веб-часть, в разметке которой (.ascx-файл) добавил TextBox. Он понадобится для хранения текущего состояния:

<asp:TextBox ID="ToggleState" runat="server" Text="A0"></asp:TextBox>

Состояние можно хранить по-разному: глобальная переменная в javascript, хранить её в качестве значения атрибута любого DOM-элемента страницы. Вариантом уйма, я выбрал именно TextBox исключительно для наглядности.

Для того, чтобы записывать и получать текущее состояние в веб-часть добавлены две крайне простые javascript-функции:

function SetToggleState(val) {
    document.getElementById('<%= ToggleState.ClientID %>').value = val;
}
    
function GetToggleState() {
    return document.getElementById('<%= ToggleState.ClientID %>').value;
}

Думаю, здесь пояснения не требуются.

ToggleButton

В мойм примере кнопок будет несколько, инициализация их происходит однообразно. Вот пример одной из них:

// Инициализация ToggleButton, Title и ID идентичны
var toggleButtonA0 = new RibbonToggleButton("ButtonA0", "ButtonA0")
    {
        // Иконка из стандартного набора SharePoint
        Image = RibbonImageDefinition.Standard15(2, 2),
        // При активации, проверяем текущее состояние
        // и устанавливаем флаг properties.On, если оно равно "A0"
        OnClientActivate = @"properties.On = (GetToggleState() == ""A0"");",
        // При клике на кнопку, записываем новое состояние 
        // и обновляем рибон
        OnClientClick = @"SetToggleState(""A0""); RefreshCommandUI();"
    }

При активации ToggleButton можно использовать объект properties, свойство On которого отвечает за состояние переключателя (true - нажата, false - нет). При задании нового состояния вызывается метод RefreshCommandUI для того, чтобы "заставить" SharePoint инициализировать все элементы, в том числе исполнить javascript-код, указанный в свойстве OnClientActivate.

RibbonTab

Созданные кнопки мы помещаем в следующую иерархию элементов рибона (сверху-вниз): вкладка - группа - секция. В моём примере секций будет две с разделителем между ними:

// Вкладка
var tab = new RibbonTab("DemoToggleTab", "Toggle Demo")
{
    // Порядковый номер, для того, чтобы
    // вкладка располагалась справа от стандартных вкладок "Обзор" и "Страница"
    Sequence = 1001
};
 
// Группа
var group = new RibbonGroup("Group", "Group");
 
// Две секции с разделетилем между ними
group.Sections = new[]
    {
        sectionA, 
        RibbonGroupSection.Divider, 
        sectionB
    };
 
// Добавляем группу во вкладку
tab.Groups = new[]
    {
        group
    };
 
// Добавляем новую вкладку и делаем её активной по умолчанию
RibbonManager.Current.AddTabToPage(tab, Page, true);

Результат

В результате мы получаем простую вкладку с переключателями:

Получать значение текущей нажатой кнопки можно как на сервере, используя свойство ToggleState.Text, так и на клиенте.

Если вы хотите улучшить внутреннюю коммуникацию и сотрудничество, рассмотрите возможность внедрения Справочника сотрудников для SharePoint Online от Vitextra. Его интуитивно понятный интерфейс и мощная функция поиска позволяют легко находить и связываться с коллегами.