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

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

Ribbon ToggleButton

Веб-часть

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

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

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

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

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

  1. function SetToggleState(val) {
  2.     document.getElementById('<%= ToggleState.ClientID %>').value = val;
  3. }
  4.     
  5. function GetToggleState() {
  6.     return document.getElementById('<%= ToggleState.ClientID %>').value;
  7. }

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

ToggleButton

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

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

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

RibbonTab

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

  1. // Вкладка
  2. var tab = new RibbonTab("DemoToggleTab""Toggle Demo")
  3. {
  4.     // Порядковый номер, для того, чтобы
  5.     // вкладка располагалась справа от стандартных вкладок "Обзор" и "Страница"
  6.     Sequence = 1001
  7. };
  8.  
  9. // Группа
  10. var group = new RibbonGroup("Group""Group");
  11.  
  12. // Две секции с разделетилем между ними
  13. group.Sections = new[]
  14.     {
  15.         sectionA, 
  16.         RibbonGroupSection.Divider, 
  17.         sectionB
  18.     };
  19.  
  20. // Добавляем группу во вкладку
  21. tab.Groups = new[]
  22.     {
  23.         group
  24.     };
  25.  
  26. // Добавляем новую вкладку и делаем её активной по умолчанию
  27. RibbonManager.Current.AddTabToPage(tab, Page, true);

Результат

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

Ribbon ToggleButton

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


Поделиться

Коментарии