Formatar cartões no Teams

Artigo
04/13/2024

A seguir temos duas maneiras de adicionar uma formatação em rich text aos seus cartões:

Markdown
HTML

Os cartões aceitam formatação somente na propriedade texto, excluindo as propriedades título ou subtítulo. A formatação pode ser especificada usando-se um subconjunto de formatação XML ou HTML ou em Markdown, dependendo do tipo de cartão. Para o desenvolvimento atual e futuro de Cartões Adaptáveis, recomendamos a formatação Markdown.

O suporte à formatação difere entre os tipos de cartão. A renderização do cartão pode diferir ligeiramente entre a área de trabalho e os clientes móveis do Microsoft Teams e o Teams no navegador da área de trabalho.

Você pode incluir uma imagem embutida em qualquer cartão do Teams. Os formatos de imagem com suporte são os formatos .png, .jpg ou .gif. Mantenha as dimensões dentro de 1024 x 1024 pixels e tamanho de arquivo menor que 1 MB. Não há suporte para imagens de .gif animadas. Para obter mais informações, consulte tipos de cartões.

Você pode formatar cartões adaptáveis e cartões de conector para Grupos do Microsoft 365 com Markdown que incluem determinados estilos com suporte.

Formatar cartões em Markdown

Os seguintes tipos de cartão aceitam a formatação Markdown no Teams:

Cartões Adaptáveis: o Markdown tem suporte no campo Cartão Textblock Adaptável e Fact.TitleFact.Value. O HTML não tem suporte em Cartões Adaptáveis.
Cartões de conector para Grupos do Microsoft 365: o MARKdown e o HTML limitado têm suporte em cartões de conector para Grupos do Microsoft 365 nos campos de texto.

Observação

Não há suporte para markdown para cartões de entrada OAuth em bots.

Você pode usar quebra de linha nos Cartões Adaptáveis usando as sequências de escape \r ou \n para quebras de linha nas listas. A formatação é diferente para as versões desktop e móvel do Teams para Cartões Adaptáveis. Há suporte para menções baseadas em cartões de clientes com as versões para web, desktop e móvel. Você pode usar a propriedade de mascaramento de informações para mascarar informações específicas, como senha ou informações confidenciais de usuários dentro do elemento de entrada Input.Text do Cartão Adaptável. Você pode expandir a largura de um Cartão Adaptável usando o objeto width. Você pode habilitar o suporte ao typeahead nos Cartões Adaptáveis e filtrar o conjunto de opções de entrada à medida que o usuário digita a entrada. Você pode usar a msteams propriedade para adicionar a capacidade de exibir imagens no Stageview seletivamente.

A formatação é diferente para as versões desktop e móvel do Teams para Cartões Adaptáveis e cartões de conector. Nesta seção, você pode analisar um exemplo do formato Markdown para Cartões Adaptáveis e cartões de conector.

Formato Markdown para Cartões Adaptáveis
Formato markdown para cartões de conector para Grupos do Microsoft 365

A tabela a seguir fornece os estilos compatíveis para Textblock, Fact.Title e Fact.Value:

Estilo	Exemplo	Markdown
Negrito	Negrito	`Bold`
Itálico	Itálico	`_Italic_`
Lista não ordenada	texto texto	`- Item 1\r- Item 2\r- Item 3`
Lista ordenada	texto texto	`1. Green\r2. Orange\r3. Blue`
Hiperlinks	Bing	`[Title](url)`

As seguintes marcas markdown não têm suporte:

Cabeçalhos
Tabelas
Imagens
Texto pré-formatado
Blockquotes

Quebras de linha para Cartões Adaptáveis

Você pode usar as sequências de escape \r ou \n para quebras de linha em listas. O uso de \n\n em listas faz com que o próximo elemento da lista fique recuado. Se você precisar de quebras de linha em outro lugar do TextBlock, use \n\n.

Diferenças entre as versões desktop e móvel para Cartões Adaptáveis

Na versão desktop, a formatação Markdown para Cartões Adaptáveis aparece conforme mostrado na imagem a seguir, tanto em navegadores web quanto no aplicativo cliente do Teams:

A captura de tela mostra um exemplo de formatação de Marcação de Cartão Adaptável no cliente da área de trabalho do Teams.

No iOS, a formatação Markdown para Cartões Adaptáveis aparece conforme mostrado na imagem a seguir:

A captura de tela mostra um exemplo de formatação de Marcação de Cartão Adaptável na plataforma iOS do Teams.

No Android, a formatação Markdown para Cartões Adaptáveis aparece conforme mostrado na imagem a seguir:

A captura de tela mostra um exemplo de formatação de Marcação de Cartão Adaptável na plataforma Android do Teams.

Para obter mais informações, consulte recursos de texto nos Cartões Adaptáveis.

Observação

Os recursos de data e localização mencionados nesta seção não têm suporte no Teams.

Amostra do formato para Cartões Adaptáveis

O código a seguir mostra um exemplo de formatação de Cartões Adaptáveis:

{
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "This is some **bold** text"
        },
        {
            "type": "TextBlock",
            "text": "This is some _italic_ text"
        },
        {
            "type": "TextBlock",
            "text": "- Bullet \r- List \r",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "1. Numbered\r2. List\r",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Check out [Adaptive Cards](https://adaptivecards.io)"
        }
    ]
}

Cartões Adaptáveis suportam emojis. O código a seguir mostra um exemplo de Cartões Adaptáveis com um emoji:

{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "Container", "items": [ { "type": "TextBlock", "text": "Publish Adaptive Card with emojis 🥰 ", "weight": "bolder", "size": "medium" }, ] }, ], }

