Utilice tarjetas adaptables para mostrar carruseles

2025-05-14

Las tarjetas adaptables se pueden formatear para que actúen como un carrusel, donde los usuarios pueden recorrer mensajes de forma interactiva. Los usuarios interactúan con un carrusel seleccionando flechas, que les permiten desplazarse por varias opciones.

Los carruseles son útiles en escenarios donde las opciones de menú son largas, lo que requiere una oración completa o un párrafo corto para que el usuario comprenda completamente las opciones disponibles.

En el siguiente ejemplo, crea un carrusel para presentar los productos a los clientes en el sitio web Contoso. El carrusel ayuda a los clientes a seleccionar el producto que les parece más interesante, como parte del flujo de conversación.

Nota

Los iconos y las descripciones son para fines de demostración. Puede copiar y revisar los ejemplos de código para su propio escenario.

Crear un carrusel con una tarjeta adaptable

Este ejemplo utiliza una matriz de datos JSON de entrada como variable de cadena para simplificar el flujo de conversación. También utiliza URL de ejemplo para mostrar los iconos de productos y representaciones SVG para las flechas izquierda y derecha. Puede hacer referencia a cualquier combinación de archivos SVG o URL para el contenido multimedia. Para obtener mejores resultados al hacer referencia a soportes físicos, almacene los medios en una ubicación estática y no autenticada.

En Copilot Studio, cree un tema y llámelo "Crear carrusel", por ejemplo.
Utilice las palabras "Carrusel" y "Crear carrusel" para las frases desencadenantes.
Seleccione el icono de Agregar nodo debajo del nodo Desencadenador, seleccione Administración de variables y, a continuación, seleccione Establecer valor de variable.
Crear una nueva variable llamada DataJSON. Esta variable es una cadena y contiene la representación JSON de la tarjeta adaptable.
Copie y pegue el bloque de código DataJSON en el campo Al valor del nuevo nodo.

Para transformar la matriz JSON en una tarjeta adaptable, debe analizar el bloque de código.
Seleccione el icono de Agregar nodo debajo del nodo Establecer valor variable, seleccione Administración de variables y, a continuación, seleccione Analizar valor. Este nodo sirve para analizar la variable del nodo anterior.
En Analizar valor, seleccione la variable del nodo anterior: DataJSON, en este ejemplo.
Para Tipo de datos:
1. Seleccione A partir de datos de ejemplo y, a continuación, seleccione Obtener esquema a partir de JSON de ejemplo.
2. En el editor que se abre, pegue el bloque de código DataJSON y seleccione Confirmar.
Como alternativa, si ya tiene el esquema deseado para la tabla:
1. Seleccione Tabla y después seleccione Editar esquema.
2. En el editor que se abre, pegue el esquema y seleccione Confirmar.
  
  En este ejemplo, el esquema apropiado sería:
```
kind: Table
properties:
  description: String
  icon: String
  linklabel: String
  linkurl: String
  name: String
```
Para Guardar como, cree otra variable personalizada. Esta variable es una tabla llamada DataTable. Contiene los resultados analizados como un registro.
Cree una tabla indexada para ser utilizada por la tarjeta adaptable:
1. Seleccione el icono Agregar nodo debajo del nodo Analizar valor y agregue otro nodo Establecer un valor de variable.
2. Cree una variable nueva y llámela DataTableWithIndex.
3. Para Al valor, introduzca la fórmula siguiente:
```
ForAll(
  Sequence(
    CountRows(Topic.DataTable)
  ),
  { 
    ItemNumber: Value,
    Name: Index(Topic.DataTable, Value).name,
    Description: Index(Topic.DataTable, Value).description,
    ImageURL: Index(Topic.DataTable, Value).icon,
    URL: Index(Topic.DataTable, Value).linkurl,
    Label: Index(Topic.DataTable, Value).linklabel
  }
)
```
  Esta fórmula crea una matriz JSON para la visualización de cada ventana de carrusel. La función Sequence agrega un índice para proporcionar identificadores individuales predecibles para cada registro. Las flechas anterior y siguiente del carrusel muestran el registro deseado, en función de este índice.
Agregar un nodo Mensaje con una tarjeta adaptable en la parte inferior de los nodos de tema:
1. Seleccione el icono Agregar nodo situado debajo del último y seleccione Enviar un mensaje.
2. En la barra de menú del nodo, seleccione Agregar y después seleccione Tarjeta adaptable.
3. En el panel de la Tarjeta adaptable, cambie a Fórmula y reemplace el contenido predeterminado por la fórmula de la tarjeta adaptable.
Guarde el tema y pruébelo.

