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, так и на клиенте.

Виталий Жуков

Виталий Жуков

SharePoint архитектор, разработчик, тренер, Microsoft MVP (Office Development). Более 15 лет опыта работы с SharePoint, Dynamics CRM, Office 365, и другими продуктами и сервисами Microsoft.

Смотрите также

EntityFramework. Оптимистические блокировки

EntityFramework. Оптимистические блокировки

Linq to Sharepoint. Особенности

Linq to Sharepoint. Особенности

SharePoint 2010. Настройка входящей почты для кастомного списка

SharePoint 2010. Настройка входящей почты для кастомного списка

SharePoint 2010. PeopleEditor. Установка значения

SharePoint 2010. PeopleEditor. Установка значения

Linq to SharePoint. Особенности. Часть 2

Linq to SharePoint. Особенности. Часть 2