Создание собственной кнопки ленты на хост-сайте надстройки SharePoint

Это девятая статья в серии статей об основах разработки надстроек SharePoint, размещенных в SharePoint. Сначала необходимо ознакомиться с надстройками SharePoint и предыдущими статьями этой серии, которые см. в статье Начало создания надстроек SharePoint, размещенных в SharePoint, | Дальнейшие действия.

Примечание.

Если вы изучали предыдущие статьи этой серии о надстройках, размещаемых в SharePoint, то у вас уже есть решение для Visual Studio, которое можно использовать для работы с этой статьей. Кроме того, вы можете скачать репозиторий на веб-странице SharePoint_SP-hosted_Add-Ins_Tutorials и открыть файл BeforeRibbon.sln.

Все надстройки SharePoint можно запускать со страницы Содержимое сайта на хост-сайте, выбрав плитку надстройки. Функциональность надстройки SharePoint также может быть представлена на хост-сайте посредством дополнительных действий, а именно настраиваемых кнопок ленты или элементов меню. В этой статье описано добавление кнопки на ленту хост-сайта.

Подготовка хост-сайта

Ниже показано, как добавить кнопку на ленту календаря на хост-сайте. В пользовательском интерфейсе сайта разработчика SharePoint выполните указанные ниже действия.

1. На домашней странице сайта выберите пункты Содержимое сайта>Добавить надстройку>Календарь.

2. В диалоговом окне Добавление календаря введите Employee Orientation Schedule (Расписание адаптации сотрудников) в поле Имя, а затем нажмите кнопку Создать.

3. Когда откроется календарь, наведите курсор на любую дату, чтобы на ней появилась ссылка Добавить, и перейдите по ссылке Добавить.

4. В диалоговом окне Расписание обучения сотрудников: новый элемент в поле Название введите Orient Cassi Hicks (Адаптация пользователя Cassie Hicks). В остальных полях оставьте значения, используемые по умолчанию, и нажмите кнопку Сохранить.

   Календарь должен выглядеть примерно так:

   Рис. 1. Настраиваемый календарь

   

Важно!

Для выполнения приведенной ниже процедуры необходимо, чтобы в пользовательском интерфейсе Visual Studio был виден календарь. Однако если при создании календаря Visual Studio была открыта, календарь не будет отображаться. Прежде чем продолжить, выйдите из Visual Studio и закройте все окна браузера и консоли PowerShell, с которых вы вошли на сайт разработчика.

Добавление дополнительного действия на ленте

1. В обозревателе решений щелкните правой кнопкой мыши проект EmployeeOrientation и выберите Добавить>Новый элемент>Office/SharePoint>Дополнительное действие ленты. Присвойте новому элементу имя RunOrientationAdd-in и нажмите кнопку Добавить.

2. Мастер создания дополнительного действия для ленты задаст вам несколько вопросов. Ответьте на них, используя таблицу ниже, и нажмите кнопку Готово.

   Вопрос для свойства	Ответ
   Где вы хотите разместить дополнительное действие?	Выберите вариант хост-сайт.
   К какой области относится дополнительное действие?	Выберите вариант Экземпляр списка (не "Шаблон списка").
   К какому элементу относится дополнительное действие?	Выберите вариант Employee Orientation Schedule (Расписание адаптации сотрудников).
   Где находится элемент управления?	Не используйте варианты из раскрывающегося списка. Вместо этого введите Ribbon.Calendar.Events.Actions.Controls._children. (Третий компонент, Events, идентифицирует вкладку ленты, а четвертая часть, Actions, — группу кнопок.)
   Какой текст указан в элементе меню?	Введите Employee Orientation (Адаптация сотрудников).
   Куда ведет дополнительное действие?	Не используйте варианты из раскрывающегося списка. Вместо этого введите ~appWebUrl/Lists/NewEmployeesInSeattle. Это страница представления списка, который находится на сайте надстройки, поэтому кнопка на ленте хост-сайта открывает страницу на сайте надстройки.

Проверка компонента сайта надстройки

В обозревателе решений разверните узел Компоненты и выберите компонент NewEmployeeOrientationComponents. Откроется конструктор компонентов.

Обратите внимание, что созданное вами дополнительное действие RunOrientationAdd-in находится в списке Элементы в решении, а не в списке Элементы в компоненте. Это связано с тем, что этот компонент развернут на сайте надстройки, а ваше дополнительное действие — на хост-сайте.

Когда создаете пакет надстройки в Visual Studio для развертывания в рабочей среде или нажимаете клавишу F5 в Visual Studio, пакет Инструменты разработчика Microsoft Office для Visual Studio создает особый компонент хост-сайта, добавляет в него дополнительное действие и развертывает его на хост-сайте. Ни в коем случае не следует изменять компонент хост-сайта. Именно поэтому он не будет создан до момента формирования пакета.

Рис. 2. Конструктор компонентов

Запуск и тестирование надстройки

1. Нажмите клавишу F5, чтобы развернуть и запустить надстройку. Visual Studio выполнит временную установку надстройки на тестовом сайте SharePoint и сразу же запустит ее.

2. Откроется страница надстройки SharePoint по умолчанию. Перейдите на начальную страницу сайта разработчика (т. е. хост-сайта). Ссылка на него расположена в левом верхнем углу страницы.

3. На домашней странице хост-сайта щелкните Содержимое сайта, а затем на странице Содержимое сайта выберите календарь Employee Orientation Schedule (Расписание адаптации сотрудников). Обратите внимание, что надстройку Employee Orientation (Адаптация сотрудников) выбирать не надо.

4. Когда календарь откроется, выберите событие Orient Cassie Hicks (Адаптация пользователя Cassie Hicks). Если вкладка События на ленте не открылась автоматически, откройте ее. Она должна выглядеть примерно так, как показано ниже.

   Рис. 3. Вкладка событий на ленте с настраиваемой кнопкой

   

5. В группе Действия на ленте выберите элемент Employee Orientation (Адаптация сотрудников). Откроется представление списка New Employees in Seattle (Новые сотрудники в Сиэтле).

6. Чтобы завершить сеанс отладки, закройте окно браузера или остановите отладку в Visual Studio. При каждом нажатии клавиши F5 Visual Studio будет отзывать предыдущую версию надстройки и устанавливать последнюю.

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

Дальнейшие действия

Из следующей статьи этой серии вы узнаете, как добавить JavaScript в надстройку SharePoint и получить доступ к данным SharePoint с помощью объектной модели JavaScript для SharePoint. Название этой статьи: Использование API JavaScript для SharePoint для работы с данными SharePoint.