Compartir a través de

Introducción

  • Artículo

Una tarjeta adaptable es un modelo de objetos de tarjeta serializado a JSON.

Estructura de la tarjeta adaptable

A continuación, se muestra la estructura básica de una tarjeta:

  • AdaptiveCard: el objeto raíz describe la tarjeta adaptable, incluida su estructura de elementos, sus acciones, cómo se debe leer y la versión de esquema necesaria para representarla.
  • body: el cuerpo de la tarjeta consta de bloques de compilación conocidos como elements. Los elementos pueden componerse de disposiciones casi infinitas para crear muchos tipos de tarjetas.
  • actions: muchas tarjetas tienen un conjunto de acciones que puede realizar un usuario. Esta propiedad describe las acciones que normalmente se representan en una "barra de acciones" en la parte inferior.

Tarjeta de ejemplo

Esta tarjeta de ejemplo incluye una sola línea de texto seguida de una imagen.

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "Here is a ninja cat"
        },
        {
            "type": "Image",
            "url": "http://adaptivecards.io/content/cats/1.png"
        }
    ]
}

Propiedad de Type

Cada elemento tiene una propiedad de type que identifica el tipo de objeto. Si observas la tarjeta anterior, puedes ver que tenemos dos elementos: TextBlock y Image.

Todos los elementos de la tarjeta adaptable se apilan verticalmente y se expanden según el ancho del elemento principal (piensa en display: block en HTML). Sin embargo, puedes usar un ColumnSet para crear columnas de contenedores en paralelo.

Elementos adaptables

Los elementos más fundamentales son:

  • TextBlock: agrega un bloque de texto con propiedades para controlar el aspecto del texto.
  • Image: agrega una imagen con propiedades para controlar el aspecto de la imagen.

Elementos de contenedor

Las tarjetas también pueden tener contenedores, que organizan una colección de elementos secundarios.

  • Container: define una colección de elementos.
  • ColumnSet/Column: define una colección de columnas (cada columna es un contenedor).
  • FactSet: contenedor de hechos.
  • ImageSet: contenedor de imágenes, por lo que la IU puede mostrar la experiencia de galería de fotos adecuada para una colección de imágenes.

Elementos de entrada

Los elementos de entrada te permiten solicitar una IU nativa para compilar formularios simples:

  • Input.Text: obtiene el contenido de texto del usuario.
  • Input.Date: obtiene una fecha del usuario.
  • Input.Date: obtiene una hora del usuario.
  • Input.Date: obtiene un número del usuario.
  • Input.ChoiceSet: ofrece al usuario un conjunto de opciones y hace que las seleccione.
  • Input.Toggle : concede al usuario una opción única entre dos elementos y le hace elegir.

Acciones

Botones para agregar acciones a la tarjeta. Pueden realizar diferentes acciones, como abrir una dirección URL o enviar datos.

  • Action.OpenUrl: el botón abre una dirección URL interna para su visualización.
  • Action.ShowCard: solicita que se muestre una tarjeta secundaria al usuario.
  • Action.Submit: solicita que se recopilen todos los elementos en un objeto que le enviamos a través de algún método definido por la aplicación host.

Ejemplo de Action.Submit: Con Skype, una instancia de Action.Submit devolverá a una actividad de bot de Bot Framework al bot con la propiedad Valor con un objeto con todos los datos de entrada.

Más información