Observação

Se você estiver usando APIs REST, defina charset=UTF-8 em seus cabeçalhos de solicitação para adicionar emojis em Cartões Adaptáveis.

Suporte a menções dentro dos Cartões Adaptáveis

Você pode adicionar dentro de @mentions um corpo de Cartão Adaptável para bots e respostas de extensão de mensagem. Para adicionar @mentions cartões, siga a mesma lógica de notificação e renderização que a de menções baseadas em mensagens em conversas de chat em canal e em grupo.

Bots e extensões de mensagens podem incluir menções dentro do conteúdo do cartão nos elementos TextBlock e FactSet.

Observação

Não há suporte para elementos de mídia na plataforma Cartões Adaptáveis no Teams.
Não há suporte para menções de canal e equipe em mensagens de bot.
No entanto, você pode @mention vários usuários em uma única mensagem de Cartão Adaptável garantir que o limite de tamanho da mensagem não exceda 28 KB para Webhooks de entrada e 40 KB para uma mensagem de bot.
Os cartões adaptáveis enviados do Webhooks de entrada só dão suporte a menções de usuário e não dão suporte a menções de bot.

Para incluir uma menção em um Cartão Adaptável, seu aplicativo precisa incluir os seguintes elementos:

<at>username</at> nos elementos com suporte do Cartão Adaptável.
O objeto mention dentro de uma propriedade msteams no conteúdo do cartão inclui a ID do usuário do Teams que está sendo mencionado.
AuserId é exclusiva da ID do seu bot e de um usuário específico. Ele pode ser usado para @mention um usuário específico. A userId pode ser recuperada usando uma das opções mencionadas em como obter a ID do usuário.

Amostra de um Cartão Adaptável com uma menção

O código a seguir mostra um exemplo de Cartão Adaptável com uma menção:

{
  "contentType": "application/vnd.microsoft.card.adaptive",
  "content": {
    "type": "AdaptiveCard",
    "body": [
      {
        "type": "TextBlock",
        "text": "Hi <at>John Doe</at>"
      }
    ],
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0",
    "msteams": {
      "entities": [
        {
          "type": "mention",
          "text": "<at>John Doe</at>",
          "mentioned": {
            "id": "29:123124124124",
            "name": "John Doe"
          }
        }
      ]
    }
  }
}

Microsoft Entra ID do objeto e UPN no menção de usuário

A plataforma teams permite que você menção usuários com sua ID do objeto Microsoft Entra e nome de princípio do usuário (UPN), além das IDs menção existentes. Bots com Cartões Adaptáveis e Conectores com Webhooks de Entrada oferecem suporte às duas IDs de menção de usuário.

A tabela a seguir descreve as IDs de menção de usuário que passaram a ter suporte recentemente:

IDs	Recursos que oferecem suporte	Descrição	Exemplo
ID do objeto Microsoft Entra	Bot, Conector	Microsoft Entra ID do objeto do usuário	49c4641c-ab91-4248-aebb-6a7de286397b
UPN	Bot, Conector	UPN do usuário Microsoft Entra	`john.smith@microsoft.com`

Menção de usuário em bots com Cartões Adaptáveis

Os bots dão suporte a menção de usuário com a ID do objeto Microsoft Entra e UPN, além das IDs existentes. O suporte para duas novas IDs está disponível em bots para mensagens de texto, corpo de Cartões Adaptáveis e resposta de extensão de mensagem. Os bots oferecem suporte às IDs de menção em conversas e cenários invoke. O usuário recebe a notificação do feed de atividades ao estar @mentioned com as IDs.

Observação

As alterações de atualização de esquema e interface do usuário/UX não são necessárias para menções de usuário com Cartões Adaptáveis no Bot.

Exemplo

Exemplo de menção de usuário em bots com Cartões Adaptáveis como se segue:

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.0",
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "TextBlock",
      "text": "Hi <at>Adele UPN</at>, <at>Adele Microsoft Entra ID</at>"
    }
  ],
  "msteams": {
    "entities": [
      {
        "type": "mention",
        "text": "<at>Adele UPN</at>",
        "mentioned": {
          "id": "AdeleV@contoso.onmicrosoft.com",
          "name": "Adele Vance"
        }
      },
      {
        "type": "mention",
        "text": "<at>Adele Microsoft Entra ID</at>",
        "mentioned": {
          "id": "87d349ed-44d7-43e1-9a83-5f2406dee5bd",
          "name": "Adele Vance"
        }
      }
    ]
  }
}

A imagem a seguir ilustra a menção do usuário com Cartão Adaptável no Bot:

A captura de tela mostra um usuário menção no bot com Cartão Adaptável.

Menção de usuário em um Webhook de Entrada com Cartões Adaptáveis

Os webhooks de entrada começam a dar suporte ao usuário menção em Cartões Adaptáveis com a ID do Objeto Microsoft Entra e UPN.

Observação

Habilite o menção de usuário no esquema para webhooks de entrada para dar suporte a Microsoft Entra ID do objeto e UPN.
Alterações de interface do usuário/UX não são necessárias para menções de usuário com Microsoft Entra ID do objeto e UPN.

Exemplo

Exemplo de menção de usuário em Webhooks de Entrada como se segue:

