Referencia de tarjetas

Las tarjetas que se enumeran en esta sección se admiten en bots para Teams. Se basan en tarjetas definidas por el marco de bot, pero Microsoft Teams no admite todas las tarjetas del marco de trabajo de Bot y ha agregado algunas de ellas. Las diferencias se denominan en las siguientes referencias.

Ejemplos de tarjetas

Puede encontrar información adicional sobre cómo usar las tarjetas en la documentación del SDK de bot Builder (V3). También hay ejemplos de código disponibles en el repositorio Microsoft/BotBuilder-samples en GitHub.

Tipos de tarjetas

En esta tabla se muestran los tipos de tarjetas disponibles.

Tipo de tarjeta Descripción
Tarjeta adaptable Tarjeta altamente personalizable que puede contener cualquier combinación de texto, voz, imágenes, botones y campos de entrada.
Tarjeta Hero Normalmente contiene una sola imagen grande, uno o más botones y una pequeña cantidad de texto.
Tarjeta de lista Una lista de desplazamiento de elementos.
Tarjeta de conector de Office 365 Diseño flexible con varias secciones, campos, imágenes y acciones.
Tarjeta de recepción Proporciona una confirmación al usuario.
Tarjeta de inicio de sesión Permite que un bot solicite que un usuario inicie sesión.
Tarjeta en miniatura Normalmente contiene una sola imagen en miniatura, un texto breve y uno o más botones.
Colecciones de tarjetas Se usa para devolver varios elementos en una sola respuesta

Propiedades comunes de todas las tarjetas

Imágenes de tarjetas en línea

La tarjeta puede contener una imagen incorporada incluyendo un vínculo a la imagen disponible públicamente. Por motivos de rendimiento, se recomienda hospedar la imagen en una red de entrega de contenido (CDN) pública.

Las imágenes se escalan hacia arriba o hacia abajo en el tamaño, a la vez que mantienen la relación de aspecto para cubrir el área de la imagen y, a continuación, se cortan del centro para obtener la relación de aspecto adecuada para la tarjeta.

Las imágenes deben ser como máximo 1024 × 1024 y 1 MB en formato PNG, JPEG o GIF; GIF animado no es compatible oficialmente.

Propiedad Tipo Descripción
url URL Dirección URL HTTPS a la imagen
alt String Descripción accesible de la imagen

Botones

Los botones se muestran apilados en la parte inferior de la tarjeta. El texto del botón siempre está en una sola línea y se truncará si el texto supera el ancho del botón. No se mostrarán los botones adicionales que superen el número máximo que admite la tarjeta.

Consulte acciones de la tarjeta para obtener más información.

Formato de tarjeta

Vea formato de tarjeta para obtener más información sobre el formato del texto en las tarjetas.

Tarjeta adaptable

Nota

Solo se admite la versión 1,0 de las tarjetas adaptables para todos los usuarios. La versión 1,2 solo está disponible actualmente en la versión preliminar para desarrolladores

Una tarjeta personalizable que puede contener cualquier combinación de texto, voz, imágenes, botones y campos de entrada.

Compatibilidad con tarjetas adaptables

Bots en Teams Extensiones de mensajería Conectores Bot Framework

Tarjeta adaptable de ejemplo

Ejemplo de tarjeta de tarjeta adaptable

