Развертывание клиентской веб-части на странице SharePoint (Hello World, часть 3)

Прежде чем приступать к процедурам этой статьи, выполните инструкции из следующих статей:

Эти действия также показаны в видео на канале SharePoint PnP в YouTube:

Упаковка веб-части HelloWorld

В окне консоли перейдите к каталогу проекта веб-части, создание которого описано в статье Создание первой клиентской веб-части SharePoint.

Если команда gulp serve все еще выполняется, остановите ее, нажав клавиши CTRL + C .

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

Откройте решение веб-части HelloWorldWebPart в Visual Studio Code или другой среде IDE.

Откройте файл package-solution.json в папке config.

В файле package-solution.json определяются метаданные пакета, как показано в следующем фрагменте кода:

Чтобы упаковать клиентское решение, введите в окне консоли следующую команду:

Чтобы упаковать клиентское решение, содержащее веб-часть, введите в окне консоли следующую команду:

Эта команда создает следующий пакет: ./sharepoint/solution/helloworld-webpart.sppkg.

Чтобы упаковать веб-часть, пакет использует компонент SharePoint. По умолчанию задача gulp создает функцию для вашей веб-части.

Вы можете просмотреть необработанное содержимое пакета в папке ./sharepoint/solution/debug.

Затем содержимое упаковывается в SPPKG-файл. Формат пакета аналогичен пакетам надстроек SharePoint. Для упаковки решения используются Microsoft Open Packaging Conventions.

Файлы JavaScript, CSS и другие ресурсы включаются в пакет при использовании параметра --ship . Однако в этом руководстве мы сначала проверим развертывание и возможности, разместив файлы JavaScript в localhost. Автоматическое создание пакетов и варианты размещения объясняются в следующем руководстве.

Начиная с SharePoint Framework версии 1.4, статические ресурсы по умолчанию упаковываются в SPPKG-файлы. При развертывании пакета в каталоге приложений ресурсы автоматически размещаются в сети CDN Office 365 (если она включена) или по URL-адресу каталога приложений. Эти действия можно изменить с помощью параметра includeClientSideAssets в файле package-solution.json.

Развертывание пакета HelloWorld в каталоге приложений

Теперь необходимо развернуть пакет, созданный в каталоге приложений.

Если у вас нет каталога приложений, администратор SharePoint Online может создать каталог, выполнив инструкции в этом руководстве: Использование каталога приложений, чтобы сделать пользовательские бизнес-приложения доступными для среды SharePoint Online.

Перейдите в каталог приложений вашего сайта.

Отправьте или перетащите файл helloworld-webpart.sppkg в каталог приложений.

При этом будет развернут пакет клиентского решения. Так как это клиентское решение с полным доверием, в SharePoint появится диалоговое окно с предложением разрешить развертывание клиентского решения.

Нажмите Развернуть.

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

Установка клиентского решения на сайте

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

Нажмите значок шестеренки на верхней панели навигации справа и выберите Добавить приложение, чтобы перейти на страницу "Приложения".

В поле поиска введите helloworld и нажмите клавишу ВВОД , чтобы отфильтровать приложения.

Выберите приложение helloworld-webpart-client-side-solution, чтобы установить его на сайте.

Теперь клиентское решение и веб-часть установлены на сайте разработчика.

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

Предварительный просмотр веб-части на странице SharePoint

Теперь, когда вы развернули и установили клиентское решение, добавьте веб-часть на страницу SharePoint. Помните, что такие ресурсы, как JavaScript и CSS, доступны с локального компьютера, поэтому не удастся отобразить веб-части, если localhost не запущен.

Откройте .manifest.json в папке dist.

Обратите внимание, что свойство internalModuleBaseUrls в записи loaderConfig все еще указывает на ваш локальный компьютер:

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

В окне консоли с каталогом проекта helloworld-webpart выполните задачу gulp, чтобы начать обслуживание с localhost:

--nobrowser не запустит SharePoint Workbench автоматически, поскольку он в этом случае не нужен, так как веб-часть будет размещаться на странице SharePoint.

Добавление веб-части HelloWorld на современную страницу

В браузере перейдите на сайт, где было установлено решение.

Нажмите значок шестеренки на верхней панели навигации справа и выберите Добавить страницу.

Откройте средство выбора веб-частей и выберите веб-часть HelloWorld.

Снимки экрана сделаны с сайта, на котором используется современный интерфейс.

Ресурсы веб-части загружаются из локальной среды. Чтобы загрузить сценарии, размещенные на локальном компьютере, необходимо разрешить в браузере выполнение небезопасных сценариев. Убедитесь, что в вашем браузере включено выполнение небезопасных сценариев для данного сеанса.

Должна появиться веб-часть HelloWorld, создание которой описано в предыдущей статье, получающая списки с текущего сайта.

Изменение свойств веб-части

Выберите значок Настроить элемент (перо) в веб-части, чтобы открыть область свойств.

Это та же область свойств, которую вы создали и проверили в Workbench.

Измените свойство Description (Описание), указав текст Client-side web parts are awesome! (Клиентские веб-части — это круто).

Обратите внимание на то, что веб-часть обновляется по мере ввода текста, как и на реактивной панели.

Выберите значок x, чтобы закрыть клиентскую область свойств.

На панели инструментов выберите Сохранить и закрыть, чтобы сохранить страницу.

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

Поздравляем! Вы развернули клиентскую веб-часть на современной странице SharePoint.

Вы можете продолжить разработку веб-части Hello World, прочитав следующую статью — Размещение клиентской веб-части в сети доставки содержимого Office 365. Из нее вы узнаете, как развернуть ресурсы веб-части и загрузить их из сети CDN Office 365, а не из localhost, что означает подготовку этого решения для отправки или его использование в производственной среде.