Поделиться через

Создать страницу контента

  • Статья

Страница содержимого — это веб-страница базового уровня, которая отображается в клиенте Microsoft Teams, где разработчик может добавить содержимое вкладки. Это позволяет легко интегрировать веб-содержимое в клиент Teams, создавая более иммерсивную и привлекательную среду для пользователей. Например, страницы содержимого можно использовать для отображения пользовательских данных, интеграции сторонних служб или создания более персонализированного пользовательского интерфейса. Страница содержимого необходима для создания любой из следующих вкладок:

  • Настраиваемая вкладка с личной областью действия: в этом случае страница содержимого — это первая страница, с которой сталкивается пользователь.
  • Настраиваемая вкладка канала или группы: страница содержимого отображается после того, как пользователь закрепит и настроит вкладку в соответствующем контексте.
  • Диалоговое окно. Вы можете создать страницу содержимого и внедрить ее в виде веб-представления в диалоговом окне (в TeamsJS версии 1.x он называется модулем задач). Страница отображается внутри модального всплывающего окна.

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

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

Примечание.

В этом разделе представлена версия 2.0.x клиентской библиотеки JavaScript (TeamsJS) Microsoft Teams. Если вы используете более раннюю версию, ознакомьтесь с обзором библиотеки TeamsJS , чтобы узнать о различиях между последней версией TeamsJS и более ранними версиями.

Содержимое вкладок и рекомендации по дизайну

Общая цель вкладки — предоставить доступ к содержательному и привлекательному содержимому, которое имеет практическую ценность и четкую цель.

Необходимо сосредоточиться на том, чтобы сделать дизайн вкладок чистым, интуитивно понятной навигацией и иммерсивным содержимым. Дополнительные сведения см. в разделе Рекомендации по проектированию вкладок и Рекомендации по проверке Магазина Microsoft Teams.

Интегрируйте свой код с Teams

Чтобы отобразить страницу в Teams, необходимо включить в код клиентскую библиотеку JavaScript (TeamsJS) Microsoft Teams и вызвать app.initialize() ее после загрузки страницы.

Примечание.

Любое изменение содержимого или пользовательского интерфейса в приложении вкладки из-за кэша занимает около 24–48 часов.

Следующий код является примером взаимодействия вашей страницы и клиента Teams:

<!DOCTYPE html>
<html>
<head>
...
    <script src="https://res.cdn.office.net/teams-js/2.2.0/js/MicrosoftTeams.min.js" 
      integrity="sha384yBjE++eHeBPzIg+IKl9OHFqMbSdrzY2S/LW3qeitc5vqXewEYRWegByWzBN/chRh" 
      crossorigin="anonymous" >
    </script>
    <script>
    // Initialize the library
    await microsoftTeams.app.initialize();
    </script>
</head>
<body>
...<h1>Personal Tab</h1>
  <p><img src="/assets/icon.png"></p>
  <p>This is your personal tab!</p>
</body>
</html>

Дополнительные сведения о создании и добавлении страницы содержимого на личную вкладку см. в разделе Добавление страницы контента на личную вкладку.

На следующих изображениях показана конфигурация html-страницы содержимого и выходные данные страницы содержимого на вкладке:

Конфигурация страницы содержимого

Снимок экрана: страница содержимого HTML в Visual Studio.

Выходные данные в Интернете

Снимок экрана: выходные данные страницы содержимого в Интернете.

Выходные данные на вкладке

Снимок экрана: выходные данные страницы содержимого на вкладке Teams.

Доступ к дополнительному содержимому

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

  • Использование TeamsJS для взаимодействия с Teams. Клиентская библиотека JavaScript в Microsoft Teams предоставляет множество других функций, которые можно найти полезными при разработке страницы содержимого.

  • Глубокие ссылки. Вы можете создавать глубокие ссылки на сущности в Teams. Они используются для создания ссылок, которые переходят к содержимому и сведениям на вкладке. Дополнительные сведения см. в статье Создание глубоких ссылок на содержимое и функции в Teams.

  • Диалоговые окна. Диалоговое окно — это модальное всплывающее окно, которое можно активировать на вкладке. Диалоговые окна на странице содержимого используются для представления форм для сбора дополнительных сведений, отображения сведений об элементе в списке или представления пользователю дополнительных сведений. Диалоговые окна могут быть дополнительными страницами содержимого или создаваться полностью с помощью адаптивных карточек. Дополнительные сведения см. в статье Использование диалоговых окон на вкладках.

  • Допустимые домены. Убедитесь, что все домены URL-адресов, используемые на вкладках, включены в validDomains массив в манифесте приложения. Дополнительные сведения см. в разделе validDomains.

Примечание.

Основные функции вашей вкладки существуют в Teams, а не за их пределами.

Показать собственный индикатор загрузки

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

Примечание.

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

Если вы указываете showLoadingIndicator : true в манифесте приложения, все настройки вкладки, содержимое, страницы удаления и все диалоговые окна на основе iframe должны выполнить следующие действия.

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

  1. Добавьте "showLoadingIndicator": true в манифест приложения.

  2. вызова метода app.initialize();;

  3. Вызовите app.notifySuccess() все содержимое на основе iframe, чтобы уведомить Teams о том, что приложение успешно загружено. Если применимо, Teams скрывает индикатор загрузки. Если notifySuccess не вызывается в течение 30 секунд, Teams предполагает, что время ожидания вашего приложения истекло, и отображает экран ошибки с параметром повтора. Для обновлений приложений этот шаг применим для уже настроенных вкладок. Если вы не выполните этот шаг, отобразится экран ошибки для существующих пользователей. [Обязательно]

  4. Если вы готовы к печати на экране и хотите отложенно загрузить остальное содержимое приложения, можно скрыть индикатор загрузки вручную, вызвав .app.notifyAppLoaded(); [Необязательно]

  5. Если приложение не загружается, вы можете позвонить app.notifyFailure({reason: app.FailedReason.Timeout, message: "failure message"}); , чтобы сообщить Teams о сбое. Свойство message не используется, поэтому сообщение о сбое не отображается в пользовательском интерфейсе, а для пользователя отображается общий экран ошибки. В следующем коде показано перечисление, определяющее возможные причины сбоя загрузки приложения:

    /* List of failure reasons */
export const enum FailedReason {
    AuthFailed = "AuthFailed",
    Timeout = "Timeout",
    Other = "Other"
}

Следующий этап

Создать страницу конфигурации

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