{
    "type": "message",
    "attachments": [
        {
        "contentType": "application/vnd.microsoft.card.adaptive",
        "content": {
            "type": "AdaptiveCard",
            "body": [
                {
                    "type": "TextBlock",
                    "size": "Medium",
                    "weight": "Bolder",
                    "text": "Sample Adaptive Card with User Mention"
                },
                {
                    "type": "TextBlock",
                    "text": "Hi <at>Adele UPN</at>, <at>Adele Microsoft Entra ID</at>"
                }
            ],
            "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
            "version": "1.0",
            "msteams": {
                "entities": [
                    {
                        "type": "mention",
                        "text": "<at>Adele UPN</at>",
                        "mentioned": {
                          "id": "AdeleV@contoso.onmicrosoft.com",
                          "name": "Adele Vance"
                        }
                      },
                      {
                        "type": "mention",
                        "text": "<at>Adele Microsoft Entra ID</at>",
                        "mentioned": {
                          "id": "87d349ed-44d7-43e1-9a83-5f2406dee5bd",
                          "name": "Adele Vance"
                        }
                      }
                ]
            }
        }
    }]
}

A imagem a seguir ilustra a menção do usuário em Webhooks de Entrada:

A captura de tela mostra um usuário menção no Webhook de entrada.

ícone Pessoas em um Cartão Adaptável

Pessoas ícone ajuda os usuários a exibir as imagens dos usuários em um Cartão Adaptável. Você pode inserir uma imagem e aplicar todas as propriedades com suporte em imagens.

Há dois tipos de ícones de pessoas com suporte em um Cartão Adaptável:

Persona: se você quiser mostrar um único usuário em um Cartão Adaptável, ele exibirá o ícone de pessoas e o nome do usuário.

O código JSON a seguir é um exemplo de uma persona cartão:

{
  "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0.0",
  "body": [
{
      "type": "TextBlock",
      "text": "Persona",
      "weight": "bolder"
    },
    {
      "type": "Component",
      "name": "graph.microsoft.com/user",
      "view": "compact",
      "properties": {
        "id": "65f50003-e15d-434a-9e14-0fcfeb3d7817",
        "displayName": "Daniela Mandera",
        "userPrincipalName": "damandera@microsoft.com"
      }
    }
  ]
}

Conjunto de personas: se você quiser mostrar vários usuários em um Cartão Adaptável, ele exibirá apenas o ícone de pessoas dos usuários.

O seguinte código JSON é um exemplo de um Conjunto de Personas:

{
  "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "Persona Set",
      "weight": "bolder"
    },
    {
      "type": "Component",
      "name": "graph.microsoft.com/users",
      "view": "compact",
      "properties": {
        "users": [
          {
            "id": "65f50003-e15d-434a-9e14-0fcfeb3d7817",
            "displayName": "Daniela Mandera",
            "userPrincipalName": "damandera@microsoft.com"
          },
          {
            "id": "65f50003-e15d-434a-9e14-0fcfeb3d7817",
            "displayName": "Daniela Mandera",
            "userPrincipalName": "damandera@microsoft.com"
          }
        ]
      }
    }
  ]
}

Observação

Você não pode personalizar o estilo do Conjunto persona e persona em um cartão adaptável.

A imagem a seguir é um exemplo do ícone de pessoas em um Cartão Adaptável:

Parâmetros de consulta

A tabela a seguir lista os parâmetros de consulta:

Nome da propriedade	Descrição
`type`	`component`
`name`	Usar `graph.microsoft.com/users` para pesquisar todos os membros em toda a organização
`view`	`compact`
`properties`	Passado para o modelo de componente
`id`	Ressonância magnética do usuário
`displayName`	Nome do usuário
`userPrincipalName`	O nome principal da conta do usuário no Microsoft Entra ID

Componentes adaptáveis são componentes de alto nível alimentados pela templating e elementos nativos do Cartão Adaptável. O tipo component pode ser usado em qualquer lugar dentro do corpo cartão e os dados do componente são definidos no properties atributo. Os dados do componente em properties são passados diretamente para o componente. A properties propriedade define o formato para Persona e Persona Set e todas as outras propriedades em properties são ignoradas por component tipo no esquema Cartão Adaptável.

O bot pode consultar a lista de membros e seus perfis de usuário básicos, incluindo IDs de usuário do Teams e Microsoft Entra informações, como name, ide userPrincipalName. Para obter mais informações, consulte Buscar a lista ou o perfil do usuário.

As imagens a seguir mostram o ícone de pessoas em um Cartão Adaptável na área de trabalho do Teams e clientes móveis:

Cliente da área de trabalho:

Quando um usuário passa o mouse em um ícone de pessoas, as pessoas cartão desse usuário são exibidas.

Cliente móvel

Quando um usuário seleciona um ícone de pessoas, ele exibe as pessoas cartão desse usuário.

Mascaramento de informações em Cartões Adaptáveis

Use a propriedade “mascarar informações” para mascarar informações específicas, como senha ou informações confidenciais de usuários, dentro do elemento de entrada Input.Text do Cartão Adaptável.

Observação

O recurso oferece suporte apenas ao mascaramento de informações do lado do cliente. O texto de entrada mascarado é enviado como texto claro para o endereço HTTPS do ponto de extremidade especificado durante a configuração do bot.

Para mascarar informações em Cartões Adaptáveis, adicione a style propriedade ao tipoinput.text e defina seu valor como Senha.

Amostra de Cartão Adaptável com a propriedade de mascaramento

O código a seguir mostra um exemplo de Cartão Adaptável com a propriedade de mascaramento:

{
    "type": "Input.Text",
    "id": "secretThing",
    "style": "password",
},

A imagem a seguir é um exemplo de mascaramento de informações em Cartões Adaptáveis:

A captura de tela mostra a exibição de informações de mascaramento em um Cartão Adaptável.

