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

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

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

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

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

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

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

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

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

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

Получение подписки разработчика 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-адрес сайта разработчика. В URL-адресе используйте протокол HTTPS, а не HTTP. В разделе Как требуется разместить надстройку 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. Когда откроется конструктор манифеста, измените значение в поле Заголовок на Employee Orientation (Обучение сотрудников). Не манифеста значение в поле Имя.

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

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

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

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

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

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

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

    Содержимое папки с дочерним шаблоном NewEmployeeOrientation, у которого есть три дочерних элемента (NewEmployeeOrientationInstance, файл elements.xml и файл schema.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 (а не шаблона списка 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. Замените заданную по умолчанию строку Page Title (Заголовок страницы) на New Employees by Location (Новые сотрудники по месту работы).

  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. Когда откроется страница надстройки по умолчанию, перейдите по ссылке Новые сотрудники в Сиэтле, чтобы открыть экземпляр настраиваемого списка.

    Отображается страница по умолчанию надстройки, озаглавленная "Новые сотрудники по расположению". Ссылка "Новые сотрудники в Сиэтле". Стрелка от этой ссылки указывает на страницу списка. Она называется "Новые сотрудники в Сиэтле", список приведен ниже.

  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 на сайте надстройки