Criar uma página de conteúdo para sua guiaCreate a content page for your tab

Uma página de conteúdo é uma página da Web que é renderizada no cliente Teams.A content page is a webpage that is rendered within the Teams client. Normalmente, são parte de:Typically these are part of:

  • Uma guia personalizada de escopo pessoal-nesta instância, a página de conteúdo é a primeira página que o usuário encontra.A personal-scoped custom tab - In this instance the content page is the first page the user encounters.
  • Uma guia personalizada de canal/grupo, depois que o usuário fixa e configura a guia no contexto apropriado, a página de conteúdo é exibida.A channel/group custom tab - After the user pins and configures the tab in the appropriate context, the content page is displayed.
  • Um módulo de tarefa -você pode criar uma página de conteúdo e incorporá-la como uma WebView dentro de um módulo de tarefa.A task module - You can create a content page and embed it as a webview inside a task module. A página será renderizada dentro do popup modal.The page will be rendered inside the modal popup.

Este artigo é específico para usar páginas de conteúdo como guias; no entanto, a maioria das orientações aqui aplica-se independentemente de como a página de conteúdo é apresentada ao usuário final.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.

Diretrizes de conteúdo e estilo da guiaTab content and style guidelines

O objetivo geral da guia é fornecer acesso a conteúdo significativo e envolvente que tenha um valor prático e uma finalidade evidente.Your tab's overall objective should be to provide access to meaningful and engaging content that has a practical value and an evident purpose. Isso não significa que você tenha um estilo agradável, mas você deve se concentrar em minimizar a desordem, tornando seu design de guia limpo, intuitivo e de aparência de conteúdo.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. Veja conteúdo e conversas, tudo de uma vez usando guias e a orientação do processo de aprovação do Microsoft Teams appSee Content and conversations, all at once using tabs and Microsoft Teams app approval process guidance

Integrar seu código com o Microsoft TeamsIntegrate your code with Teams

Para que sua página seja exibida no Teams, você deve incluir o SDK do cliente JavaScript do Microsoft Teams e incluir uma chamada para microsoftTeams.initialize() depois que a página for carregada.For your page to display in Teams, you must include the Microsoft Teams JavaScript client SDK and include a call to microsoftTeams.initialize() after your page loads. É assim que sua página e o cliente Teams se comunicam: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>

Acessar conteúdo adicionalAccessing additional content

Usando o SDK para interagir com o Microsoft TeamsUsing the SDK to interact with Teams

O SDK JavaScript do teams Client fornece várias funções adicionais que podem ser úteis ao desenvolver sua página de conteúdo.The Teams client JavaScript SDK provides many additional functions you may find useful while developer your content page.

Você pode criar links de profunda para entidades no Microsoft Teams.You can create deep links to entities in Teams. Normalmente, são usados para criar links que navegam para conteúdo e informações dentro de sua guia. Consulte criar links de profundas para conteúdo e recursos no 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.

Módulos de tarefaTask Modules

Um módulo de tarefa é uma experiência do tipo pop-up modal que você pode disparar na sua guia. Normalmente, em uma página de conteúdo, você não deseja navegar pelo usuário por várias páginas.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. Em vez disso, você usará os módulos de tarefas para apresentar formulários de coleta de informações adicionais, exibindo os detalhes de um item em uma lista ou qualquer outro momento necessário para apresentar informações adicionais ao usuário.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. Os próprios módulos de tarefas podem ser páginas de conteúdo adicionais ou criados completamente usando cartões adaptáveis.The task modules themselves can be additional content pages, or created completely using Adaptive Cards. Consulte usando módulos de tarefas em guias para obter informações completas.See Using task modules in tabs for complete information.

Domínios válidosValid Domains

Certifique-se de que todos os domínios de URL usados nas suas guias estão incluídos na validDomains matriz em seu manifesto.Ensure that the all URL domains used in your tabs are included in the validDomains array in your manifest. Para obter mais informações, consulte validDomains na referência de esquema de manifesto.For more information, see validDomains in the manifest schema reference. No entanto, lembre-se de que a funcionalidade principal da sua guia existe no Microsoft Teams e não fora do teams.However, be mindful that the core functionality of your tab exists within Teams and not outside of Teams.

Mostrar um indicador de carregamento nativoShow a native loading indicator

A partir do esquema de manifesto v 1.7, você pode fornecer um indicador de carregamento nativo sempre que o conteúdo da Web é carregado no Teams, por exemplo, página de conteúdo da guia, página de configuração, página de remoção e módulos de tarefa em guias.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.

Observação

Se você indicar "showLoadingIndicator : true no manifesto do aplicativo, todas as páginas configuração de guia, conteúdo e remoção e todos os módulos de tarefa com base em iframe devem seguir o protocolo obrigatório, abaixo: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. Para mostrar o indicador de carregamento, adicione-o "showLoadingIndicator": true ao seu manifesto.To show the loading indicator, add "showLoadingIndicator": true to your manifest.
  2. Lembre-se de chamar microsoftTeams.initialize(); .Remember to call microsoftTeams.initialize();.
  3. Opcional.Optional. Se você estiver pronto para imprimir na tela e quiser carregar o restante do conteúdo do aplicativo, você pode ocultar manualmente o indicador de carregamento chamando 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. Obrigatório.Mandatory. Por fim, chame microsoftTeams.appInitialization.notifySuccess() para notificar as equipes de que seu aplicativo carregou com êxito.Finally, call microsoftTeams.appInitialization.notifySuccess() to notify Teams that your app has successfully loaded. O Microsoft Teams ocultará o indicador de carregamento, se aplicável.Teams will then hide the loading indicator if applicable. Se notifySuccess não for chamado dentro de 30 segundos, será considerado que seu aplicativo esgotou o tempo limite e uma tela de erro com uma opção de repetição será exibida.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. Se o aplicativo não puder ser carregado, você poderá chamá-lo microsoftTeams.appInitialization.notifyFailure(reason); para permitir que as equipes saibam que houve um erro.If your application fails to load, you can call microsoftTeams.appInitialization.notifyFailure(reason); to let Teams know there was an error. Uma tela de erro será exibida para o usuário:An error screen will then be shown to the user:
``
/* List of failure reasons */
export const enum FailedReason {
    AuthFailed = "AuthFailed",
    Timeout = "Timeout",
    Other = "Other"
}