Cartão Adaptável com largura total

Você pode usar a msteams propriedade para expandir a largura de um Cartão Adaptável e usar espaço de tela extra. A próxima seção fornece informações sobre como usar a propriedade.

Observação

Teste seu Cartão Adaptável de largura total em fatores de forma estreitos, como painéis móveis e de reunião para garantir que o conteúdo não seja truncado.

Como construir cartões com largura total

Para criar um Cartão Adaptável com largura total, o objeto width na propriedade msteams do conteúdo do cartão deve ser definido como Full.

Amostra de Cartão Adaptável com largura total

Para criar um Cartão Adaptável com largura total, seu aplicativo precisa incluir os elementos da amostra de código a seguir:

{
    "type": "AdaptiveCard",
    "body": [{
        "type": "Container",
        "items": [{
            "type": "TextBlock",
            "text": "Digest card",
            "size": "Large",
            "weight": "Bolder"
        }]
    }],

    "msteams": {
        "width": "Full"
    },
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}

A imagem a seguir mostra um Cartão Adaptável com largura total:

A captura de tela mostra um Cartão Adaptável de largura completa.

A imagem a seguir mostra a exibição padrão de um Cartão Adaptável quando você não definiu a width propriedade como Full:

A captura de tela mostra um Cartão Adaptável de largura pequena.

Layout responsivo do Cartão Adaptável

Os Cartões Adaptáveis adaptam automaticamente sua aparência e aparência ao estilo do aplicativo host, mas têm um layout fixo que permanece o mesmo entre clientes móveis e de área de trabalho do Teams. Você deve criar seus Cartões Adaptáveis para ficar ótimo em qualquer dispositivo para fornecer uma experiência aprimorada do usuário em chat, canais e chat de reunião. Neste artigo, você aprenderá a criar cartões adaptáveis responsivos.

O layout responsivo do Cartão Adaptável ajuda você a criar cartões com layouts diferentes que visam diferentes larguras de cartão.

Projetar cartões adaptáveis responsivos

Use a targetWidth propriedade em qualquer elemento para:

Mostrar ou ocultar qualquer elemento com base na largura do cartão.

Defina diferentes larguras de destino em diferentes elementos para criar layouts diferentes.

A tabela a seguir lista os valores disponíveis targetWidth :

Valor	Descrição
`veryNarrow`	O elemento fica visível quando a largura do Cartão Adaptável é muito estreita, como em um chat de reunião.
`narrow`	O elemento fica visível quando a largura do Cartão Adaptável é estreita, como em um celular no modo retrato.
`standard`	O elemento fica visível quando a largura do Cartão Adaptável é padrão, como em um celular no modo paisagístico, em um tablet no modo retrato ou em um chat na área de trabalho.
`wide`	O elemento fica visível quando a largura do Cartão Adaptável é ampla, como em um tablet no modo paisagístico, em um canal ou chat na área de trabalho quando você define seu cartão para ter largura total.

Você também pode definir a targetWidth propriedade para tornar um elemento visível para um intervalo de cartão larguras usando os atLeast prefixos eatMost. Por exemplo, você só pode tornar um elemento visível quando a largura do cartão for "padrão ou superior" ou somente quando a largura do cartão for "estreita ou inferior". A tabela a seguir fornece diretrizes sobre como tornar um elemento visível para um intervalo de larguras de cartão:

Exemplo	Descrição
`"targetWidth": "atLeast:standard"`	O elemento só fica visível quando a largura do Cartão Adaptável é pelo menos padrão, o que significa padrão ou largo.
`"targetWidth": "atMost:narrow"`	O elemento só fica visível quando a largura do Cartão Adaptável é no máximo estreita, o que significa muito estreito ou estreito.

Observação

Você não precisa definir targetWidth todos os elementos. Se você não definir targetWidth para um elemento, o elemento estará sempre visível independentemente da largura do cartão.

Veja a seguir exemplos de JSON para um Cartão Adaptável projetado sem usar targetWidth e modificado para usartargetWidth:

Cartão Adaptável projetado sem usar targetWidth:

{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "items": [
            {
              "type": "Image",
              "style": "Person",
              "url": "https://aka.ms/AAp9xo4",
              "size": "Small"
            }
          ],
          "width": "auto"
        },
        {
          "type": "Column",
          "spacing": "medium",
          "verticalContentAlignment": "center",
          "items": [
            {
              "type": "TextBlock",
              "weight": "Bolder",
              "text": "David Claux",
              "wrap": true
            }
          ],
          "width": "auto"
        },
        {
          "type": "Column",
          "spacing": "medium",
          "items": [
            {
              "type": "TextBlock",
              "text": "Platform Architect",
              "isSubtle": true,
              "wrap": true
            }
          ],
          "width": "stretch",
          "verticalContentAlignment": "center"
        }
      ]
    }
  ],
  "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.5"
}

As imagens a seguir mostram a renderização do Cartão Adaptável para diferentes larguras de cartão:

Quando a largura do cartão é larga, o cartão fica bem.
Quando a largura do cartão é padrão ou estreita, a função é espremida.
Quando a largura do cartão é muito estreita, o nome e a função são significativamente espremidos.

