Dar formato a tarjetas en Microsoft Teams

Estas son las dos formas de agregar formato de texto enriquecido a las tarjetas:

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

La compatibilidad con el formato difiere entre los tipos de tarjeta. La representación de la tarjeta puede diferir ligeramente entre el escritorio y los clientes Microsoft Teams móviles, así como Teams en el explorador de escritorio.

Puedes incluir una imagen en línea con cualquier Teams tarjeta. Las imágenes pueden tener formato como , o archivos y no deben superar .png .jpg los .gif 1024 ×1024 px o 1 MB. Gif animado no es compatible. Para obtener más información, vea tipos de tarjetas.

Puedes dar formato a tarjetas adaptables y Office 365 connector con Markdown que incluyan ciertos estilos admitidos.

Dar formato a tarjetas con Markdown

Los siguientes tipos de tarjeta admiten el formato Markdown en Teams:

  • Tarjetas adaptables: Markdown se admite en el campo Tarjeta Textblock adaptable, así como Fact.Title en Fact.Value . Html no se admite en tarjetas adaptables.
  • Office 365 connector: Markdown y HTML limitado se admiten en las Office 365 connector en los campos de texto.

Puedes usar líneas nuevas para tarjetas adaptables mediante \r o \n secuencias de escape para las líneas nuevas de las listas. El formato es diferente entre el escritorio y las versiones móviles de Teams para tarjetas adaptables. Las menciones basadas en tarjetas se admiten en clientes web, de escritorio y móviles. Puede usar la propiedad de enmascaramiento de información para enmascarar información específica, como contraseña o información confidencial de los usuarios dentro del elemento de entrada Tarjeta Input.Text adaptable. Puede expandir el ancho de una tarjeta adaptable mediante el width objeto. Puede habilitar la compatibilidad con typeahead en tarjetas adaptables y filtrar el conjunto de opciones de entrada a medida que el usuario escribe la entrada. Puede usar la propiedad msteams para agregar la capacidad de mostrar imágenes en la vista de fase de forma selectiva.

El formato es diferente entre el escritorio y las versiones móviles de Teams para tarjetas adaptables y tarjetas de conector. En esta sección, puede ir a través del ejemplo de formato Markdown para tarjetas adaptables y tarjetas de conector.

En la tabla siguiente se proporcionan los estilos admitidos para Textblock Fact.Title , y Fact.Value :

Estilo Ejemplo Markdown
Negrita Bold **Bold**
Italic Italic _Italic_
Lista no ordenada
  • 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

Nuevas líneas para tarjetas adaptables

Puede usar las \r secuencias de \n escape o para las líneas nuevas de las listas. El uso en listas hace que se aplique sangría al siguiente elemento \n\n de la lista. Si necesita nuevas líneas en otra parte del TextBlock, use \n\n .

Diferencias de dispositivos móviles y de escritorio para tarjetas adaptables

En el escritorio, el formato de markdown de tarjeta adaptable aparece como se muestra en la siguiente imagen en los exploradores web y en la Teams cliente:

Formato de markdown de tarjeta adaptable en el cliente de escritorio

En iOS, el formato de markdown de tarjeta adaptable aparece como se muestra en la siguiente imagen:

Formato de markdown de tarjeta adaptable en iOS

En Android, el formato de markdown de tarjeta adaptable aparece como se muestra en la siguiente imagen:

Formato de markdown de tarjeta adaptable en Android

Para obtener más información, vea características de texto en Tarjetas adaptables.

Nota

Las características de fecha y localización mencionadas en esta sección no se admiten en Teams.

Muestra de formato de tarjetas adaptables

El siguiente código muestra un ejemplo de formato de tarjetas adaptables:

{
    "$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)"
        }
    ]
}

Mencionar compatibilidad con tarjetas adaptables

Puedes agregar @mentions cuerpo de una tarjeta adaptable para bots y respuestas de extensión de mensajería. Para agregar @mentions tarjetas, siga la misma lógica de notificación y representación que las menciones basadasen mensajes en conversaciones de chat de canal y grupo.

Bots and messaging extensions can include mentions within the card content in TextBlock and FactSet elements.

