Tipos de tarjetas

Adaptive, hero, list, Office 365 Connector, receipt, signin, and thumbnail cards and card collections are supported in bots for Microsoft Teams. Se basan en tarjetas definidas por Bot Framework, pero Teams no admite todas las tarjetas de Bot Framework y ha agregado algunas de sus propias.

Antes de identificar los distintos tipos de tarjeta, comprenda cómo crear una tarjeta de héroe, una tarjeta en miniatura o una tarjeta adaptable.

Crear una tarjeta de héroe, una tarjeta en miniatura o una tarjeta adaptable

Para crear una tarjeta de héroe, una miniatura o una tarjeta adaptable desde App Studio

1. Ve a App Studio desde Teams.

2. Seleccione Editor de tarjetas.

3. Seleccione Crear una nueva tarjeta.

4. Seleccione Crear para una de las tarjetas de hero card, Thumbnail Card o Adaptive Card. Los detalles de metadatos, los botones y los ejemplos de código json, csharp y node se muestran para esa tarjeta.

   

5. Seleccione Enviarme esta tarjeta. La tarjeta se envía como un mensaje de chat.

Ejemplos de tarjetas

Encontrará información adicional sobre cómo usar tarjetas en la documentación del SDK de Bot Builder v3. Los ejemplos de código también están disponibles en el repositorio microsoft/BotBuilder-Samples en GitHub. A continuación se muestran algunos ejemplos de tarjetas:

• .NET

  • Agregar tarjetas como datos adjuntos a los mensajes.
  • Código de ejemplo de tarjetas Bot Builder v4.

• Node.js

  • Agregar tarjetas como datos adjuntos a los mensajes.
  • Código de ejemplo de tarjetas Bot Builder v4.

Tipos de tarjeta

Puede identificar y usar diferentes tipos de tarjetas según los requisitos de la aplicación. En la tabla siguiente se muestran los tipos de tarjetas disponibles:

Características que admiten distintos tipos de tarjeta

Propiedades comunes para todas las tarjetas

Puedes ir a través de algunas propiedades comunes que son aplicables a todas las tarjetas.

Imágenes de tarjetas en línea

La tarjeta puede contener una imagen en línea al incluir un vínculo a la imagen disponible públicamente. Por motivos de rendimiento, se recomienda hospedar la imagen en un servidor público Content Delivery Network (CDN).

Las imágenes se escalan hacia arriba o hacia abajo en tamaño para mantener la relación de aspecto para cubrir el área de imagen. A continuación, las imágenes se recortan desde el centro para lograr la relación de aspecto adecuada para la tarjeta.

Las imágenes deben tener como máximo 1024×1024 y en formato PNG, JPEG o GIF. Gif animado no es compatible.

En la tabla siguiente se proporcionan las propiedades de las imágenes de tarjetas en línea:

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 trunca si el texto supera el ancho del botón. No se muestran los botones adicionales que supere el número máximo admitido por la tarjeta.

Para obtener más información, vea acciones de tarjeta.

Formato de tarjeta

Para obtener más información sobre el formato de texto en tarjetas, vea formato de tarjeta.

Después de identificar las propiedades comunes de todas las tarjetas, ahora puedes trabajar con tarjetas adaptables, lo que te ayudará a aumentar la interacción y la eficacia agregando el contenido que se puede usar directamente en las aplicaciones que usas.

Tarjeta adaptable

Una tarjeta adaptable es una tarjeta personalizable que puede contener cualquier combinación de texto, voz, imágenes, botones y campos de entrada. Para obtener más información, vea Adaptive Cards.

Compatibilidad con tarjetas adaptables

En la tabla siguiente se proporcionan las características que admiten tarjetas adaptables:

Ejemplo de tarjeta adaptable

El código siguiente muestra un ejemplo de una 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"
            }
          ]
        }
      }
    ]
  }  
}

Información adicional sobre tarjetas adaptables

Referencia de Bot Framework:

• Nodo de tarjetas adaptables
• Tarjeta adaptable C #

Ahora puedes trabajar con una tarjeta de héroe, que es una tarjeta multipropósito que se usa para resaltar visualmente una selección de usuario potencial.

Tarjeta de héroe

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

Compatibilidad con tarjetas de héroe

En la tabla siguiente se proporcionan las características que admiten tarjetas de héroe:

Propiedades de una tarjeta de héroe

En la tabla siguiente se proporcionan las propiedades de una tarjeta de héroe:

Ejemplo de una tarjeta de héroe

El siguiente código muestra un 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"
       }
     ]
   }
}

Información adicional sobre tarjetas de héroe

Referencia de Bot Framework:

• Tarjeta de Node.js
• Tarjeta de héroe C #

Tarjeta de lista

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

Compatibilidad con tarjetas de lista

En la tabla siguiente se proporcionan las características que admiten tarjetas de lista:

Propiedades de una tarjeta de lista

En la tabla siguiente se proporcionan las propiedades de una tarjeta de lista:

