Знакомство с созданием надстроек SharePoint, размещаемых в SharePoint

Надстройки с размещением в SharePoint — это один из двух основных типов надстроек SharePoint. Обзор надстроек SharePoint и этих основных типов см. в статье Надстройки SharePoint. Ниже представлен обзор надстроек с размещением в SharePoint.

• Они содержат списки SharePoint, веб-части, рабочие процессы, пользовательские страницы и другие компоненты, каждый из которых установлен на дочернем сайте (сайте надстройки) того веб-сайта SharePoint, на котором установлена надстройка.
• Единственный код, который они содержат, — JavaScript пользовательских страниц SharePoint.

В этой статье описываются перечисленные ниже действия.

• Настройка среды разработки
• Создание проекта надстройки
• Написание кода надстройки
• Запуск надстройки и тестирование списка

Настройка среды разработки

Существует множество способов настройки среды разработки для надстроек SharePoint. Здесь приведен самый простой из них.

Получение инструментов

• Если вы еще не установили Visual Studio 2013 или более поздней версии, сделайте это, следуя инструкциям из статьи Установка Visual Studio. Рекомендуем использовать последнюю версию из Центра загрузки Майкрософт.

• Visual Studio включает Инструменты разработчика Microsoft Office для Visual Studio. Иногда выпуск новой версии этих инструментов не совпадает с выходом обновлений Visual Studio. Чтобы убедиться, что у вас установлена последняя версия этих инструментов, запустите установщик набора "Инструменты разработчика Office для Visual Studio 2013" или установщик набора "Инструменты разработчика Office для Visual Studio 2015".

Для Visual Studio 2017 установку Инструментов разработчика Microsoft Office следует выполнять с помощью установщика Visual Studio 2017, который доступен в окне "Создание проекта".

Сверяйтесь с более ранними версиями Visual Studio или другой документацией по Visual Studio.

Получение подписки разработчика Office 365

Примечание.

Возможно, у вас уже есть доступ к подписке разработчика Office 365:

• У вас есть подписка на Visual Studio (MSDN)? Подписчики Visual Studio Ultimate и Visual Studio Premium с MSDN получают подписку разработчика Office 365 бесплатно. Воспользуйтесь этим преимуществом сегодня.
• У вас есть один из указанных ниже планов подписки на Office 365? Создайте сайт разработчика, используя имеющуюся подписку на Office 365.

Чтобы получить план Office 365:

• Зарегистрируйтесь в программе для разработчиков Office 365.

• Пошаговые инструкции для принятия участия в этой программе, регистрации и настройки подписки см. в документации по программе для разработчиков приложений для Office 365.

Открытие сайта разработчика

В браузере перейдите к семейству веб-сайтов SharePoint, которое вы создали во время настройки подписки разработчика Office 365. Если у вас нет сайта, следуйте приведенным здесь инструкциям. Открывшийся сайт должен выглядеть так, как показано на рисунке ниже. Наличие на странице списка Приложения / тестируемые надстройки подтверждает, что веб-сайт был создан с помощью шаблона "Сайт разработчика" SharePoint. Если вместо этого отображается обычный сайт группы, подождите несколько минут и перезагрузите сайт.

Примечание.

Запишите URL-адрес сайта. Он используется при создании проектов надстроек SharePoint в Visual Studio.

Домашняя страница сайта разработчика со списком "Приложения / тестируемые надстройки"

Создание проекта надстройки

1. Запустите Visual Studio, выбрав команду Запуск от имени администратора.

2. В Visual Studio выберите пункты Файл>Создать>Новый проект.

3. В диалоговом окне Новый проект последовательно разверните узлы Visual C# и Office/SharePoint, а затем выберите элементы Надстройки>Надстройка для SharePoint.

4. Присвойте проекту имя EmployeeOrientation, а затем нажмите кнопку ОК.

5. В диалоговом окне Настройка параметров надстроек SharePoint укажите полный URL-адрес сайта SharePoint, который требуется использовать для отладки надстройки. Это URL-адрес сайта разработчика. (Используйте HTTPS, а не HTTP в URL-адресе.) В разделе Как разместить надстройку SharePoint выберите Размещение в SharePoint, а затем нажмите кнопку Готово.