Bloque de código DataJSON

En el siguiente bloque de código JSON, hay claves repetidas: icon, name, description, linkurl y linklabel. Estas claves representan puntos de navegación en la tarjeta.

icon: enlace al icono que se mostrará a la izquierda de la ventana del carrusel.
name: etiqueta para el nombre del producto, no se muestra en la tarjeta adaptable.
description: descripción del producto.
linkurl: Hipervínculo asociado con el producto o selección.
linklabel: Texto que se mostrará encima del hipervínculo.

La tarjeta de ejemplo es un carrusel de cinco productos. Si su escenario requiere un carrusel con más de cinco elementos (o menos de cinco), copie y pegue (o elimine) elementos de este bloque de código según sea necesario.

[{
    "icon": "https://icon-library.com/images/placeholder-image-icon/placeholder-image-icon-14.jpg",
    "name": "Productum 1",
    "description": "Hard drive est dispositivum electromechanicum quod data retinet in forma magnetica vel optica. Haec data accessibilis est ad operandum systema computatorum.",
    "linkurl": "http://www.microsoft.com/",
    "linklabel": "Learn More"
  }, {
    "icon": "https://icon-library.com/images/placeholder-image-icon/placeholder-image-icon-13.jpg",
    "name": "Productum 2",
    "description": "Sellam infantium describere possumus quae te monere potest si infans in sella sedet et tu non es in proximo. Sellae haec est instructa sensoribus qui monent te per telephonum tuum mobilum si infans in sella manet et tu non es in loco.",
    "linkurl": "http://www.microsoft.com/",
    "linklabel": "Learn More"
  }, {
    "icon": "https://icon-library.com/images/placeholder-image-icon/placeholder-image-icon-12.jpg",
    "name": "Productum 3",
    "description": "Pluteus librorum est structura lignea vel metallica quae libros et alia volumina continet. Altitudine non amplius quam decem pedes, pluteus potest habere plures gradus vel tabulas ad libros exponendos. Hoc loco maximam aesthetiam et ordinem litterarum praestat.",
    "linkurl": "http://www.microsoft.com/",
    "linklabel": "Learn More"
  }, {
    "icon": "https://icon-library.com/images/placeholder-image-icon/placeholder-image-icon-11.jpg",
    "name": "Productum 4",
    "description": "Servitium conficiendi et transmittendi tortarum ad nuptias, quae formas et delicias unicas offert, sub vices quam viginti quinque verbis descriptum.",
    "linkurl": "http://www.microsoft.com/",
    "linklabel": "Learn More"
  }, {
    "icon": "https://icon-library.com/images/placeholder-image-icon/placeholder-image-icon-10.jpg",
    "name": "Productum 5",
    "description": "Bot GPT in correctione textus praecellit, grammaticam scrutans, errores corrigens, et textum meliorem reddens, sub vices quam viginti quinque verbis.",
    "linkurl": "http://www.microsoft.com/",
    "linklabel": "Learn More"
  }
]

Fórmula de tarjeta adaptable

El siguiente bloque de código define la fórmula para una Tarjeta adaptable de estilo carrusel:

{
  type: "AdaptiveCard",
  '$schema': "http://adaptivecards.io/schemas/adaptive-card.json",
  version: "1.5",
  body: ForAll(Topic.DataTableWithIndex,
    {
      type: "Container",
      items: [
        {      
        type: "ColumnSet",
        columns: [
          {
            type: "Column",
            width: "auto",
            items: [
              {
                type: "Image",
                url: "data:image/svg+xml;utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M12.2801%2016.5307L12.3527%2016.4466C12.5706%2016.153%2012.5464%2015.7363%2012.2801%2015.47L9.56078%2012.7507L16.2505%2012.7504L16.3523%2012.7435C16.7183%2012.6939%2017.0005%2012.3801%2017.0005%2012.0004L16.9936%2011.8986C16.944%2011.5325%2016.6302%2011.2504%2016.2505%2011.2504L9.55878%2011.2507L12.2807%208.52997L12.3534%208.44587C12.5713%208.1523%2012.5471%207.73563%2012.2809%207.46931C11.9881%207.17637%2011.5132%207.17628%2011.2203%207.46911L7.21873%2011.4691L7.14609%2011.5532C6.92816%2011.8468%206.95233%2012.2636%207.21863%2012.5299L11.2195%2016.5307L11.3036%2016.6033C11.5972%2016.8212%2012.0138%2016.797%2012.2801%2016.5307ZM12%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202ZM12%2020.5C7.30558%2020.5%203.5%2016.6944%203.5%2012C3.5%207.30558%207.30558%203.5%2012%203.5C16.6944%203.5%2020.5%207.30558%2020.5%2012C20.5%2016.6944%2016.6944%2020.5%2012%2020.5Z%22%20fill%3D%22%23212121%22%20%2F%3E%0A%3C%2Fsvg%3E"
              }
            ],
            selectAction: {
              type: "Action.ToggleVisibility",
              title: "Preview",
              targetElements: [
                "card" & If(ItemNumber = 1, Last(Topic.DataTableWithIndex).ItemNumber, ItemNumber - 1),
                "card" & ItemNumber
              ]
            }
          },
          {
            type: "Column",
            width: "stretch",
            items: [
              {
                type: "Container",
                items: [
                  {
                    type: "ColumnSet",
                    columns: [
                      {
                        type: "Column",
                        width: "auto",
                        items: [
                          {
                            type: "Image",
                            url: ImageURL,
                            size: "Small"
                          }
                        ]
                      },
                      {
                        type: "Column",
                        width: "stretch",
                        items: [
                          {
                            type: "TextBlock",
                            text: Description,
                            wrap: true,
                            size: "Small"
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                type: "ActionSet",
                actions: [
                  {
                    type: "Action.OpenUrl",
                    title: Label,
                    url: URL
                  }
                ]
              }
            ]
          },
          {
            type: "Column",
            width: "auto",
            items: [
              {
                type: "Image",
                url: "data:image/svg+xml;utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22M12.001%202C17.5238%202%2022.001%206.47715%2022.001%2012C22.001%2017.5228%2017.5238%2022%2012.001%2022C6.47813%2022%202.00098%2017.5228%202.00098%2012C2.00098%206.47715%206.47813%202%2012.001%202ZM12.001%203.5C7.30656%203.5%203.50098%207.30558%203.50098%2012C3.50098%2016.6944%207.30656%2020.5%2012.001%2020.5C16.6954%2020.5%2020.501%2016.6944%2020.501%2012C20.501%207.30558%2016.6954%203.5%2012.001%203.5ZM11.648%207.55308L11.7206%207.46897C11.9869%207.2027%2012.4036%207.17849%2012.6972%207.39635L12.7813%207.46897L16.7821%2011.4698C17.0484%2011.7361%2017.0726%2012.1528%2016.8547%2012.4464L16.782%2012.5306L12.7805%2016.5306C12.4876%2016.8234%2012.0127%2016.8233%2011.7198%2016.5303C11.4536%2016.264%2011.4295%2015.8474%2011.6474%2015.5538L11.72%2015.4697L14.442%2012.749L7.75027%2012.7493C7.37058%2012.7493%207.05678%2012.4671%207.00712%2012.1011L7.00027%2011.9993C7.00027%2011.6196%207.28243%2011.3058%207.6485%2011.2561L7.75027%2011.2493L14.44%2011.249L11.7206%208.52963C11.4544%208.26336%2011.4302%207.8467%2011.648%207.55308L11.7206%207.46897L11.648%207.55308Z%22%20fill%3D%22%23212121%22%20%2F%3E%0A%3C%2Fsvg%3E"
              }
            ],
            selectAction: {
              type: "Action.ToggleVisibility",
              title: "Next",
              targetElements: [
                "card" & ItemNumber,
                "card" & If(ItemNumber = Last(Topic.DataTableWithIndex).ItemNumber, 1, ItemNumber + 1)
              ]
            }
          }
        ]
      }
    ],
    minHeight: "1px",
    spacing: "None",
    id: "card" & ItemNumber,
    bleed: true,
    isVisible: If(ItemNumber = 1, true, false)
    }
  )
}

Compartir a través de

Utilice tarjetas adaptables para mostrar carruseles

Crear un carrusel con una tarjeta adaptable

Bloque de código DataJSON

Fórmula de tarjeta adaptable

Contenido relacionado

Comentarios

Recursos adicionales