Создание вкладки Microsoft Teams с помощью SharePoint Framework — руководство

Статья
03/21/2023

Начиная с SharePoint Framework версии 1.8 вы можете реализовывать вкладки Microsoft Teams с помощью SharePoint Framework. Использование SharePoint Framework значительно упрощает процесс разработки вкладок Teams, поскольку вкладки команд могут автоматически размещаться в SharePoint без необходимости использования внешних служб.

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

Важно!

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

Вы также можете следовать этому руководству, просмотрев это видео на youTube-канале Microsoft 365 Platform Communtiy (PnP):

Создайте проект на вкладке Microsoft Teams

Создайте каталог проекта в удобном для вас расположении:
```
md teams-tab
```
Перейдите к каталогу проекта:
```
cd teams-tab
```
Создайте новый проект, запустив генератор Yeoman для SharePoint из созданного вами нового каталога:
```
yo @microsoft/sharepoint
```
Генератор Yeoman для SharePoint предложит вам ответить на ряд вопросов. Для всех вопросов, за исключением приведенных ниже, примите параметры по умолчанию:
- Предоставить администратору клиента возможность развернуть решение на всех сайтах сразу, не запуская развертывание компонентов или добавление приложений на сайтах?: Да
- Какой тип клиентского компонента нужно создать?: WebPart
- Как называется ваша веб-часть? MyFirstTeamsTab
- Описание вашей веб-части: Моя первая вкладка Teams
После этого Yeoman устанавливает необходимые зависимости и формирует шаблоны файлов решения. Создание решения может занять несколько минут. При этом Yeoman также включает в проект веб-часть MyFirstTeamsTab.
Затем введите следующую команду, чтобы открыть проект веб-части в Visual Studio Code:
```
code .
```

В проектах SharePoint Framework версии 1.8 и более поздних версий будет добавлена папка ./teams в структуре решения.

Структура решения

Папка Teams содержит следующие два файла:

[componentId]_color.png: маленькое изображение по умолчанию для вкладки
[componentId]_outline.png: большое изображение по умолчанию для вкладки

Эти изображения будут использоваться в качестве значков в Microsoft Teams. Вы можете заменить их пользовательскими образами, но вам нужно будет использовать то же имя, чтобы обеспечить их правильную упаковку с развертыванием решения.

Обновление манифеста веб-части для обеспечения доступности в Microsoft Teams

Найдите файл ./src/webparts/**/manifest.json для веб-части, которую вы хотите сделать доступной для Teams, и измените supportedHosts свойства, чтобы включить "TeamsTab" их, как показано в следующем примере.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",

  //...

  "supportedHosts": ["SharePointWebPart", "TeamsTab"],

  //...

}

Примечание.

Начиная с SharePoint Framework версии 1.10 вы можете предоставлять веб-части SharePoint Framework в качестве личных приложений Microsoft Teams. Это можно контролировать, включив "TeamsPersonalApp" в значение supportedHosts.

Личные вкладки не имеют параметра конфигурации, поэтому веб-части, добавленные в команды в качестве личных приложений, не будут отображать панель свойств веб-части. Если вам нужно настроить веб-часть в этой ситуации, вам придется реализовать ее в пользовательском интерфейсе веб-части.

Обновление кода для учета контекста Microsoft Teams

Откройте файл ./src/webparts/helloWorld/MyFirstTeamsTabWebPart.ts для внесения необходимых изменений, чтобы решение учитывало контекст Microsoft Teams, если оно используется в качестве вкладки.

Обновите метод render(), как показано ниже.

Обратите внимание на то, как мы отображаем разное содержимое в зависимости от того, обрабатывается ли код как вкладка в Microsoft Teams или как веб-часть в SharePoint. Мы можем определить, размещено ли решение в Microsoft Teams, проверив свойство this.context.sdks.microsoftTeams.

public render(): void {

  let title: string = '';
  let subTitle: string = '';
  let siteTabTitle: string = '';

  if (this.context.sdks.microsoftTeams) {
    // We have teams context for the web part
    title = "Welcome to Teams!";
    subTitle = "Building custom enterprise tabs for your business.";
    siteTabTitle = "We are in the context of following Team: " + this.context.sdks.microsoftTeams.context.teamName;
  }
  else
  {
    // We are rendered in normal SharePoint context
    title = "Welcome to SharePoint!";
    subTitle = "Customize SharePoint experiences using Web Parts.";
    siteTabTitle = "We are in the context of following site: " + this.context.pageContext.web.title;
  }

  this.domElement.innerHTML = `
    <div class="${ styles.myFirstTeamsTab }">
      <div class="${ styles.container }">
        <div class="${ styles.row }">
          <div class="${ styles.column }">
            <span class="${ styles.title }">${title}</span>
            <p class="${ styles.subTitle }">${subTitle}</p>
            <p class="${ styles.description }">${siteTabTitle}</p>
            <p class="${ styles.description }">Description property value - ${escape(this.properties.description)}</p>
            <a href="https://aka.ms/spfx" class="${ styles.button }">
              <span class="${ styles.label }">Learn more</span>
            </a>
          </div>
        </div>
      </div>
    </div>`;
}

Примечание.

