Use Cartões Adaptáveis para exibir carrosséis

2025-05-14

Os Cartões Adaptáveis podem ser formatados para funcionar como um carrossel, no qual os usuários podem percorrer mensagens de forma interativa. Os usuários interagem com um carrossel selecionando setas, que lhes permitem percorrer várias opções.

Os carrosséis são úteis em cenários onde as opções de menu são longas, exigindo uma frase completa ou um parágrafo curto para que o usuário compreenda completamente as opções disponíveis.

No exemplo a seguir, você cria um carrossel para apresentar seus produtos aos clientes no site Contoso. O carrossel ajuda os clientes a selecionar o produto que consideram mais interessante, como parte do fluxo da conversa.

Observação

Os ícones e descrições são para fins de demonstração. Você pode copiar e revisar os exemplos de código para seu próprio cenário.

Criar um carrossel usando um Cartão Adaptável

Este exemplo usa uma matriz de dados JSON de entrada como uma variável de cadeia de caracteres para simplificar o fluxo da conversa. Ele também usa URLs de exemplo para exibir os ícones do produto e representações SVG para as setas para a esquerda e para a direita. Você pode fazer referência a qualquer combinação de arquivos SVG ou URLs para mídia. Para obter melhores resultados ao fazer referência à mídia, armazene-a em um local estático e não autenticado.

No Copilot Studio, crie um tópico e chame-o de "Criar Carrossel", por exemplo.
Use as palavras "Carrossel" e "Criar Carrossel" para as frases de gatilho.
Selecione o ícone Adicionar nó abaixo do nó Gatilho, selecione Gerenciamento de variável, e escolha Definir uma variável.
Criar uma variável chamada DataJSON. Essa variável é uma cadeia de caracteres e contém a representação JSON do Cartão Adaptável.
Copie e cole o Bloco de código do DataJSON no campo Valor de destino do novo nó.

Para transformar a matriz JSON em um cartão adaptativo, você deve analisar o bloco de código.
Selecione o ícone Adicionar nó abaixo do nó Definir valor da variável, selecione Gerenciamento de variável, e escolha Analisar valor. Este nó destina-se a analisar a variável do nó anterior.
Para Analisar valor, selecione a variável do nó anterior, DataJSON, neste exemplo.
Para Tipo de dados:
1. Selecione A partir de dados de exemplo, em seguida, selecione Obter esquema do JSON de exemplo.
2. No editor que é aberto, cole o Bloco de código do DataJSON e selecione Confirmar.
Como alternativa, se você já tiver o esquema desejado para a tabela:
1. Selecione Tabela e escolha Editar esquema.
2. No editor que é aberto, cole seu esquema e selecione Confirmar.
  
  Neste exemplo, o esquema apropriado seria:
```
kind: Table
properties:
  description: String
  icon: String
  linklabel: String
  linkurl: String
  name: String
```
Para Salvar como, crie outra variável personalizada. Essa variável é uma tabela chamada DataTable. Ela mantém os resultados analisados como um registro.
Crie uma tabela indexada a ser usada pelo Cartão Adaptável:
1. Selecione o ícone Adicionar nó abaixo do nó Analisar valor e adicione outro nó Definir um valor de variável.
2. Crie uma nova variável e nomeia-a como DataTableWithIndex.
3. Para Valor de destino, informe a seguinte fórmula:
```
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
  }
)
```
  Essa fórmula cria uma matriz JSON para a exibição de cada janela carrossel. A função Sequência adiciona um índice para fornecer IDs individuais previsíveis para cada registro. As setas anterior e seguinte do carrossel mostram o registro desejado, com base nesse índice.
Adicione um nó de Mensagem com um Cartão Adaptável na parte inferior dos nós do tópico:
1. Selecione o ícone Adicionar nó abaixo do último nó e selecione Enviar uma mensagem.
2. Na barra de menu do nó, selecione Adicionar e Cartão adaptável.
3. No painel Propriedades do Cartão Adaptável, alterne para Fórmula e substitua o conteúdo padrão pela Fórmula do Cartão Adaptável.
Salve seu tópico e teste-o.

Bloco de códigos DataJSON

No bloco de código JSON a seguir, há chaves repetidas: icon, name, description, linkurl e linklabel. Essas chaves representam pontos de navegação no cartão.

ícone: Link para o ícone a ser exibido à esquerda da janela do carrossel.
name: Etiqueta para o nome do produto, não mostrada no Adaptive Card.
descrição: Descrição do produto.
linkurl: hiperlink associado ao produto ou seleção.
linklabel: Texto a ser exibido acima do hiperlink.

O cartão de exemplo é um carrossel de cinco produtos. Se o seu cenário exigir um carrossel com mais de cinco elementos (ou menos de cinco), copie e cole (ou exclua) elementos desse bloco de código, conforme necessário.

[{
    "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 do Cartão Adaptável

O bloco de código a seguir define a fórmula para um Cartão Adaptável estilo carrossel:

{
  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)
    }
  )
}

Compartilhar via

Use Cartões Adaptáveis para exibir carrosséis

Criar um carrossel usando um Cartão Adaptável

Bloco de códigos DataJSON

Fórmula do Cartão Adaptável

Conteúdo relacionado

Comentários

Recursos adicionais