Создание страницы контента для вкладкиCreate a content page for your tab

Страница контента — это веб-страница, которая отображается в клиенте Teams.A content page is a webpage that is rendered within the Teams client. Как правило, это часть:Typically these are part of:

  • Настраиваемая настраиваемая вкладка — в этом экземпляре страница контента — это первая страница, с которой столкнулся пользователь.A personal-scoped custom tab - In this instance the content page is the first page the user encounters.
  • Настраиваемая вкладка канала/группы — после того как пользователь закрепляет и настраивает вкладку в соответствующем контексте, отображается страница содержимое.A channel/group custom tab - After the user pins and configures the tab in the appropriate context, the content page is displayed.
  • Модуль задачи — вы можете создать страницу контента и внедрить ее как вебвиев в модуль задачи.A task module - You can create a content page and embed it as a webview inside a task module. Страница будет отображаться в модальном всплывающем окне.The page will be rendered inside the modal popup.

Эта статья относится к использованию страниц содержимого в качестве вкладок; Тем не менее, в этом случае большинство рекомендаций применяется независимо от того, как страница контента представлена конечному пользователю.This article is specific to using content pages as tabs; however the majority of the guidance here would apply regardless of how the content page is presented to the end-user.

Рекомендации по содержимому и стилю вкладокTab content and style guidelines

Общая цель вкладки должна обеспечивать доступ к осмысленному и привлекательному содержимому, которое имеет практичное значение и очевидное назначение.Your tab's overall objective should be to provide access to meaningful and engaging content that has a practical value and an evident purpose. Это не означает, что вы должны быть более сои ненужным стилем, но следует сосредоточиться на минимизации несрочных данных, сделав Оформление вкладки четким, интуитивно понятную навигацию и содержимое.That does not mean that you should forego a pleasing style, but you should focus on minimizing clutter by making your tab design clean, navigation intuitive, and content immersive. Просмотр контента и бесед, всего одновременно с использованием вкладок и руководства по процессу утверждения приложений Microsoft TeamsSee Content and conversations, all at once using tabs and Microsoft Teams app approval process guidance

Интеграция кода с TeamsIntegrate your code with Teams

Чтобы страница отображалась в Teams, необходимо включить [клиентский пакет SDK Microsoft Teams для JavaScript](/javascript/api/overview/msteams-client?view=msteams-client-js-latestadd &preserve-view=true) и включить вызов microsoftTeams.initialize() после загрузки страницы.For your page to display in Teams, you must include the [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latestadd &preserve-view=true) and include a call to microsoftTeams.initialize() after your page loads. Способ общения страницы и клиента teams:That is how your page and the Teams client communicate:

<!DOCTYPE html>
<html>
<head>
...
    <script src= 'https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js'></script>
...
</head>

<body>
...
    <script>
    microsoftTeams.initialize();
    </script>
...
</body>

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

Использование пакета SDK для взаимодействия с TeamsUsing the SDK to interact with Teams

Пакет SDK JavaScript для клиента Teams предоставляет множество дополнительных функций, которые могут оказаться полезны при разработке страницы контента.The Teams client JavaScript SDK provides many additional functions you may find useful while developing your content page.

Можно создавать глубокие ссылки на объекты в Teams.You can create deep links to entities in Teams. Как правило, они используются для создания ссылок для перехода к содержимому и информации на вкладке. Ознакомьтесь со статьей Создание глубоких ссылок на контент и функции в Microsoft Teams.Typically, these are used to create links that navigate to content and information within your tab. See Create deep links to content and features in Microsoft Teams.

Модули задачTask Modules