Cartão Adaptável atualizado para responder usando targetWidth:

  {
    "type": "AdaptiveCard",
    "body": [
      {
        "type": "ColumnSet",
        "columns": [
          {
            "type": "Column",
            "targetWidth": "atLeast:narrow",
            "items": [
              {
                "type": "Image",
                "style": "Person",
                "url": "https://aka.ms/AAp9xo4",
                "size": "Small"
              }
            ],
            "width": "auto"
          },
          {
            "type": "Column",
            "spacing": "medium",
            "verticalContentAlignment": "center",
            "items": [
              {
                "type": "TextBlock",
                "weight": "Bolder",
                "text": "David Claux",
                "wrap": true
              },
              {
                "type": "TextBlock",
                "targetWidth": "atMost:narrow",
                "spacing": "None",
                "text": "Platform Architect",
                "isSubtle": true,
                "wrap": true
              }
            ],
            "width": "auto"
          },
          {
            "type": "Column",
            "targetWidth": "atLeast:standard",
            "spacing": "medium",
            "items": [
              {
                "type": "TextBlock",
                "text": "Platform Architect",
                "isSubtle": true,
                "wrap": true
              }
            ],
            "width": "stretch",
            "verticalContentAlignment": "center"
          }
        ]
      }
    ],
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5"
  }

Vamos ver como o mesmo Cartão Adaptável renderiza depois de usar a targetWidth propriedade para diferentes larguras de cartão:

Quando a largura do cartão é larga, o cartão ainda parece bom.
Quando a largura do cartão é padrão ou estreita, a função é movida sob o nome, pois não há espaço horizontal para mostrar-lhes lado a lado.
Quando a largura do cartão é muito estreita, podemos ocultar a imagem e manter apenas as informações mais significativas.

Para obter mais informações sobre como criar um Cartão Adaptável, confira projetando Cartões Adaptáveis para seu aplicativo teams.

Suporte ao typeahead

Dentro do elemento Input.Choiceset do esquema, pedir que os usuários filtrem e selecionem um número considerável de opções pode aumentar de forma significativa o tempo necessário para a conclusão da tarefa. O suporte ao typeahead nos Cartões Adaptáveis pode simplificar a seleção de entradas ao restringir ou filtrar o conjunto de opções de entrada à medida que o usuário digita a entrada.

Para habilitar o typeahead dentro do Input.Choiceset, defina o style como filtered e certifique-se de definir isMultiSelect como false.

Amostra de Cartão Adaptável com suporte ao typeahead

O código a seguir mostra um exemplo de Cartão Adaptável com suporte ao typeahead:

{
   "type": "Input.ChoiceSet",
   "label": "Select a user",
   "isMultiSelect": false,
   "choices":  [
      { "title": "User 1", "value": "User1" },
      { "title": "User 2", "value": "User2" }
    ],
   "style": "filtered"
}

Visão de palco para imagens em Cartões Adaptáveis

Em um Cartão Adaptável, você pode usar a msteams propriedade para adicionar a capacidade de exibir imagens no Stageview seletivamente. Quando passam o mouse sobre as imagens, os usuários podem ver um ícone de expansão para o qual o atributo allowExpand está definido como true. O código a seguir é um exemplo da msteams propriedade:

{
    "type": "AdaptiveCard",
     "body": [
          {
            "type": "Image",
            "url": "https://picsum.photos/200/200?image=110",
            "msTeams": {
              "allowExpand": true
            }
          }
     ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}

Quando os usuários pairam sobre a imagem, um ícone de expansão aparece no canto superior direito, conforme mostrado na imagem a seguir:

A imagem aparece no Stageview quando o usuário seleciona o ícone de expansão, conforme mostrado na imagem a seguir:

No Stageview, os usuários podem ampliar e ampliar a imagem. Você pode selecionar as imagens do seu Cartão Adaptável que precisam ter essa capacidade.

Observação

A capacidade de ampliar e reduzir se aplica somente aos elementos de imagem com o tipo de imagem de um Cartão Adaptável.
Para aplicativos móveis do Teams, a funcionalidade Stageview para imagens em Cartões Adaptáveis está disponível por padrão. Os usuários podem exibir imagens do Cartão Adaptável no Stageview simplesmente tocando na imagem, independentemente de o allowExpand atributo estar presente ou não.

Os cartões de conector oferecem um suporte limitado à formatação Markdown e HTML.

Estilo	Exemplo	Markdown
Negrito	text	`text`
Itálico	text	`text`
Cabeçalho (níveis 1 a 3)	Texto	`### Text`
Tachado	~~text~~	`~~text~~`
Lista não ordenada	texto texto	`- Item 1\r- Item 2\r- Item 3`
Lista ordenada	texto texto	`1. Green\r2. Orange\r3. Blue`
Texto pré-formatado	`text`	`preformatted text`
Blockquote	>texto blockquote	`>blockquote text`
Hiperlink	Bing	`[Bing](https://www.bing.com/)`
Link da imagem		`![Duck](https://aka.ms/Fo983c)`

Nos cartões de conector, as quebras de linha são renderizadas para \n\n, mas não para \n ou \r.

Diferenças entre as versões desktop e móvel para cartões de conector

Na versão desktop, a formatação Markdown para cartões de conector aparece conforme mostrado na imagem a seguir:

A captura de tela mostra a formatação markdown para cartões do conector.

Na versão iOS, a formatação Markdown para cartões de conector aparece conforme mostrado na imagem a seguir:

A captura de tela mostra a formatação markdown para cartões conectores no cliente iOS do Teams.

Os cartões de conector que usam Markdown para iOS incluem os seguintes problemas:

O cliente iOS do Teams não renderiza imagens embutidas de Markdown ou HTML em cartões conectores.
Os blockquotes são renderizados como recuados, mas sem fundo cinza.

No Android, a formatação Markdown para cartões de conector aparece conforme mostrado na imagem a seguir:

A captura de tela mostra a formatação markdown para cartões conectores no cliente Android do Teams.

Exemplo de formatação Markdown para cartões de conector

O código a seguir mostra um exemplo de formatação para cartões de conector em Markdown:

{
  "contentType": "application/vnd.microsoft.teams.card.o365connector",
  "content": {
    "@type": "MessageCard",
    "@context": "https://schema.org/extensions",
    "summary": "Summary",
    "title": "Connector Card Markdown formatting",
    "sections": [
        {
            "text": "This is some **bold** text"
        },
        {
            "text": "This is some _italic_ text"
        },
        {
            "text": "# Header 1\r## Header 2\r### Header 3"
        },
        {
            "text": "- Bullet \r- List \r"
        },
        {
            "text": "1. Numbered\r1. List \r"
        },
        {
            "text": "Link: [Bing](https://www.bing.com)"
        },
        {
            "text": "embedded image link: ![Duck on a rock](https://aka.ms/Fo983c)"
        },
        {
            "text": "`preformatted text`"
        },
        {
            "text": "Newlines (backslash n, backslash n):\n\nline a\n\nline b\n\nline c"
        },
        {
            "text": ">This is a blockquote"
        }
     ]
  }
}

CodeBlock em Cartões Adaptáveis

O CodeBlock elemento permite compartilhar snippets de código como cartões adaptáveis altamente formatados em chats, canais e reuniões do Teams. Cartões Adaptáveis com o CodeBlock elemento tornam o snippet de código fácil de ler como o recuo, numeração e realce de sintaxe correspondem à linguagem de programação. Além disso, você pode adicionar botões de ação para exibir o código em sua origem ou editar o código em IDEs (ambientes de desenvolvimento integrados), como Microsoft Visual Studio ou Microsoft Visual Studio Code.

A captura de tela a seguir mostra um Cartão Adaptável com um snippet de código:

A captura de tela mostra um Cartão Adaptável com um snippet de código.

O CodeBlock elemento dá suporte aos seguintes idiomas:

Idioma	Com suporte	Idioma	Com suporte
Bash	✔️	JSON	✔️
C	✔️	Perl	✔️
C++	✔️	PHP	✔️
C#	✔️	PowerShell	✔️
CSS	✔️	Python	✔️
DOS	✔️	SQL	✔️
Ir	✔️	TypeScript	✔️
GraphQL	✔️	Visual Basic	✔️
HTML	✔️	Verilog	✔️
Java	✔️	VHDL	✔️
JavaScript	✔️	XML	✔️

Observação

O CodeBlock elemento reconhece o texto simples como uma linguagem se você definir o valor PlainText de enum como na language propriedade do esquema.

O código a seguir é um exemplo de um Cartão Adaptável que exibe um snippet de código:

{
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.5",
    "body": [
        {
            "type": "TextBlock",
            "text": "editor.js",
            "style": "heading"
        },
        {
            "type": "TextBlock",
            "text": "Lines 61 - 76"
        },
        {
            "type": "CodeBlock",
            "codeSnippet": "/**\n* @author John Smith <john.smith@example.com>\n*/\npackage l2f.gameserver.model;\n\npublic abstract strictfp class L2Char extends L2Object {\n  public static final Short ERROR = 0x0001;\n\n  public void moveTo(int x, int y, int z) {\n    _ai = null;\n    log(\"Shouldn't be called\");\n    if (1 > 5) { // what!?\n      return;\n    }\n  }\n}",
            "language": "java",
            "startLineNumber": 61
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "View in Azure Repos",
            "url": "https://azure.microsoft.com/en-us/products/devops/repos/"
        },
        {
            "type": "Action.OpenUrl",
            "title": "Edit in vscode.dev",
            "url": "https://vscode.dev/"
        }
    ]
}

O CodeBlock elemento dá suporte às seguintes propriedades:

Propriedade	Tipo	Obrigatório	Descrição
`codeSnippet`	Cadeia de caracteres	Sim	O snippet de código a ser exibido em um Cartão Adaptável.
`language`	Enum	Sim	O idioma do snippet de código a ser exibido em um Cartão Adaptável.
`startLineNumber`	Número	Não	O número de linha na origem em que o snippet de código começa. Se deixado em branco, o padrão será 1.

Dica

Caracteres especiais têm funções específicas na codeSnippet propriedade. Por exemplo, o caractere \n newline dispara uma quebra de linha.
Para exibir o caractere \n newline como parte do snippet de código em um Cartão Adaptável, verifique se você o escapa como \\n na codeSnippet propriedade. Caso contrário, o Teams renderiza o código após a \n na próxima linha do cartão.

Limitações

Um Cartão Adaptável com o CodeBlock elemento só tem suporte em clientes web e desktop do Teams.
O snippet de código em um Cartão Adaptável é somente leitura e não editável.
Um Cartão Adaptável só visualiza as primeiras 10 linhas do snippet de código. Se houver mais de 10 linhas de código, o usuário deverá selecionar Expandir para ver o restante do snippet de código.

O Cartão Adaptável no Teams dá suporte ao menu de estouro. Você pode preencher um menu de estouro para todas as ações secundárias em um Cartão Adaptável. Um menu de estouro em um Cartão Adaptável pode ser adicionado ao seguinte:

Ações: em ações, os botões primários aparecem no Cartão Adaptável e os botões secundários estão dentro do menu de estouro.
ActionSet: ActionSet é uma combinação de várias ações em um Cartão Adaptável. Cada conjunto de ações pode ter um menu de estouro.

Observação

Um Cartão Adaptável dá suporte a até seis ações primárias a serem exibidas no cartão. Qualquer ação primária adicional é exibida no menu de estouro.

Para habilitar o menu de estouro, configure a mode propriedade com o valor como primary ou secondary no esquema Cartão Adaptável. A tabela a seguir descreve a mode propriedade:

Propriedade	Tipo	Obrigatório	Descrição
`mode`	Enum (Primário, Secundário)	Não	Se a ação é ou não uma ação primária ou secundária. As ações secundárias são recolhidas em um menu de estouro.

O exemplo a seguir mostra a mode propriedade no actions tipo e no ActionSet elemento:

Ações

No exemplo a seguir, há duas ações primárias e uma ação secundária. A ação secundária cria um menu de estouro.

{
   "type": "AdaptiveCard",
   "actions": [
        {
            "type": "Action.Submit",
            "title": "Set due date"
        },
        {
            "type": "Action.OpenUrl",
            "title": "View",
            "url": "https://adaptivecards.io"
        },
        {
            "type": "Action.Submit",
            "title": "Delete",
            "mode": "secondary"
        }
    ]
}

Observação

O menu de estouro se comporta de forma diferente em um bot enviado cartão e uma extensão de mensagem cartão para o nível actions raiz em um Cartão Adaptável. O menu de estouro em um bot enviado cartão aparece como um menu de contexto pop-up e na extensão de mensagem cartão ele aparece no canto superior direito sob o ícone Mais opções (...). O comportamento não é aplicável ao ActionSet em um Cartão Adaptável.

A imagem a seguir é um exemplo de menu de estouro em um bot enviado cartão e uma extensão de mensagem cartão:

Conjunto de ações

No exemplo a seguir, todas as ações são marcadas como secundárias, portanto, um único menu de estouro é exibido no cartão.

{
    "type": "ActionSet",
     "actions": [

          {
           
            "type": "Action.Submit",
            "title": "view",
            "mode": "Secondary" 
       {
       },
            "type": "Action.submit",
            "title": "Delete",
            "mode": "secondary"

       },
       {
             "type": "Action.submit",
            "title": "Delete",
            "mode": "secondary"
       }
     ]
}

O exemplo a seguir mostra a experiência do menu de estouro na área de trabalho do Teams e nos clientes móveis:

Desktop
Dispositivo móvel

Quando um usuário seleciona o menu de estouro em uma área de trabalho, os botões definidos como secundários aparecem no Cartão Adaptável.

A captura de tela mostra um exemplo de botões em um cartão adaptável no cliente da área de trabalho do Teams.

A captura de tela mostra um exemplo de um Cartão Adaptável com a lista de ações em um menu de estouro no cliente da área de trabalho do Teams.

Formatar cartões em HTML

Os seguintes tipos de cartão oferecem suporte à formatação HTML no Teams:

Cartões de conector para Grupos do Microsoft 365: a formatação limitada de Markdown e HTML tem suporte no conector cartão para Grupos do Microsoft 365.
Cartões com imagem em destaque e em miniatura: os cartões simples, como cartões com imagem em destaque e em miniatura, oferecem suporte aos rótulos HTML.

A formatação é diferente entre a área de trabalho e as versões móveis do Teams para cartões de conector para cartões Grupos do Microsoft 365 e simples. Nesta seção, você pode analisar um exemplo do formato HTML para cartões de conector e cartões simples.

Formato HTML para cartões de conector para Grupos do Microsoft 365
Formato HTML para cartões com imagens em destaque e em miniatura

Os cartões de conector oferecem um suporte limitado à formatação Markdown e HTML.

Estilo	Exemplo	HTML
Negrito	text	`<strong>text</strong>`
Itálico	text	`<em>text</em>`
Cabeçalho (níveis 1 a 3)	Texto	`<h3>Text</h3>`
Tachado	~~text~~	`<strike>text</strike>`
Lista não ordenada	texto texto	`<ul><li>text</li><li>text</li></ul>`
Lista ordenada	texto texto	`<ol><li>text</li><li>text</li></ol>`
Texto pré-formatado	`text`	`<pre>text</pre>`
Blockquote	texto	`<blockquote>text</blockquote>`
Hiperlink	Bing	`<a href="https://www.bing.com/">Bing</a>`
Link da imagem		`<img src="https://aka.ms/Fo983c" alt="Duck on a rock"></img>`

Nos cartões de conector, as quebras de linha são renderizadas em HTML usando o rótulo <p>.

Diferenças entre as versões desktop e móvel para cartões de conector

Na versão desktop, a formatação HTML para cartões de conector aparece conforme mostrado na imagem a seguir:

A captura de tela mostra a formatação HTML para cartões conectores no cliente da área de trabalho.

No iOS, a formatação HTML aparece conforme mostrado na imagem a seguir:

A captura de tela mostra a formatação HTML para cartões conectores no cliente iOS.

Os cartões de conector que usam HTML para iOS incluem os seguintes problemas:

Imagens embutidas não são renderizadas no iOS usando Markdown ou HTML em cartões conectores.
O texto pré-formatado é renderizado, mas não tem um plano de fundo cinza.

No Android, a formatação HTML aparece conforme mostrado na imagem a seguir:

A captura de tela mostra a formatação HTML para cartões conectores no cliente Android.

Amostra de formatação HTML para cartões de conector

O código a seguir mostra um exemplo de formatação HTML para cartões de conector:

{
  "contentType": "application/vnd.microsoft.teams.card.o365connector",
  "content": {
    "@type": "MessageCard",
    "@context": "https://schema.org/extensions",
    "summary": "Summary",
    "title": "Connector Card HTML formatting",
    "sections": [
        {
            "text": "This is some <strong>bold</strong> text"
        },
        {
            "text": "This is some <em>italic</em> text"
        },
        {
            "text": "This is some <strike>strikethrough</strike> text"
        },
        {
            "text": "<h1>Header 1</h1>\r<h2>Header 2</h2>\r <h3>Header 3</h3>"
        },
        {
            "text": "bullet list <ul><li>text</li><li>text</li></ul>"
        },
        {
            "text": "ordered list <ol><li>text</li><li>text</li></ol>"
        },
        {
            "text": "hyperlink <a href=\"https://www.bing.com/\">Bing</a>"
        },
        {
            "text": "embedded image <img src=\"https://aka.ms/Fo983c\" alt=\"Duck on a rock\"></img>"
        },
        {
            "text": "preformatted text <pre>text</pre>"
        },
        {
            "text": "Paragraphs <p>Line a</p><p>Line b</p>"
        },
        {
            "text": "<blockquote>Blockquote text</blockquote>"
        }
     ]
  }
}

Os cartões simples, como cartões com imagem em destaque e em miniatura, oferecem suporte aos rótulos HTML. Não há suporte para Markdown.

Estilo	Exemplo	HTML
Negrito	text	`<strong>text</strong>`
Itálico	text	`<em>text</em>`
Cabeçalho (níveis 1 a 3)	Texto	`<h3>Text</h3>`
Tachado	~~text~~	`<strike>text</strike>`
Lista não ordenada	texto texto	`<ul><li>text</li><li>text</li></ul>`
Lista ordenada	texto texto	`<ol><li>text</li><li>text</li></ol>`
Texto pré-formatado	`text`	`<pre>text</pre>`
Blockquote	texto	`<blockquote>text</blockquote>`
Hiperlink	Bing	`<a href="https://www.bing.com/">Bing</a>`
Link da imagem		`<img src="https://aka.ms/Fo983c" alt="Duck on a rock"></img>`

Diferenças entre as versões desktop e móvel para cartões simples

Como existem diferenças de resolução entre as plataformas desktop e móvel, a formatação é diferente para as versões desktop e móvel do Teams.

Na versão desktop, a formatação HTML aparece conforme mostrado na imagem a seguir:

A captura de tela mostra a formatação HTML no cliente da área de trabalho.

No iOS, a formatação HTML aparece conforme mostrado na imagem a seguir:

A captura de tela mostra a formatação HTML no cliente iOS.

A formatação de caracteres, como negrito e itálico, não é renderizada no iOS.

No Android, a formatação HTML aparece conforme mostrado na imagem a seguir:

A captura de tela mostra a formatação HTML no cliente Android.

A formatação de caracteres, como em negrito e itálico, é exibida corretamente no Android.

Exemplo de formatação para cartões simples

As imagens na seção anterior foram criadas usando o App Studio do Teams, no qual a propriedade de texto de um cartão com imagem em destaque é definida como a seguinte cadeia de caracteres:

<p>bold: <strong>Bold Text</strong></p><p>italic: <em>Italic Text</em></p><p>strikethrough: <strike>Strikethrough text</strike></p><h1>Header 1</h1><h2>Header 2</h2><h3>Header 3</h3><p>bullet list: <ul><li>text</li><li>text</li></ul></p><p>ordered list: <ol><li>text</li><li>text</li></ol></p><pre>preformatted text</pre><blockquote>blockquote text</blockquote></p><p>hyperlink: <a href=\"https://www.bing.com/\">Bing</a></p><p>embedded image: <img src=\"https://aka.ms/Fo983c\" alt=\"Duck on a rock\"></img></p>

Você pode testar a formatação nos seus próprios cartões modificando esse código.

Exemplos de código

S.No.	Descrição	.NET	Node.js	Manifesto
1	Este aplicativo de exemplo mostra os vários formatos de cartão com suporte no Teams.	View	View	Exibir

Formatar cartões no Teams

Formatar cartões em Markdown

Quebras de linha para Cartões Adaptáveis

Diferenças entre as versões desktop e móvel para Cartões Adaptáveis

Amostra do formato para Cartões Adaptáveis

Suporte a menções dentro dos Cartões Adaptáveis

Amostra de um Cartão Adaptável com uma menção

Microsoft Entra ID do objeto e UPN no menção de usuário

Menção de usuário em bots com Cartões Adaptáveis

Exemplo

Menção de usuário em um Webhook de Entrada com Cartões Adaptáveis

Exemplo

ícone Pessoas em um Cartão Adaptável

Parâmetros de consulta

Mascaramento de informações em Cartões Adaptáveis

Amostra de Cartão Adaptável com a propriedade de mascaramento

Cartão Adaptável com largura total

Como construir cartões com largura total

Amostra de Cartão Adaptável com largura total

Layout responsivo do Cartão Adaptável

Projetar cartões adaptáveis responsivos

Suporte ao typeahead

Amostra de Cartão Adaptável com suporte ao typeahead

Visão de palco para imagens em Cartões Adaptáveis

Diferenças entre as versões desktop e móvel para cartões de conector

Exemplo de formatação Markdown para cartões de conector

CodeBlock em Cartões Adaptáveis

Limitações

Menu estouro de cartões adaptáveis

Habilitar menu de estouro

Formatar cartões em HTML

Diferenças entre as versões desktop e móvel para cartões de conector

Amostra de formatação HTML para cartões de conector

Diferenças entre as versões desktop e móvel para cartões simples

Exemplo de formatação para cartões simples

Exemplos de código

Confira também

Comentários

Recursos adicionais