Nota

  • Actualmente, los elementos multimedia no se admiten en las tarjetas adaptables Teams plataforma.
  • Las menciones de canal y equipo no se admiten en los mensajes de bot.

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 compatibles.
  • El objeto dentro de una propiedad en el contenido de la tarjeta mention incluye el Teams de usuario del usuario msteams mencionado.
  • El userId es único para el identificador del bot y un usuario en particular. Se puede usar para @mention un usuario determinado. Se userId puede recuperar mediante una de las opciones mencionadas en obtener el identificador de usuario.

Tarjeta adaptable de ejemplo con una mención

El siguiente código muestra un ejemplo de tarjeta adaptable con una mención:

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

AAD id. de objeto y UPN en mención de usuario

Teams plataforma permite mencionar a los usuarios con su identificador de objeto AAD y el nombre de principio de usuario (UPN), además de los identificadores de mención existentes. Los bots con tarjetas adaptables y conectores con webhooks entrantes admiten los dos id. de mención del usuario.

En la tabla siguiente se describen los id. de mención de usuario que se han admitido recientemente:

IDs Capacidades de soporte técnico Descripción Ejemplo
AAD de objeto Bot, conector AAD de objeto del usuario 49c4641c-ab91-4248-aebb-6a7de286397b
UPN Bot, conector AAD UPN del usuario john.smith@microsoft.com

Mención de usuario en bots con tarjetas adaptables

Los bots admiten la mención de usuario AAD identificador de objeto y UPN, además de los identificadores existentes. La compatibilidad con dos nuevos IDs está disponible en bots para mensajes de texto, cuerpo de tarjetas adaptables y respuesta de extensión de mensajería. Bots support the mention IDs in conversation and invoke scenarios. El usuario obtiene la notificación de fuente de actividad cuando se @mentioned con los id.

Nota

La actualización del esquema y los cambios en la interfaz de usuario y la experiencia de usuario no son necesarios para las menciones de usuario con tarjetas adaptables en bot.

Ejemplo

Ejemplo de mención de usuario en bots con tarjetas adaptables de la siguiente manera:

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

La siguiente imagen ilustra la mención del usuario con la tarjeta adaptable en bot:

Mención de usuario en bot con tarjeta adaptable

Mención de usuario en Webhook entrante con tarjetas adaptables

Los webhooks entrantes comienzan a admitir la mención de usuario en tarjetas adaptables con el AAD de objeto y UPN.

Nota

  • Habilite la mención de usuario en el esquema para webhooks entrantes para admitir AAD id. de objeto y UPN.
  • Los cambios en la interfaz de usuario y la experiencia de usuario no son necesarios para las menciones de usuario con AAD id. de objeto y UPN.
  • La notificación de fuente de actividad para Webhook entrante con mención de usuario estará disponible en la versión futura.
Ejemplo

Ejemplo de mención de usuario en Webhook entrante de la siguiente manera:

{
    "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 AAD</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 AAD</at>",
                        "mentioned": {
                          "id": "87d349ed-44d7-43e1-9a83-5f2406dee5bd",
                          "name": "Adele Vance"
                        }
                      }
                ]
            }
        }
    }]
}

La siguiente imagen ilustra la mención del usuario en webhook entrante:

Mención de usuario en Webhook entrante

Enmascaramiento de información en tarjetas adaptables

Use la propiedad de enmascaramiento de información para enmascarar información específica, como contraseña o información confidencial de los usuarios dentro del elemento de entrada Tarjeta Input.Text adaptable.

Nota

La característica solo admite el enmascaramiento de información del lado cliente. El texto de entrada enmascarado se envía como texto sin formato a la dirección del extremo HTTPS que se especificó durante la configuración del bot.

Para enmascarar la información en tarjetas adaptables, agregue la propiedad isMasked al tipo y establezca su valor Input.Text en true.

Tarjeta adaptable de ejemplo con la propiedad masking

El siguiente código muestra un ejemplo de la propiedad Adaptive Card with masking:

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

La siguiente imagen es un ejemplo de enmascaramiento de información en tarjetas adaptables:

Imagen de información de enmascaramiento

Tarjeta adaptable de ancho completo

Puede usar la propiedad para expandir el ancho de una tarjeta adaptable y msteams usar espacio de lienzo adicional. En la siguiente sección se proporciona información sobre cómo usar la propiedad.

Construir tarjetas de ancho completo

Para crear una tarjeta adaptable de ancho completo, el objeto de la propiedad en el contenido de la tarjeta width msteams debe establecerse en Full .

Tarjeta adaptable de ejemplo con ancho completo

