Referencia de tarjetas

• 04/02/2020
• Tiempo de lectura: 12 minutos

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.

• .NET
  • Agregar tarjetas como datos adjuntos a los mensajes
  • Código de ejemplo de tarjetas (bot Builder V3)
• Node.js
  • Agregar tarjetas como datos adjuntos a los mensajes
  • Código de ejemplo de tarjetas (bot Builder V3)

Tipos de tarjetas

En esta tabla se muestran los tipos de tarjetas disponibles.

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.

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

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

Compatibilidad con tarjetas adaptables

Tarjeta adaptable de ejemplo

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

• Introducción a las tarjetas adaptables
• Acciones de tarjeta adaptable en Microsoft Teams

Tarjeta Hero

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

Soporte para tarjetas de héroe

Propiedades de una tarjeta Hero

Ejemplo de 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:

• Nodo de tarjeta Hero
• Tarjeta de héroe C #

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

Propiedades de una tarjeta de lista

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

Propiedades de la tarjeta de conector de Office 365

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.

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:

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

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

Referencia de la estructura de bot:

• Nodo tarjeta de recepción
• Tarjeta de recepción C #

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

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

Referencia de la estructura de bot:

• Nodo de tarjeta de inicio de sesión
• Tarjeta de inicio de sesión C #

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

Propiedades de una tarjeta en miniatura

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:

• Nodo de tarjeta en miniatura
• Tarjeta en miniatura C #

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.

Colección carrusel

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

Compatibilidad con colecciones de carrusel

Colección de carrusel de ejemplo

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

Sintaxis para colecciones de carrusel

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.

Colección de lista de ejemplo

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.

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