Formatar cartões no Teams

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

Não há suporte para as seguintes marcas Markdown:

• 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 sobre formatação de data e hora e localização em Cartões Adaptáveis, consulte recursos de texto em 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.microsoft.com/?topic=welcome)"
        }
    ]
}

Os Cartões Adaptáveis dão suporte a emojis. O conteúdo de card a seguir mostra um Cartão Adaptável 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

Você pode adicionar @mentions dentro de um corpo do 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 das menções baseadas em mensagens em conversas de canal e chat em 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. 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"
          }
        }
      ]
    }
  }
}

ID do Objeto do Microsoft Entra e UPN na menção do usuário

A plataforma Teams permite que você menção usuários com sua ID de Objeto do Microsoft Entra e seu Nome Principal do Usuário (UPN), além das 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 dão suporte à menção do usuário com a ID do Objeto do Microsoft Entra e o 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 uma notificação do feed de atividades quando está @mentioned com as 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 de entrada começam a dar suporte à menção do usuário em Cartões Adaptáveis com a ID do 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:

People icon em um Cartão Adaptável

O ícone People 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 nas 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 um Persona card:

  {
    "$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 código JSON a seguir é 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 é possível personalizar o estilo da Persona e do Conjunto de Persona em um Cartão Adaptável.

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

Esquema

A tabela a seguir lista as propriedades do Component elemento:

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

Seu bot pode consultar a lista de membros e seus perfis de usuário básicos, incluindo IDs de usuário do Teams e informações do Microsoft Entra, como name, ide userPrincipalName. Para obter mais informações, consulte Buscar a lista de participantes 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 nos clientes móveis:

Cliente de desktop:

Quando um usuário passa o mouse sobre um ícone de pessoas, o card de pessoas desse usuário é exibido.

Cliente móvel

Quando um usuário seleciona um ícone de pessoas, ele exibe o card de pessoas 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.

Para mascarar informações em Cartões Adaptáveis, adicione a style propriedade a ser typeinput.text e defina seu valor como Password.

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

Você pode usar a msteams propriedade para expandir a largura de um Cartão Adaptável e usar espaço extra na tela. 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 a seguir mostra o modo de exibição padrão de um Cartão Adaptável quando você não definiu a width propriedade como Completa:

Layout responsivo do Cartão Adaptável

Os Cartões Adaptáveis adaptam automaticamente sua aparência ao estilo do aplicativo host, mas têm um layout fixo que permanece o mesmo em clientes móveis e de área de trabalho do Teams. Você deve projetar seus Cartões Adaptáveis para ter uma ótima aparência em qualquer dispositivo, a fim de fornecer uma experiência de usuário aprimorada 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 larguras de card diferentes.

Criar Cartões Adaptáveis responsivos

Use a targetWidth propriedade em qualquer elemento para:

• Mostrar ou ocultar qualquer elemento com base na largura do card.

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

  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 telefone celular no modo retrato.
  standard	O elemento fica visível quando a largura do Cartão Adaptável é padrão, como em um telefone celular no modo paisagem, em um tablet no modo retrato ou em um chat na área de trabalho.
  wide	O elemento é visível quando a largura do Cartão Adaptável é larga, como em um tablet no modo paisagem, em um canal ou chat na área de trabalho, quando você define seu card como largura total.

  Você também pode definir a targetWidth propriedade para tornar um elemento visível para um intervalo de larguras de card usando os prefixos atLeast e atMost . Por exemplo, você pode tornar um elemento visível somente quando a largura do card for 'padrão ou superior' ou somente quando a largura do card for 'estreita ou abaixo'. A tabela a seguir fornece orientações sobre como tornar um elemento visível para um intervalo de larguras de card:

  Exemplo	Descrição
  "targetWidth": "atLeast:standard"	O elemento só é 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ó é visível quando a largura do Cartão Adaptável é no máximo estreita, o que significa muito estreita ou estreita.

  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 card.

A seguir estão exemplos de JSON para um Cartão Adaptável projetado sem uso targetWidth e modificado para usotargetWidth:

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

  • Quando a largura do card é larga, o card parece bom.

    

  • Quando a largura do card é padrão ou estreita, a função é reduzida.

    

  • Quando a largura do card é muito estreita, o nome e a função são significativamente reduzidos.

    

• 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 é renderizado depois de usar a targetWidth propriedade para diferentes larguras de card:

  • Quando a largura do card é larga, o card ainda parece bom.

    

  • Quando a largura do card é padrão ou estreita, a função é movida sob o nome, pois não há espaço horizontal para mostrá-los lado a lado.

    

  • Quando a largura do card é 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, consulte Criando Cartões Adaptáveis para seu aplicativo do 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"
}

Stageview 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 passam o mouse 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 aumentar e diminuir o zoom da 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 de aspas bloco	>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 renderiza imagens embutidas 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 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.

Quando um usuário seleciona o menu de estouro no celular, o Cartão Adaptável exibe os botões definidos. Há uma planilha integrada que exibe um menu flutuante com tarefas relacionadas ao card com uma opção de mensagem. Um toque longo em qualquer mensagem exibe uma lista de mensagens relacionadas. Essa 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 embutidas não são renderizadas no iOS usando Markdown ou HTML nos 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:

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:

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

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 formatação de caracteres, como negrito e itálico, é exibida corretamente no Android.

Exemplo de formatação para cartões simples

Você pode testar a formatação em seus próprios cartões modificando este código, onde a propriedade de texto de uma card em destaque é definida para 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>