{
  "contentType": "application/vnd.microsoft.card.adaptive",
  "content": {
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
      {
        "type": "Container",
        "items": [
          {
            "type": "TextBlock",
            "text": "Publish Adaptive Card schema",
            "weight": "bolder",
            "size": "medium"
          },
          {
            "type": "ColumnSet",
            "columns": [
              {
                "type": "Column",
                "width": "auto",
                "items": [
                  {
                    "type": "Image",
                    "url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
                    "size": "small",
                    "style": "person"
                  }
                ]
              },
              {
                "type": "Column",
                "width": "stretch",
                "items": [
                  {
                    "type": "TextBlock",
                    "text": "Matt Hidinger",
                    "weight": "bolder",
                    "wrap": true
                  },
                  {
                    "type": "TextBlock",
                    "spacing": "none",
                    "text": "Created {{DATE(2017-02-14T06:08:39Z, SHORT)}}",
                    "isSubtle": true,
                    "wrap": true
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "Container",
        "items": [
          {
            "type": "TextBlock",
            "text": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
            "wrap": true
          },
          {
            "type": "FactSet",
            "facts": [
              {
                "title": "Board:",
                "value": "Adaptive Card"
              },
              {
                "title": "List:",
                "value": "Backlog"
              },
              {
                "title": "Assigned to:",
                "value": "Matt Hidinger"
              },
              {
                "title": "Due date:",
                "value": "Not set"
              }
            ]
          }
        ]
      }
    ],
    "actions": [
      {
        "type": "Action.ShowCard",
        "title": "Set due date",
        "card": {
          "type": "AdaptiveCard",
          "body": [
            {
              "type": "Input.Date",
              "id": "dueDate"
            }
          ],
          "actions": [
            {
              "type": "Action.Submit",
              "title": "OK"
            }
          ]
        }
      },
      {
        "type": "Action.ShowCard",
        "title": "Comment",
        "card": {
          "type": "AdaptiveCard",
          "body": [
            {
              "type": "Input.Text",
              "id": "comment",
              "isMultiline": true,
              "placeholder": "Enter your comment"
            }
          ],
          "actions": [
            {
              "type": "Action.Submit",
              "title": "OK"
            }
          ]
        }
      }
    ]
  }  
}

Para obtener más información sobre las tarjetas adaptables

Tarjeta Hero

Una tarjeta que normalmente contiene una sola imagen grande, uno o más botones y texto.

Soporte para tarjetas de héroe

Bots en Teams Extensiones de mensajería Conectores Bot Framework

Propiedades de una tarjeta Hero

Propiedad Tipo Description
title Texto enriquecido Título de la tarjeta. 2 líneas como máximo; formato no compatible actualmente
subtítulo Texto enriquecido Subtítulo de la tarjeta. 2 líneas como máximo; formato no compatible actualmente
text Texto enriquecido El texto aparece justo debajo del subtítulo; ver el formato de la tarjeta para las opciones de formato
incluidas Matriz de imágenes Imagen que se muestra en la parte superior de la tarjeta. Relación de aspecto 16:9
situados Matriz de objetos Action Conjunto de acciones que se aplican a la tarjeta actual. Máximo de 6
toque Action (objeto) Esta acción se activará cuando el usuario pulse en la tarjeta

Ejemplo de tarjeta de héroe

Ejemplo de una tarjeta de héroe

{
   "contentType": "application/vnd.microsoft.card.hero",
   "content": {
     "title": "Seattle Center Monorail",
     "subtitle": "Seattle Center Monorail",
     "text": "The Seattle Center Monorail is an elevated train line between Seattle Center (near the Space Needle) and downtown Seattle. It was built for the 1962 World's Fair. Its original two trains, completed in 1961, are still in service.",
     "images": [
       {
         "url":"https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Seattle_monorail01_2008-02-25.jpg/1024px-Seattle_monorail01_2008-02-25.jpg"
       }
     ],
    "buttons": [
      {
         "type": "openUrl",
         "title": "Official website",
         "value": "https://www.seattlemonorail.com"
       },
      {
        "type": "openUrl",
        "title": "Wikipeda page",
        "value": "https://en.wikipedia.org/wiki/Seattle_Center_Monorail"
       }
     ]
   }
}

Para obtener más información sobre las tarjetas de Heroes

Referencia de la estructura de bot:

Tarjeta de lista

La tarjeta de lista se ha agregado por Microsoft Teams para proporcionar funciones que van más allá de lo que la colección de lista puede proporcionar. La tarjeta de lista proporciona una lista desplazable de elementos.

Compatibilidad con tarjetas de lista

Bots en Teams Extensiones de mensajería Conectores Bot Framework

Propiedades de una tarjeta de lista

Propiedad Tipo Description
title Texto enriquecido Título de la tarjeta. 2 líneas como máximo; formato no compatible actualmente
items Matriz de elementos de lista
situados Matriz de objetos Action Conjunto de acciones que se aplican a la tarjeta actual. Máximo 6. No se representa en dispositivos móviles.

Tarjeta de lista de ejemplo

{
  "contentType": "application/vnd.microsoft.teams.card.list",
  "content": {
    "title": "Card title",
    "items": [
      {
        "type": "file",
        "id": "https://contoso.sharepoint.com/teams/new/Shared%20Documents/Report.xlsx",
        "title": "Report",
        "subtitle": "teams > new > design",
        "tap": {
          "type": "imBack",
          "value": "editOnline https://contoso.sharepoint.com/teams/new/Shared%20Documents/Report.xlsx"
        }
      },
      {
        "type": "resultItem",
        "icon": "https://cdn2.iconfinder.com/data/icons/social-icons-33/128/Trello-128.png",
        "title": "Trello title",
        "subtitle": "A Trello subtitle",
        "tap": {
          "type": "openUrl",
          "value": "http://trello.com"
        }
      },
      {
        "type": "section",
        "title": "Manager"
      },
      {
        "type": "person",
        "id": "JohnDoe@contoso.com",
        "title": "John Doe",
        "subtitle": "Manager",
        "tap": {
          "type": "imBack",
          "value": "whois JohnDoe@contoso.com"
        }
      }
    ],
    "buttons": [
      {
        "type": "imBack",
        "title": "Select",
        "value": "whois"
      }
    ]
  }
}

Tarjeta de conector de Office 365

Compatible con Microsoft Teams, no con bot Framework.

La tarjeta de conexión de Office 365 proporciona un diseño flexible con varias secciones, campos, imágenes y acciones. Esta tarjeta encapsula una tarjeta de conector para que los bots puedan usarla. Vea la sección Notas para ver las diferencias entre las tarjetas de conector y la tarjeta de O365.

Compatibilidad con tarjetas de conector de Office 365

Bots en Teams Extensiones de mensajería Conectores Bot Framework

Propiedades de la tarjeta de conector de Office 365

Propiedad Tipo Description
title Texto enriquecido Título de la tarjeta. 2 líneas como máximo; formato no compatible actualmente
summary Texto enriquecido Resumen de la tarjeta. 2 líneas como máximo; formato no compatible actualmente
text Texto enriquecido El texto aparece justo debajo del subtítulo; ver el formato de la tarjeta para las opciones de formato
themeColor Cadena hexadecimal color que reemplaza a la accentColor proporcionada desde el manifiesto de la aplicación

Notas en la tarjeta de conector de Office 365

Las tarjetas de conexión de Office 365 funcionan correctamente en Microsoft Teams, incluidas las acciones ActionCard.

Una diferencia importante entre el uso de tarjetas conectoras de un conector y el uso de tarjetas conector en el bot es el control de las acciones de la tarjeta.

  • Para un conector, el extremo recibe la carga de la tarjeta a través de HTTP POST.
  • Para un bot, la HttpPOST acción desencadena una invoke actividad que envía sólo el identificador y el cuerpo de la acción al bot.

Cada tarjeta de conector puede mostrar un máximo de 10 secciones y cada sección puede contener un máximo de 5 imágenes y 5 acciones.

Nota

No se mostrarán secciones, imágenes o acciones adicionales en un mensaje.

Todos los campos de texto admiten Markdown y HTML. Puede controlar qué secciones utilizan Markdown o HTML estableciendo la markdown propiedad en un mensaje. De forma predeterminada markdown , se establece trueen; Si desea usar HTML en su lugar, establezca markdown en. false

Si especifica la themeColor propiedad, esta invalida la accentColor propiedad en el manifiesto de la aplicación.

Para especificar el estilo de representación de activityImage, puede establecer activityImageType lo siguiente:

Valor Descripción
avatar Predeterminada activityImage se recortará como un círculo
article activityImagese mostrará como un rectángulo y conservará su relación de aspecto.

Para obtener más información acerca de las propiedades de la tarjeta de conector, consulte la referencia de la tarjeta de mensaje accionable. Las únicas propiedades de tarjeta de conector que Microsoft Teams no admite actualmente son las siguientes:

  • heroImage
  • hideOriginalBody
  • startGroup(se trata siempre true como en Microsoft Teams)
  • originator
  • correlationId

Ejemplo de tarjeta de conector de Office 365

{
  "contentType": "application/vnd.microsoft.teams.card.o365connector",
  "content": {
    "@type": "MessageCard",
    "@context": "http://schema.org/extensions",
    "summary": "John Doe commented on Trello",
    "title": "Project Tango",
    "sections": [
        {
            "activityTitle": "John Doe commented",
            "activitySubtitle": "On Project Tango",
            "activityText": "\"Here are the designs\"",
            "activityImage": "http://connectorsdemo.azurewebsites.net/images/MSC12_Oscar_002.jpg"
        },
        {
            "title": "Details",
            "facts": [
                {
                    "name": "Labels",
                    "value": "Designs, redlines"
                },
                {
                    "name": "Due date",
                    "value": "Dec 7, 2016"
                },
                {
                    "name": "Attachments",
                    "value": "[final.jpg](http://connectorsdemo.azurewebsites.net/images/WIN14_Jan_04.jpg)"
                }
            ]
        },
        {
            "title": "Images",
            "images": [
                {
                    "image":"http://connectorsdemo.azurewebsites.net/images/MicrosoftSurface_024_Cafe_OH-06315_VS_R1c.jpg"
                },
                {
                    "image":"http://connectorsdemo.azurewebsites.net/images/WIN12_Scene_01.jpg"
                },
                {
                    "image":"http://connectorsdemo.azurewebsites.net/images/WIN12_Anthony_02.jpg"
                }
            ]
        }
    ],
    "potentialAction": [
        {
            "@context": "http://schema.org",
            "@type": "ViewAction",
            "name": "View in Trello",
            "target": [
                "https://trello.com/c/1101/"
            ]
        }
    ]
  }
}

Tarjeta de recepción

Se admite en Microsoft Teams.

Tarjeta que permite a un bot proporcionar una confirmación al usuario. Normalmente, contiene la lista de elementos que se deben incluir en la recepción, la información total y fiscal y otro texto.

Soporte para tarjetas de recepción

Bots en Teams Extensiones de mensajería Conectores Bot Framework

Para obtener más información sobre las tarjetas de recepción

Referencia de la estructura de bot:

Tarjeta de inicio de sesión

Tarjeta que permite a un bot solicitar que un usuario inicie sesión. Se admite en Teams de una forma ligeramente diferente a la que se encuentra en el marco de robots. La tarjeta de inicio de sesión de Microsoft Teams es similar a la tarjeta de inicio de sesión en el marco de bot, con la excepción de que la tarjeta signin de openUrlinicio de sesión de Teams solo admite dos acciones: y.

La acción de inicio de sesión se puede usar desde cualquier tarjeta en Teams, no solo desde la tarjeta de inicio de sesión. Para obtener más información sobre la autenticación, vea el tema sobre el flujo de autenticación de Microsoft Teams para bots .

Compatibilidad con tarjetas de inicio de sesión

Bots en Teams Extensiones de mensajería Conectores Bot Framework

Para obtener más información sobre las tarjetas de inicio de sesión

Referencia de la estructura de bot:

Tarjeta en miniatura

Una tarjeta que normalmente contiene una sola imagen en miniatura, uno o más botones y texto.

Compatibilidad con tarjetas de miniaturas

Bots en Teams Extensiones de mensajería Conectores Bot Framework

Ejemplo de una tarjeta en miniatura

Propiedades de una tarjeta en miniatura

Propiedad Tipo Description
title Texto enriquecido Título de la tarjeta. 2 líneas como máximo; formato no compatible actualmente
subtítulo Texto enriquecido Subtítulo de la tarjeta. 2 líneas como máximo; formato no compatible actualmente
text Texto enriquecido El texto aparece justo debajo del subtítulo; ver el formato de la tarjeta para las opciones de formato
incluidas Matriz de imágenes Imagen que se muestra en la parte superior de la tarjeta. Relación de aspecto 1:1 (cuadrado)
situados Matriz de objetos Action Conjunto de acciones que se aplican a la tarjeta actual. Máximo de 6
toque Action (objeto) Esta acción se activará cuando el usuario pulse en la tarjeta

Tarjeta de miniaturas de ejemplo

{
  "contentType": "application/vnd.microsoft.card.thumbnail",
  "content": {
    "title": "Bender",
    "subtitle": "tale of a robot who dared to love",
    "text": "Bender Bending Rodríguez is a main character in the animated television series Futurama. He was created by series creators Matt Groening and David X. Cohen, and is voiced by John DiMaggio",
    "images": [
      {
        "url": "https://upload.wikimedia.org/wikipedia/en/a/a6/Bender_Rodriguez.png",
        "alt": "Bender Rodríguez"
      }
    ],
    "buttons": [
      {
        "type": "imBack",
        "title": "Thumbs Up",
        "image": "http://moopz.com/assets_c/2012/06/emoji-thumbs-up-150-thumb-autox125-140616.jpg",
        "value": "I like it"
      },
      {
        "type": "imBack",
        "title": "Thumbs Down",
        "image": "http://yourfaceisstupid.com/wp-content/uploads/2014/08/thumbs-down.png",
        "value": "I don't like it"
      },
      {
        "type": "openUrl",
        "title": "I feel lucky",
        "image": "http://thumb9.shutterstock.com/photos/thumb_large/683806/148441982.jpg",
        "value": "https://www.bing.com/images/search?q=bender&qpvt=bender&qpvt=bender&qpvt=bender&FORM=IGRE"
      }
    ],
    "tap": {
      "type": "imBack",
      "value": "Tapped it!"
    }
  }
}

Más información

Referencia de la estructura de bot:

Colecciones de tarjetas

Las colecciones de tarjetas se admiten en Microsoft Teams.

Las colecciones de tarjetas las proporciona el marco de builder.AttachmentLayout.carousel bot builder.AttachmentLayout.list: y. Estas colecciones pueden contener tarjetas adaptables, de héroe o de miniaturas.

El diseño carrusel muestra un carrusel de tarjetas, opcionalmente con botones de acción asociados.

Bots en Teams Extensiones de mensajería Conectores Bot Framework

Nota

Un carrusel puede mostrar un máximo de 10 tarjetas por mensaje.

Ejemplo de un carrusel de tarjetas

Las propiedades son las mismas que para el héroe o la tarjeta en miniatura.

builder.AttachmentLayout.carousel

Colección List

Compatibilidad con colecciones de listas

El diseño de lista muestra una lista apilada verticalmente de tarjetas, opcionalmente con botones de acción asociados.

Bots en Teams Extensiones de mensajería Conectores Bot Framework

Colección de lista de ejemplo

Ejemplo de una lista de tarjetas

Las propiedades son las mismas que para el héroe o la tarjeta en miniatura.

Una lista puede mostrar un máximo de 10 tarjetas por mensaje.

Nota

Algunas combinaciones de tarjetas de lista aún no se admiten en iOS y Android.

Sintaxis para colecciones de listas

builder.AttachmentLayout.list

Tarjetas no admitidas en Microsoft Teams

El marco de bot implementa las siguientes tarjetas, pero no son compatibles con Microsoft Teams.

  • Tarjetas de animación
  • Tarjetas de audio
  • Tarjetas de vídeo