Полное описание информации, доступной в контексте Microsoft Teams для вкладок Microsoft Teams, см. в документации для разработчиков Microsoft Teams.

Упаковка и развертывание веб-части в SharePoint

Убедитесь, что ваша консоль активирована в корневой папке решения, где она создана.

Выполните следующие команды, чтобы собрать пакет вашего решения. При этом будет выполнена сборка выпуска проекта с использованием динамической метки в качестве URL-адреса для размещения ресурсов.
```
gulp bundle --ship
```
Выполните приведенную ниже задачу, чтобы упаковать решение. Эта команда создает обновленный пакет teams-tab-webpart.sppkg в папке sharepoint/solution.
```
gulp package-solution --ship
```
Далее необходимо развернуть созданный пакет в каталоге приложений клиента.

Перейдите в каталог приложений SharePoint вашего клиента.
Загрузите или перетащите и добавьте teams-tab-webpart.sppkg в каталог приложений.

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

Обратите внимание, что в списке доменов указана среда SharePoint Online. Это вызвано тем, что контент доставляется либо из сети CDN Microsoft 365, либо из каталога приложений (в зависимости от параметров клиента).

Убедитесь, что выбран параметр Сделать это решение доступным для всех сайтов в организации, чтобы веб-часть можно было использовать со стороны Microsoft Teams.
Нажмите Развернуть.

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

Теперь веб-часть развернута и автоматически доступна для сайтов SharePoint Online.

Примечание.

В этом руководстве мы используем вариант развертывания на уровне клиента для решения SharePoint Framework. Это обеспечит максимальную простоту разработки и использования.

Вы также можете развернуть решение на уровне сайта, но в этом случае необходимо убедиться, что решение развернуто на сайте SharePoint помимо Microsoft Teams, чтобы вы могли его использовать.

Обеспечение доступности веб-части в Microsoft Teams

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

Примечание.

В этом руководстве мы используем вариант автоматического развертывания решения из каталога приложений SharePoint. Дополнительные сведения см. в статье Варианты развертывания решений SharePoint Framework для Microsoft Teams.

Выберите пакет teams-tab-client-side-solution в каталоге приложений клиента SharePoint и нажмите кнопку Синхронизировать с Teams на ленте на вкладке Файлы.
Убедитесь, что вы видите сообщение о состоянии в правом верхнем углу.

Важно!

Если синхронизация не удалась, убедитесь, что вы удалили возможную предыдущую версию из каталога приложений Microsoft Teams. Это наиболее распространенная причина сбоя синхронизации, так как существующее решение в настоящее время не переопределено.
Перейдите в Microsoft Teams и проверьте состояние каталога приложений, выбрав Приложения в области навигации слева.
Подождите, пока не появится выбор приложений, предназначенных для клиента:

Примечание.

Это может занять несколько минут из-за кэширования.
Убедитесь в наличии приложения MyFirstTeamsTab в каталоге:

Примечание.

Это может занять несколько минут из-за кэширования.
Перейдите к каналу в команде, где вы хотите проверить решение. На изображении ниже мы активировали канал Общий в Команде:
Выберите +, чтобы добавить новую вкладку в канал.
Выберите в списке свою пользовательскую вкладку MyFirstTeamTab. При необходимости вы можете использовать возможности поиска, чтобы найти свою пользовательскую вкладку:
Нажмите Добавить, чтобы подтвердить выбор вкладки.
Нажмите Сохранить, чтобы подтвердить установку вкладки в канале:

Ваша пользовательская вкладка была добавлена на канал Microsoft Teams и вы можете видеть, как код реагирует на содержание контекста Microsoft Teams. Тема веб-части по умолчанию берется с базового сайта SharePoint.

Добавлена пользовательская вкладка

Примечание.

Вы можете управлять видимостью начальной конфигурации из манифеста веб-части, установив свойство canUpdateConfiguration как false. По умолчанию этот параметр имеет значение true, когда манифест группы создается автоматически в рамках процессасинхронизации.

Обновление пакета приложения

После внесения изменений в приложение и создания нового пакета вы можете столкнуться с ошибкой при нажатии Синхронизировать с Teams.

В правом верхнем углу вашей страницы может появиться уведомление Не удалось синхронизировать решение с группами.

Если это произойдет, выполните следующие действия, чтобы удалить приложение из Microsoft Teams, а затем повторите попытку синхронизации.

Откройте Microsoft Teams.
При просмотре канала команды, нажмите "+", чтобы добавить вкладку.
Щелкните ссылку Другие приложения вверху.
Найдите свое приложение в списке и щелкните меню ....
Выберите Удалить, чтобы удалить приложение из Microsoft Teams.

Теперь вы можете синхронизировать новую версию с Microsoft Teams.

См. также

Платформа разработки для Microsoft Teams

Создание вкладки Microsoft Teams с помощью SharePoint Framework — руководство

Создайте проект на вкладке Microsoft Teams

Обновление манифеста веб-части для обеспечения доступности в Microsoft Teams

Обновление кода для учета контекста Microsoft Teams

Упаковка и развертывание веб-части в SharePoint

Обеспечение доступности веб-части в Microsoft Teams

Обновление пакета приложения

См. также

Дополнительные ресурсы