Ejemplo de una tarjeta de lista

El siguiente código muestra un ejemplo de una tarjeta de lista:

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

Office 365 de conector

Puede trabajar con una tarjeta Office 365 Connector que proporciona un diseño flexible y es una excelente manera de obtener información útil. La Office 365 de conector se admite en Teams, no en Bot Framework. Esta tarjeta proporciona un diseño flexible con varias secciones, campos, imágenes y acciones. Esta tarjeta contiene una tarjeta de conector para que la puedan usar los bots. Para obtener más información sobre las diferencias entre las tarjetas de conector y la Office 365 connector, consulte Información adicional sobre la Office 365 connector.

Compatibilidad con tarjetas Office 365 Connector

En la tabla siguiente se proporcionan las características que admiten Office 365 de conector:

Propiedades de la tarjeta Office 365 Connector

En la tabla siguiente se proporcionan las propiedades de la Office 365 de conector:

Información adicional sobre la tarjeta Office 365 Connector

Office 365 las tarjetas connector funcionan correctamente en Microsoft Teams, incluidas las ActionCard acciones.

La diferencia importante entre usar tarjetas de conector desde un conector y usar tarjetas de conector en el bot es el control de las acciones de tarjeta. En la tabla siguiente se muestra la diferencia:

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

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

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

Para especificar el estilo de representación activityImage para , puede activityImageType establecerlo como se muestra en la tabla siguiente:

Para obtener todos los demás detalles acerca de las propiedades de la tarjeta de conector, vea referencia de tarjeta de mensaje que puede actuar. Las únicas propiedades de tarjeta de conector que Teams admite actualmente son las siguientes:

• heroImage
• hideOriginalBody
• startGroupsiempre tratado como true en Teams
• originator
• correlationId

Ejemplo de una tarjeta Office 365 Connector

El siguiente código muestra un ejemplo de una tarjeta Office 365 Connector:

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

Teams admite tarjeta de recibo. Es una tarjeta que permite a un bot proporcionar un recibo al usuario. Normalmente contiene la lista de elementos que se deben incluir en el recibo, como impuestos y la información total.

Compatibilidad con tarjetas de recibo

En la tabla siguiente se proporcionan las características que admiten tarjetas de recibo:

Ejemplo de una tarjeta de recibo

El siguiente código muestra un ejemplo de una tarjeta de recibo:

{
  "contentType": "application/vnd.microsoft.card.receipt",
  "content": {
    "title": "John Doe",
    "facts": [
      {
        "key": "Order Number",
        "value": "1234"
      },
      {
        "key": "Payment Method",
        "value": "VISA 5555-****"
      }
    ],
    "items": [
      {
        "title": "Data Transfer",
        "image": {
          "url": "https://github.com/amido/azure-vector-icons/raw/master/renders/traffic-manager.png"
        },
        "price": "$ 38.45",
        "quantity": "368"
      },
      {
        "title": "App Service",
        "image": {
          "url": "https://github.com/amido/azure-vector-icons/raw/master/renders/cloud-service.png"
        },
        "price": "$ 45.00",
        "quantity": "720"
      }
    ],
    "total": "$ 90.95",
    "tax": "$ 7.50",
    "buttons": [
      {
        "type": "openUrl",
        "title": "More information",
        "image": "https://account.windowsazure.com/content/6.10.1.38-.8225.160809-1618/aux-pre/images/offer-icon-freetrial.png",
        "value": "https://azure.microsoft.com/en-us/pricing/"
      }
    ]
  }
}

Información adicional sobre tarjetas de recibo

Referencia de Bot Framework:

• Tarjeta de recibo Node.js
• Tarjeta de recibo C #

Tarjeta de inicio de sesión

La tarjeta de inicio de sesión en Teams es similar a la tarjeta de inicio de sesión en Bot Framework, excepto que la tarjeta de inicio de sesión en Teams solo admite dos signin acciones y openUrl .

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

Compatibilidad con tarjetas de inicio de sesión

En la tabla siguiente se proporcionan las características que admiten tarjetas de inicio de sesión:

Información adicional sobre tarjetas de inicio de sesión

Referencia de Bot Framework:

• Tarjeta de inicio de sesión Node.js
• Tarjeta de inicio de sesión C #

Tarjeta miniatura

Puedes trabajar con una tarjeta en miniatura que se usa para enviar un mensaje sencillo que puede usarse. Una tarjeta que normalmente contiene una sola imagen en miniatura, uno o varios botones y texto.

Compatibilidad con tarjetas en miniatura

En la tabla siguiente se proporcionan las características que admiten tarjetas en miniatura:

Propiedades de una tarjeta en miniatura

En la tabla siguiente se proporcionan las propiedades de una tarjeta en miniatura:

Ejemplo de una tarjeta en miniatura

El código siguiente muestra un ejemplo de una tarjeta en miniatura:

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

Información adicional

Referencia de Bot Framework:

• Tarjeta en miniatura Node.js
• Tarjeta de miniatura C #