6. Вам может быть предложено войти на сайт разработчика. В таком случае используйте учетные данные администратора подписки.

7. После создания проекта откройте файл /Pages/Default.aspx из корневой папки проекта. Помимо прочего, этот созданный файл загружает один или оба сценария, размещенные в SharePoint: sp.runtime.js и sp.js. Разметку для загрузки этих файлов можно найти в элементе управления Content в верхней части файла с идентификатором PlaceHolderAdditionalPageHead. Разметка зависит от используемой версии Инструментов разработчика Microsoft Office для Visual Studio. Согласно руководствам этой серии необходимо загрузить оба файла с обычными HTML-тегами <script>, а не с тегами <SharePoint:ScriptLink>.

   Убедитесь, что в элементе управления PlaceHolderAdditionalPageHeadнад строкой <meta name="WebPartPageExpansion" content="full" /> присутствуют вот какие строки:

   <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
   <script type="text/javascript" src="/_layouts/15/sp.js"></script>
   

8. Проверьте файл на наличие другой разметки, загружающей один или оба файла сценариев, и удалите ее. Сохраните и закройте файл.

Написание кода надстройки

Для вашей первой надстройки SharePoint с размещением в SharePoint мы включим классическое расширение SharePoint: настраиваемый список и его экземпляр.

1. В обозревателе решений откройте файл AppManifest.xml.

2. Когда откроется конструктор манифеста, измените значение в поле Title, на Адаптация сотрудников. ( Не изменяйте поле Имя .)

3. Сохраните и закройте файл.

4. В обозревателе решений щелкните проект правой кнопкой мыши и выберите пункты Добавить>Новая папка. Назовите папку Lists.

5. Щелкните новую папку правой кнопкой мыши и выберите пункты Добавить>Новый элемент. В узле Office/SharePoint откроется диалоговое окно Добавление нового элемента.

6. Выберите Список. Задайте для него имя NewEmployeeOrientation и нажмите кнопку Добавить.

7. На странице Выберите параметры списка в мастере настройки SharePoint оставьте заданное по умолчанию отображаемое имя списка NewEmployeeOrientation, нажмите кнопку Создать настраиваемый шаблон списка и экземпляр списка на его основе и в раскрывающемся списке выберите По умолчанию (настраиваемый список). Затем нажмите кнопку Готово.

8. Мастер создает шаблон списка NewEmployeeOrientation с дочерним экземпляром списка с именем NewEmployeeOrientationInstance. Может открыться конструктор списков. Он понадобится в следующем шаге.

9. Разверните узел NewEmployeeOrientationInstance в обозревателе решений, если вы еще не сделали этого, чтобы четко отличать файл elements.xml, который представляет собой дочерний элемент экземпляра списка, от файла elements.xml, который представляет собой дочерний элемент шаблона списка.

   

10. Откройте дочерний элемент elements.xml в шаблоне списка NewEmployeeOrientation.

11. Измените значение атрибута DisplayName (не атрибута Name), чтобы имя стало более понятным: "Обучение новых сотрудников".

12. Задайте для атрибута Description значение "Сведения об адаптации новых сотрудников".

13. Оставьте для других атрибутов значения по умолчанию, а затем сохраните и закройте файл.

14. Если конструктор списков не открыт, выберите узел NewEmployeeOrientation в обозревателе решений.

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

16. Замените значения на вкладке Список на следующие:

    • Заголовок: "Новые сотрудники в Сиэтле".
    • URL-адрес списка: Lists/NewEmployeesInSeattle.
    • Описание: "Новые сотрудники в Сиэтле".

17. Оставьте установленные по умолчанию флажки и закройте конструктор.

18. В обозревателе решений может отображаться старое имя экземпляра списка. В таком случае откройте контекстное меню узла NewEmployeeOrientationInstance, выберите пункт Переименовать и измените имя на NewEmployeesInSeattle.

19. Откройте файл schema.xml.