Модуль задачи — это модальный всплывающий интерфейс, который можно запустить на вкладке. Как правило, на странице содержимого не требуется перемещаться по нескольким страницам.A task module is a modal popup-like experience that you can trigger from your tab. Typically in a content page you do not want to navigate your user through multiple pages. Вместо этого вы будете использовать модули задач для предоставления форм для сбора дополнительных сведений, отображения сведений об элементе в списке или в любое другое время, необходимое для предоставления пользователю дополнительной информации.Instead, you will use task modules to present forms for gathering additional information, displaying the details of an item in a list, or any other time you need to present the user with additional information. Сами модули задач могут быть дополнительными страницами контента или полностью созданы с помощью адаптивных карточек.The task modules themselves can be additional content pages, or created completely using Adaptive Cards. Полную информацию можно найти в разделе Использование модулей задач на вкладках .See Using task modules in tabs for complete information.

Допустимые доменыValid Domains

Убедитесь, что все домены URL-адресов, используемые в вкладках, включены в validDomains массив в манифесте.Ensure that the all URL domains used in your tabs are included in the validDomains array in your manifest. Дополнительные сведения см. в статье валиддомаинс в справочнике по схеме манифеста.For more information, see validDomains in the manifest schema reference. Однако осторожным, что основные функциональные возможности вкладки находятся в Teams, а не вне Teams.However, be mindful that the core functionality of your tab exists within Teams and not outside of Teams.

Отображение индикатора загрузки в машинном кодеShow a native loading indicator

Начиная с схемы манифеста версии 1.7, вы можете предоставить встроенный индикатор загрузки везде, где веб-содержимое загружено в Teams, например, Страница "содержимое вкладки", Страница конфигурации, страница удаления и модули задач на вкладках.Starting with manifest schema v1.7, you can provide a native loading indicator wherever your web content is loaded in Teams, e.g., tab content page, configuration page, removal page and task modules in tabs.

Примечание

  1. Встроенный индикатор загрузки пока не поддерживается на мобильных устройствах.The native loading indicator is not yet supported on mobile devices.
  2. Если вы указываете "showLoadingIndicator : true в манифесте приложения, все страницы настройки вкладок, контента и удаления и все модули задач на основе IFRAME должны соответствовать обязательному протоколу ниже:If you indicate "showLoadingIndicator : true in your app manifest, then all tab configuration, content, and removal pages and all iframe-based task modules must follow the mandatory protocol, below:
  1. Чтобы показать индикатор загрузки, добавьте "showLoadingIndicator": true его в манифест.To show the loading indicator, add "showLoadingIndicator": true to your manifest.
  2. Не забудьте позвонить microsoftTeams.initialize(); .Remember to call microsoftTeams.initialize();.
  3. Необязательный параметр.Optional. Если вы готовы к печати на экране и хотите выполнить отложенную загрузку оставшейся части содержимого приложения, можно вручную скрыть индикатор загрузки, вызвав microsoftTeams.appInitialization.notifyAppLoaded();If you're ready to print to the screen and wish to lazy load the rest of your application's content, you can manually hide the loading indicator by calling microsoftTeams.appInitialization.notifyAppLoaded();
  4. Обязательный параметр.Mandatory. Наконец, вызовите microsoftTeams.appInitialization.notifySuccess() Teams, чтобы уведомить Teams о том, что приложение успешно загружено.Finally, call microsoftTeams.appInitialization.notifySuccess() to notify Teams that your app has successfully loaded. Затем команды скрывают индикатор загрузки, если это необходимо.Teams will then hide the loading indicator if applicable. Если оно notifySuccess не вызвано в течение 30 секунд, будет считаться, что время ожидания вашего приложения истекло, и появится экран с сообщением об ошибке с параметром Retry.If notifySuccess is not called within 30 seconds, it will be assumed that your app timed out and an error screen with a retry option will appear.
  5. Если приложение не удается загрузить, вы можете позвонить, microsoftTeams.appInitialization.notifyFailure(reason); чтобы разрешить Teams знать об ошибке.If your application fails to load, you can call microsoftTeams.appInitialization.notifyFailure(reason); to let Teams know there was an error. Затем пользователю будет показан экран ошибки:An error screen will then be shown to the user:
``
/* List of failure reasons */
export const enum FailedReason {
    AuthFailed = "AuthFailed",
    Timeout = "Timeout",
    Other = "Other"
}