Formato de tarjetas en Microsoft Teams

Puede Agregar formato de texto enriquecido a las tarjetas con Markdown o HTML, según el tipo de tarjeta.

Las tarjetas admiten el formato solo en la propiedad de texto, no en las propiedades de título o de subtítulo. El formato se puede especificar mediante un subconjunto de formato XML (HTML) o Markdown, según el tipo de tarjeta. Para las tarjetas adaptables actuales y futuras del desarrollo, se recomienda usar el formato Markdown.

La compatibilidad de formato es distinta entre los distintos tipos de tarjetas y la representación de la tarjeta puede variar ligeramente entre el escritorio y los clientes de los equipos móviles, así como los equipos en el explorador de escritorio.

Puede incluir una imagen incorporada en cualquier tarjeta de Teams. Imágenes a las que se les da formato .png , .jpg o .gif archivos y no deben exceder de 1024 × 1024 PX o 1 MB. GIF animado no es compatible oficialmente. Consulte referencia de tarjetas

Tarjetas de formato con Markdown

Hay dos tipos de tarjetas que admiten Markdown en Microsoft Teams:

  • Tarjetas adaptables: Markdown se admite en el campo tarjeta adaptable Textblock , así como en Fact.Title y Fact.Value . No se admite HTML en tarjetas adaptables.
  • Tarjetas de conector de O365: MARKDOWN y HTML limitado son compatibles con las tarjetas de conector de Office 365 en los campos de texto.

Los estilos admitidos Textblock para Fact.Title y Fact.Value son:

Style Ejemplo Markdown
bold Bold **Bold**
italic Italic _Italic_
lista sin ordenar
  • text
  • text
- Item 1\r- Item 2\r- Item 3
Lista ordenada
  1. text
  2. text
1. Green\r2. Orange\r3. Blue
Hyperlinks Bing [Title](url)

No se admiten las siguientes etiquetas Markdown:

  • Encabezados
  • Tablas
  • Imágenes
  • Texto con formato previo
  • Blockquotes

Importante

Las tarjetas adaptables no admiten el formato HTML.

Nuevas líneas para tarjetas adaptables

En las listas puede usar las \r \n secuencias de escape o de para las nuevas líneas. Usar \n\n en una lista hará que se aplique sangría al siguiente elemento de la lista. Si necesita más líneas en cualquier lugar del TextBlock, use \n\n .

Diferencias de escritorio y móviles para tarjetas adaptables

El formato es ligeramente distinto entre el escritorio y las versiones móviles de Teams.

En el escritorio, el formato de Markdown con tarjeta adaptable aparece como este en los exploradores Web y en la aplicación cliente de Teams:

Formato Markdown de tarjeta adaptable en el cliente de escritorio

En iOS, el formato de Markdown con tarjeta adaptable tiene este aspecto:

Formato Markdown de tarjeta adaptable en iOS

En Android, el formato de Markdown con tarjeta adaptable tiene este aspecto:

Formato Markdown de tarjeta adaptable en Android

Más información sobre tarjetas adaptables

Características de texto en tarjetas adaptables La fecha y las características de localización mencionadas en este tema no se admiten en Microsoft Teams.

Ejemplo de formato para tarjetas adaptables

{
    "$schema": "http://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](http://adaptivecards.io)"
        }
    ]
}

Mencione la compatibilidad en las tarjetas adaptables v 1.2

Las menciones basadas en tarjetas se admiten en clientes Web, de escritorio y móviles. Puede Agregar @ menciones en un cuerpo de tarjeta adaptable para bots y respuestas de extensiones de mensajería. Para agregar @ menciones en las tarjetas, siga la misma lógica de notificación y representación que la de las menciones basadas en mensajes en conversaciones de chat en el canal y en el grupo.

Los bots y las extensiones de mensajería pueden incluir menciones dentro del contenido de la tarjeta en elementos TextBlock y FactSet .

Nota

  • Actualmente, los elementos multimedia no se admiten en las tarjetas adaptables v 1.2 en la plataforma de Microsoft Teams.
  • Los mensajes de bot no admiten las menciones del equipo & de canal.

Creación de menciones

Para incluir una mención en una tarjeta adaptable, la aplicación debe incluir los siguientes elementos:

  • <at>username</at>en los elementos de tarjeta adaptable admitidos
  • El mention objeto dentro de una msteams propiedad en el contenido de la tarjeta, que incluye el identificador de usuario de Teams del usuario que se está mencionando

Ejemplo de tarjeta adaptable con mención

{
  "contentType": "application/vnd.microsoft.card.adaptive",
  "content": {
    "type": "AdaptiveCard",
    "body": [
      {
        "type": "TextBlock",
        "text": "Hi <at>John Doe</at>"
      }
    ],
    "$schema": "http://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"
          }
        }
      ]
    }
  }
}

Tarjetas de formato con HTML

Las tarjetas de conector admiten el formato HTML y Markdown limitados. Markdown se describe en la siguiente sección.

Style Ejemplo HTML
bold text <strong>text</strong>
italic text <em>text</em>
encabezado (niveles 1 – 3) Texto <h3>Text</h3>
Aplique text <strike>text</strike>
lista sin ordenar
  • text
  • text
<ul><li>text</li><li>text</li></ul>
Lista ordenada
  1. text
  2. text
<ol><li>text</li><li>text</li></ol>
texto con formato previo text <pre>text</pre>
blockquote
text
<blockquote>text</blockquote>
hipervínculo Bing <a href="https://www.bing.com/">Bing</a>
vínculo de imagen Duck on a rock <img src="http://aka.ms/Fo983c" alt="Duck on a rock"></img>

En las tarjetas conector, las líneas nuevas se representan en HTML con la <p> etiqueta.

Diferencias de escritorio y móviles para tarjetas de conector con HTML

En el escritorio, el formato HTML de las tarjetas conector tiene el siguiente aspecto:

Formato HTML para tarjetas conector en el cliente de escritorio

En iOS, el formato HTML tiene el siguiente aspecto:

Formato HTML para tarjetas conector en el cliente iOS

Problemas:

  • Las imágenes en línea no se representan en iOS con Markdown o HTML en tarjetas de conector.
  • El texto con formato previo se representa pero no tiene un fondo gris.

En Android, el formato HTML es similar a este:

Formato HTML para tarjetas conector en el cliente de Android

Ejemplo de formato para tarjetas conector de HTML

{
  "contentType": "application/vnd.microsoft.teams.card.o365connector",
  "content": {
    "@type": "MessageCard",
    "@context": "http://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=\"http://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>"
        }
     ]
  }
}