Colecciones de tarjetas

Puede trabajar con colecciones de tarjetas que incluyen colecciones de carrusel y listas. Teams admite colecciones de tarjetas. Las colecciones de tarjetas builder.AttachmentLayout.carousel incluyen y builder.AttachmentLayout.list . Estas colecciones contienen tarjetas adaptables, de héroe o en miniatura.

Colección Carousel

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

Compatibilidad con colecciones de carrusel

En la tabla siguiente se proporcionan las características que admiten colecciones de carrusel:

Propiedades de una tarjeta de carrusel

Las propiedades de una tarjeta de carrusel son las mismas que las tarjetas de miniatura y de héroe.

Ejemplo de una colección de carrusel

El código siguiente muestra un ejemplo de una colección de carrusel:

{
 "attachmentLayout": "carousel",
 "attachments":[
    {
      "contentType": "application/vnd.microsoft.card.adaptive",
      "content": {
        "type": "AdaptiveCard",
        "version": "1.0",
        "body": [
          {
            "type": "Container",
            "items": [
              {
                "type": "TextBlock",
                "size": "extraLarge",
                "weight": "bolder",
                "text": "Welcome to Employee Connect",
                "height": "stretch"
              },
              {
                "type": "TextBlock",
                "size": "medium",
                "weight": "bolder",
                "text": "Add events to your calendar",
                "height": "stretch"
              },
              {
                "type": "TextBlock",
                "weight": "bolder",
                "text": "The bot can send \r\rnotification to remind \r\ryou about the latest \r\revents and trainings.",
                "wrap": true,
                "height": "stretch"
              },
              {
                "type": "ColumnSet",
                "columns": [
                  {
                    "type": "Column",
                    "items": [],
                    "height": "stretch"
                  }
                ]
              },
              {
                "type": "ColumnSet",
                "columns": [
                  {
                    "type": "Column",
                    "items": [],
                    "height": "stretch"
                  }
                ]
              }
            ]
          }
        ],
        "actions": [
          {
            "type": "Action.Submit",
            "title": "Let's get started"
          }
        ]
      }
    },
    {
      "contentType": "application/vnd.microsoft.card.adaptive",
      "content": {
        "type": "AdaptiveCard",
        "version": "1.2",
        "body": [
          {
            "type": "Container",
            "items": [
              {
                "type": "TextBlock",
                "size": "large",
                "weight": "bolder",
                "text": "Employee connect"
              },
              {
                "type": "TextBlock",
                "text": "The bot can send notifications \r\rto remind you about the latest \r\r events and trainings",
                "wrap": true,
                "maxWidth": 2
              },
              {
                "type": "ColumnSet",
                "columns": [
                  {
                    "type": "Column",
                    "items": [],
                    "height": "stretch"
                  }
                ]
              },
              {
                "type": "ColumnSet",
                "columns": [
                  {
                    "type": "Column",
                    "items": [],
                    "height": "stretch"
                  }
                ]
              }
            ]
          }
        ],
        "actions": [
          {
            "type": "Action.Submit",
            "title": "Let's get started"
          }
        ]
      }
    },
    {
      "contentType": "application/vnd.microsoft.card.adaptive",
      "content": {
        "type": "AdaptiveCard",
        "version": "1.0",
        "body": [
          {
            "type": "Container",
            "items": [
              {
                "type": "TextBlock",
                "size": "large",
                "weight": "bolder",
                "text": "Employee Connect final"
              },
              {
                "type": "TextBlock",
                "weight": "bolder",
                "text": "Create and manage your tasks",
                "wrap": true
              },
              {
                "type": "TextBlock",
                "text": "The app identifies all your pending tasks \r\r and helps you manage everything at \r\r one place.",
                "wrap": true
              },
              {
                "type": "TextBlock",
                "weight": "bolder",
                "text": "Try these commands \r\r- Pending Submissions \r\r- Pending Approvals- My Tools",
                "wrap": true,
                "height": "stretch"
              }
            ]
          }
        ],
        "actions": [
          {
            "type": "Action.Submit",
            "title": "Let's get started"
          }
        ]
      }
    }
  ]
}

Sintaxis para colecciones de carrusel

builder.AttachmentLayoutTypes.Carousel es la sintaxis de las colecciones de carrusel.

Colección List

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

Compatibilidad con colecciones de listas

En la tabla siguiente se proporcionan las características que admiten colecciones de listas:

Ejemplo de una colección de listas

Las propiedades de las colecciones de listas son las mismas que las tarjetas de miniatura o de héroe.

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

Sintaxis para colecciones de listas

builder.AttachmentLayout.list es la sintaxis de las colecciones de listas.

No se admiten tarjetas en Teams

Bot Framework implementa las siguientes tarjetas, pero no son compatibles con Teams:

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

Vea también

• Módulos de tareas
• Dar formato a tarjetas
• Tarjetas actualizadas
• Trabajar con Acciones universales para tarjetas adaptables