Componentes de loop baseados em cartão adaptável

Observação

Os componentes do Loop baseado em Cartão Adaptável exigem cartões adaptáveis versão 1.6 ou posterior.

Componentes de Loop baseados em cartão adaptáveis permitem criar experiências colaborativas em suas extensões de mensagens do Microsoft Teams que funcionam no Microsoft 365. Os componentes do Loop baseado em Cartão Adaptável têm conteúdo acionável que permite que os usuários façam atualizações ao vivo sem precisar alternar o contexto entre aplicativos do Microsoft 365, como Teams e Outlook.

Os componentes de loop foram lançados pela primeira vez no Teams, seguidos por outros aplicativos do Microsoft 365, como Outlook, Whiteboard e aplicativo Loop. Os componentes loop permitem que os usuários colaborem e compartilhem conteúdo ao vivo com outras pessoas no chat, email, reunião, Whiteboard ou aplicativo Loop. Como os componentes loop permanecem em sincronização entre diferentes aplicativos do Microsoft 365, eles permitem que os usuários coautorem conteúdo e façam atualizações em tempo real em seu conteúdo. Para obter mais informações, confira visão geral dos componentes loop no ecossistema do Microsoft 365.

A seguir está um exemplo de um componente loop baseado em cartão adaptável:

Exemplo de um componente loop de cartão adaptável.

Este artigo fornece uma visão geral de como criar e testar seus componentes do Loop baseado em Cartão Adaptável.

Pré-requisitos

Antes de criar um componente loop baseado em cartão adaptável, verifique se você atende aos seguintes pré-requisitos:

  1. Crie uma extensão de mensagem com um comando de pesquisa.

  2. Adicione suporte de desenrolamento de link à extensão de mensagem.

  3. Use Ações Universais para Cartões Adaptáveis.

  4. Estenda a extensão de mensagem do Teams pelo Microsoft 365.

Criar componente loop baseado em cartão adaptável

Para criar o componente Loop baseado em Cartão Adaptável, siga estas etapas:

  1. Verifique se o Cartão Adaptável adere às diretrizes de design para criar uma experiência acionável e coerente baseada em cartão adaptável para seus usuários finais.
  2. Para habilitar o componente Loop, adicione a URL que identifica exclusivamente o cartão na propriedade metadados.webUrl no esquema Cartão Adaptável. A metadata.webUrl propriedade dá suporte à portabilidade por meio do botão Copiar presente no cabeçalho do componente Loop.

Exemplo

Veja a seguir um exemplo JSON de um componente loop baseado em cartão adaptável com as metadata propriedades e webUrl :

{
  "type": "AdaptiveCard",
  "version": "1.6",
  "metadata": {
    "webUrl": "https://contoso.com/tab"
  },
  "body": [
    {
      ....
    },
  ]
  }

Parâmetros de consulta

Propriedade Tipo Descrição Obrigatório
metadata Metadata Define várias propriedades de metadados normalmente não usadas para renderizar o cartão. Não
webUrl Cadeia de caracteres A URL que identifica exclusivamente o cartão e serve como um fallback do navegador que pode ser usado por alguns hosts. Não

Testar seu componente Loop

Você pode testar o componente Loop nos ambientes de desenvolvedor do Teams e do Outlook para Web.

Teste no Microsoft Teams

Para configurar, distribuir e gerenciar seu aplicativo, use o Portal do Desenvolvedor para Teams. Você pode testar e depurar seu aplicativo no Portal do Desenvolvedor usando as seguintes opções:

  • Página de visão geral: Na página Visão geral, em Validação de armazenamento do Teams, você pode ver uma instantâneo da configuração do seu aplicativo e marcar se o pacote de aplicativo validar em casos de teste da Microsoft Teams Store.
  • Visualização no Teams: o botão Visualização no Teams inicia seu aplicativo rapidamente no cliente do Teams para depuração.

Uma captura de tela da página de visão geral do Portal do Desenvolvedor com o botão Visualização no Teams realçado.

Teste no Outlook para Web

Para ativar o componente Loop baseado em Cartão Adaptável no Outlook para Web, siga estas etapas:

  1. Create uma extensão de mensagem baseada em pesquisa usando o Teams App Camp.
  2. Create um locatário do desenvolvedor do Microsoft 365 ou entre com suas credenciais de locatário de teste.

O Cartão Adaptável gerado pelo aplicativo é renderizado como um componente Loop.

Exemplo de código

Nome de exemplo Descrição Node.js .NET Manifesto
Extensão de mensagem com componente loop baseado em cartão adaptável Este exemplo demonstra como criar uma extensão de mensagem com o componente Loop baseado em Cartão Adaptável. View View Exibir

Confira também

Projetar seu componente Loop