Para crear una tarjeta adaptable de ancho completo, la aplicación debe incluir los elementos del siguiente ejemplo de código:

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

La siguiente imagen muestra una tarjeta adaptable de ancho completo:

Vista de tarjeta adaptable de ancho completo

La siguiente imagen muestra la vista predeterminada de la tarjeta adaptable cuando no se ha establecido la width propiedad en Full:

Vista de tarjeta adaptable de ancho pequeño

Compatibilidad con Typeahead

Dentro del elemento de esquema, pedir a los usuarios que filtren y seleccionen un número considerable de opciones puede ralentizar considerablemente la finalización Input.Choiceset de las tareas. La compatibilidad con la punta de tipo dentro de las tarjetas adaptables puede simplificar la selección de entrada limitando o filtrando el conjunto de opciones de entrada a medida que el usuario escribe la entrada.

Para habilitar typeahead dentro del Input.Choiceset , establecido en y asegúrese está establecido en style filtered isMultiSelect false .

Tarjeta adaptable de ejemplo con compatibilidad con membrete

En el siguiente código se muestra un ejemplo de tarjeta adaptable con compatibilidad con punta de tipo:

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

Vista de fase para imágenes en tarjetas adaptables

En una tarjeta adaptable, puedes usar la propiedad para agregar la capacidad de mostrar imágenes en la vista de fase msteams de forma selectiva. Cuando los usuarios mantienen el mouse sobre las imágenes, pueden ver un icono de expansión, para el que allowExpand el atributo está establecido en true . Para obtener información sobre cómo usar la propiedad, vea el siguiente ejemplo:

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

Cuando los usuarios mantienen el mouse sobre la imagen, aparece un icono expandir en la esquina superior derecha, como se muestra en la siguiente imagen:

Tarjeta adaptable con imagen expandible

La imagen aparece en la vista de fase cuando el usuario selecciona el icono expandir como se muestra en la siguiente imagen:

Imagen expandida a vista de fase

En la vista de fase, los usuarios pueden acercar y alejar la imagen. Puedes seleccionar las imágenes de la tarjeta adaptable que deben tener esta funcionalidad.

Nota

  • La funcionalidad acercar y alejar solo se aplica a los elementos de imagen que son tipo de imagen en una tarjeta adaptable.
  • Para Teams móviles, la funcionalidad de vista de fase para imágenes en tarjetas adaptables está disponible de forma predeterminada. Los usuarios pueden ver imágenes de tarjeta adaptable en la vista de fase simplemente pulsando en la imagen, independientemente de si el allowExpand atributo está presente o no.

Dar formato a tarjetas con HTML

Los siguientes tipos de tarjeta admiten el formato HTML en Teams:

  • Office 365 de conector: se admite el markdown limitado y el formato HTML en Office 365 connector.
  • Tarjetas de miniatura y de héroe: las etiquetas HTML son compatibles con tarjetas sencillas, como las tarjetas de miniatura y de héroe.

El formato es diferente entre el escritorio y las versiones móviles de Teams para tarjetas Office 365 Connector y tarjetas sencillas. En esta sección, puede ir a través del ejemplo de formato HTML para tarjetas de conector y tarjetas sencillas.

Las tarjetas de conector admiten markdown limitado y formato HTML.

Estilo Ejemplo HTML
Negrita text <strong>text</strong>
Italic text <em>text</em>
Encabezado (niveles 1 – 3) Texto <h3>Text</h3>
Tachado text <strike>text</strike>
Lista no ordenada
  • 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 imagen Duck on a rock <img src="https://aka.ms/Fo983c" alt="Duck on a rock"></img>

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

Diferencias de escritorio y móvil para tarjetas de conector

En el escritorio, el formato HTML para tarjetas de conector aparece como se muestra en la siguiente imagen:

Formato HTML para tarjetas de conector en el cliente de escritorio

En iOS, el formato HTML aparece como se muestra en la siguiente imagen:

Formato HTML para tarjetas de conector en el cliente de iOS

Las tarjetas de conector que usan HTML para iOS incluyen los siguientes 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 aparece como se muestra en la siguiente imagen:

Formato HTML para tarjetas de conector en el cliente Android

Ejemplo de formato para tarjetas de conector HTML

El siguiente código muestra un ejemplo de formato para tarjetas de conector HTML:

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

Consulte también