20. В элементе View, значение BaseViewID которого равно 0, замените имеющийся элемент ViewFields на приведенную ниже часть кода. Используйте именно этот GUID для параметра FieldRef с именем Title. В этом автоматически созданном файле schema.xml могут встречаться разрывы строк в странных местах. Убедитесь, что вы нашли соответствующие начальный и конечный теги элемента ViewFields. Добавьте разрывы строк для удобочитаемости.

    <ViewFields>
      <FieldRef Name="Title" ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" DisplayName="Employee" />
    </ViewFields>
    

21. Не закрывая файл schema.xml, в элементе View, значение BaseViewID которого равно 1, замените элемент ViewFields на приведенную ниже разметку. Используйте именно этот GUID для параметра FieldRef с именем LinkTitle.

    <ViewFields>
      <FieldRef Name="LinkTitle" ID="{82642ec8-ef9b-478f-acf9-31f7d45fbc31}" DisplayName="Employee" />
    </ViewFields>
    

22. Сохраните и закройте файл schema.xml.

23. Откройте файл elements.xml, который является дочерним экземпляром списка NewEmployeesInSeattle (а не elements.xml, который является дочерним элементом шаблона списка NewEmployeeOrientation).

24. В этом файле заполните список начальными данными. Для этого добавьте следующую разметку элемента Data в качестве дочернего элемента ListInstance.

    <Data>
      <Rows>
        <Row>
          <Field Name="Title">Tom Higginbotham</Field>
        </Row>
        <Row>
          <Field Name="Title">Satomi Hayakawa</Field>
        </Row>
        <Row>
          <Field Name="Title">Cassi Hicks</Field>
        </Row>
        <Row>
          <Field Name="Title">Lertchai Treetawatchaiwong</Field>
        </Row>
      </Rows>
    </Data>
    

25. Сохраните и закройте файл.

26. В обозревателе решений дважды щелкните элемент Компонент1, чтобы открыть конструктор компонентов. В конструкторе задайте для параметра Название значение Компоненты для адаптации новый сотрудников, а для параметра Описание — значение Списки и другие компоненты для адаптации сотрудников в компании. Сохраните файл и закройте конструктор.

27. Если элемент Компонент1 в обозревателе решений не был переименован автоматически, откройте его контекстное меню, выберите пункт Переименовать и укажите имя NewEmployeeOrientationComponents.

28. Откройте файл Default.aspx.

29. Найдите элемент Content для ASP.NET с идентификатором PlaceHolderPageTitleInTitleArea. Замените стандартную строку Заголовок страницы на Новые сотрудники по местонахождению.

30. Найдите элемент Content для ASP.NET с идентификатором PlaceHolderMain. Замените его содержимое на приведенную ниже разметку. _spPageContextInfo — это объект JavaScript, который SharePoint автоматически включает на страницу. Его свойство webAbsoluteUrl возвращает URL-адрес сайта надстройки.

    <p><asp:HyperLink runat="server"
    NavigateUrl="JavaScript:window.location = _spPageContextInfo.webAbsoluteUrl + '/Lists/NewEmployeesInSeattle/AllItems.aspx';"
    Text="New Employees in Seattle" /></p>
    

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

32. Когда откроется страница надстройки по умолчанию, щелкните ссылку New Employees in Seattle (Новые сотрудники в Сиэтле), чтобы открыть экземпляр настраиваемого списка.

    

33. Добавьте и удалите элементы в списке.

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

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

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

Чтобы создавать надстройки, выполняйте перечисленные ниже действия в указанном порядке.

1. Развертывание и установка надстроек SharePoint, размещаемых в SharePoint
2. Добавление настраиваемых столбцов в надстройку SharePoint, размещаемую в SharePoint
3. Добавление настраиваемого типа контента в надстройку, размещаемую в SharePoint
4. Добавление веб-части на страницу в надстройке, размещаемой в SharePoint
5. Добавление рабочего процесса в надстройку, размещаемую в SharePoint
6. Добавление настраиваемой страницы и стиля для надстройки с размещением в SharePoint
7. Добавление настраиваемой функции отрисовки в клиенте в надстройку SharePoint, размещаемую в SharePoint
8. Создание настраиваемой кнопки ленты на хост-сайте надстройки SharePoint
9. Использование API JavaScript для SharePoint для работы с данными SharePoint
10. Работа с данными хост-сайта из JavaScript на сайте надстройки