Formatar cartões no Teams

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

As seguintes etiquetas Markdown não são suportadas:

• 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:

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

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

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

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" }, ] }, ], }

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

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

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

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. Pode ser utilizado para @mention um determinado utilizador. 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 Object ID e UPN na menção de utilizador

A plataforma teams permite-lhe mencionar utilizadores com o ID de Objeto do Microsoft Entra e o Nome do Principal de Utilizador (UPN), além dos IDs de 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:

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

Os bots suportam a menção de utilizador com o ID de Objeto do Microsoft Entra e o UPN, para além dos 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 utilizador recebe uma notificação do feed de atividades quando está @mentioned com os IDs.

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:

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

Os webhooks recebidos começam a suportar a menção do utilizador em Cartões Ajustáveis com o ID de Objeto do Microsoft Entra e o 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:

Ícone Pessoas num Cartão Ajustável

O ícone Pessoas ajuda os utilizadores a ver as imagens dos utilizadores num Cartão Ajustável. Pode inserir uma imagem e aplicar todas as propriedades suportadas nas imagens.

Existem dois tipos de ícones de pessoas suportados num Cartão Ajustável:

• Persona: se quiser mostrar um único utilizador num Cartão Ajustável, este apresenta o ícone pessoas e o nome do utilizador.

  O seguinte código JSON é um exemplo de um cartão Persona:

  {
    "$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 Pessoas: se quiser mostrar vários utilizadores num Cartão Ajustável, este apresenta apenas o ícone pessoas dos utilizadores.

  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

  Não pode personalizar o estilo do Conjunto de Pessoais e Pessoais num Cartão Ajustável.

A imagem seguinte é um exemplo do ícone de pessoas num Cartão Ajustável:

Parâmetros de consulta

A tabela seguinte lista os parâmetros de consulta:

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

O bot pode consultar a lista de membros e os respetivos perfis de utilizador básicos, incluindo IDs de utilizador do Teams e informações do Microsoft Entra, tais como name, ide userPrincipalName. Para obter mais informações, veja Obter a lista ou o perfil de utilizador.

As imagens seguintes mostram o ícone de pessoas num Cartão Ajustável em clientes móveis e de ambiente de trabalho do Teams:

Cliente de ambiente de trabalho:

Quando um utilizador paira o cursor sobre um ícone de pessoas, é apresentado o cartão pessoas desse utilizador.

Cliente móvel

Quando um utilizador seleciona um ícone de pessoas, apresenta o cartão pessoas desse utilizador.

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.

Para mascarar informações em Cartões Ajustáveis, adicione a propriedade para escreverinput.text e defina o style respetivo valor como Palavra-passe.

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:

Cartão Adaptável com largura total

Pode utilizar a msteams propriedade para expandir a largura de um Cartão Ajustável e utilizar um espaço de tela adicional. A próxima seção fornece informações sobre como usar a propriedade.

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 imagem seguinte mostra a vista predefinida de um Cartão Ajustável quando não definiu a width propriedade como Completa:

Esquema reativo do Cartão Ajustável

Os Cartões Adaptáveis adaptam automaticamente o seu aspeto e funcionalidade ao estilo da aplicação anfitriã, mas têm um esquema fixo que permanece o mesmo em todos os clientes móveis e de ambiente de trabalho do Teams. Tem de estruturar os seus Cartões Ajustáveis para ter um ótimo aspeto em qualquer dispositivo para proporcionar uma experiência de utilizador melhorada em chat, canais e chat de reunião. Neste artigo, irá aprender a estruturar Cartões Ajustáveis reativos.

O esquema reativo do Cartão Adaptável ajuda-o a estruturar cartões com esquemas diferentes que visam diferentes larguras de cartão.

Estruturar Cartões Ajustáveis Reativos

Utilize a targetWidth propriedade em qualquer elemento para:

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

• Defina larguras de destino diferentes em diferentes elementos para criar esquemas diferentes.

  A tabela seguinte lista os valores disponíveis targetWidth :

  Valor	Descrição
  veryNarrow	O elemento é visível quando a largura do Cartão Ajustável é muito estreita, como numa conversa de reunião.
  narrow	O elemento é visível quando a largura do Cartão Ajustável é estreita, como num telemóvel no modo vertical.
  standard	O elemento é visível quando a largura do Cartão Ajustável é padrão, como num telemóvel no modo horizontal, num tablet no modo vertical ou numa conversa no ambiente de trabalho.
  wide	O elemento fica visível quando a largura do Cartão Ajustável é larga, como num tablet no modo horizontal, num canal ou chat no ambiente de trabalho quando define o cartão como sendo de largura total.

  Também pode definir a targetWidth propriedade para tornar um elemento visível para um intervalo de larguras de cartão com os atLeast prefixos e atMost . Por exemplo, pode tornar um elemento visível apenas quando a largura do cartão é "padrão ou superior" ou apenas quando a largura do cartão é "estreita ou abaixo". A tabela seguinte fornece orientações sobre como tornar um elemento visível para um intervalo de larguras de cartão:

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

  Observação

  Não tem de definir targetWidth todos os elementos. Se não definir targetWidth para um elemento, o elemento fica sempre visível, independentemente da largura do cartão.

Seguem-se exemplos JSON para um Cartão Ajustável concebido sem utilizar targetWidth e modificado para utilizaçãotargetWidth:

• Cartão Ajustável concebido sem utilizar 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 seguintes mostram a composição do Cartão Ajustá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 Ajustável atualizado para responder com 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"
    }
  

  Vejamos como o mesmo Cartão Ajustável é composto depois de utilizar a targetWidth propriedade para diferentes larguras de cartão:

  • Quando a largura do cartão é larga, o cartão continua com bom aspeto.

    

  • Quando a largura do cartão é padrão ou estreita, a função é movida por baixo do nome, uma vez que não existe espaço horizontal para mostrá-los lado a lado.

    

  • Quando a largura do cartão é muito estreita, podemos ocultar a imagem e manter apenas as informações mais relevantes.

    

Para obter mais informações sobre como estruturar um Cartão Ajustável, consulte Estruturar Cartões Ajustáveis para a sua aplicação 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"
}

Descrição geral de imagens em Cartões Ajustáveis

Num Cartão Ajustável, pode utilizar a msteams propriedade para adicionar a capacidade de apresentar imagens em 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 seguinte é 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 utilizadores pairam o cursor sobre a imagem, é apresentado um ícone de expansão no canto superior direito, conforme mostrado na imagem seguinte:

A imagem é apresentada em Stageview quando o utilizador seleciona o ícone expandir, conforme mostrado na imagem seguinte:

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

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		

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:

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

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

• O cliente iOS para Teams não compõe imagens inline de Markdown ou HTML em cartões de conector.
• 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:

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"
        }
     ]
  }
}

Quando um utilizador seleciona o menu de capacidade excedida num ambiente de trabalho, os botões definidos como secundários aparecem no Cartão Ajustável.

Quando um utilizador seleciona o menu de capacidade excedida em dispositivos móveis, o Cartão Ajustável apresenta os botões definidos. Existe uma folha integrada que apresenta um menu de capacidade excedida com tarefas relacionadas com cartões com uma opção de mensagem. Uma longa premição em qualquer mensagem apresenta uma lista de mensagens relacionadas. Esta opção só está disponível para ações.

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:

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

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

• As imagens inline não são compostas no iOS através de Markdown ou HTML em cartões de conector.
• O texto pré-formatado é composto, mas não tem um fundo cinzento.

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

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. O Markdown não é suportado.

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:

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

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

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

A formatação de carateres, como negrito e itálico, é apresentada 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.