Use Adaptive Cards to display carousels

2025-05-01

Adaptive Cards can be formatted to act like a carousel, where users can interactively cycle through messages. Users interact with a carousel by selecting arrows, which allow them to scroll through multiple choices.

Carousels are helpful in scenarios where menu options are lengthy, requiring a full sentence or short paragraph for the user to fully understand the available options.

In the following example, you build a carousel to present your products to customers on the Contoso website. The carousel helps customers select the product they find most interesting, as part of the conversation flow.

Note

The icons and descriptions are for demonstration purposes. You can copy and revise the code samples for your own scenario.

Build a carousel using an Adaptive Card

This example uses an input JSON data array as a string variable to simplify the conversation flow. It also uses example URLs to display the product icons and SVG representations for the left and right arrows. You can reference any combination of SVG files or URLs for media. For best results when referencing media, store the media in a static, unauthenticated location.

In Copilot Studio, create a topic and call it "Create Carousel," for example.
Use the words "carousel" and "create carousel" for the trigger phrases.
Select the Add node icon below the Trigger node, select Variable management, and then select Set a variable value.
Create a new variable named DataJSON. This variable is a string, and holds the JSON representation of the Adaptive Card.
Copy and paste the DataJSON code block into the To value field of the new node.

To transform the JSON array into an adaptive card, you must parse the code block.
Select the Add node icon below the Set variable value node, select Variable management, and then Parse value. This node is for parsing the variable from the previous node.
For Parse value, select the variable from the previous node—DataJSON, in this example.
For Data type:
1. Select From sample data, then select Get schema from sample JSON.
2. In the editor that opens, paste the DataJSON code block, and select Confirm.
Alternatively, if you already have the desired schema for the table:
1. Select Table, and select Edit schema.
2. In the editor that opens, paste your schema, and select Confirm.
  
  In this example, the appropriate schema would be:
```
kind: Table
properties:
  description: String
  icon: String
  linklabel: String
  linkurl: String
  name: String
```
For Save as, create another custom variable. This variable is a table named DataTable. It holds the parsed results as a record.
Create an indexed table to be used by the Adaptive Card:
1. Select the Add node icon below the Parse value node, and add another Set a variable value node.
2. Create a new variable and name it DataTableWithIndex.
3. For To value, enter the following formula:
```
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
  }
)
```
  This formula creates a JSON array for the display of each carousel window. The Sequence function adds an index to provide predictable, individual IDs for each record. The previous and next arrows of the carousel show the desired record, based on this index.
Add a Message node with an Adaptive Card to the bottom of the topic nodes:
1. Select the Add node icon below the last node and select Send a message.
2. In the node's menu bar, select Add, and then select Adaptive card.
3. In the Adaptive Card properties panel, switch to Formula, and replace the default content with the Adaptive Card formula.
Save your topic, and test it.

DataJSON code block

In the following JSON code block, there are repeated keys: icon, name, description, linkurl, and linklabel. These keys represent navigation points in the card.

icon: Link to the icon to display on the left of the carousel window.
name: Label for the product name, not shown on the Adaptive Card.
description: Description of the product.
linkurl: Hyperlink associated with the product or selection.
linklabel: Text to display above the hyperlink.

The example card is a carousel of five products. If your scenario requires a carousel with more than five elements (or less than five), copy and paste (or delete) elements from this code block as needed.

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

Adaptive Card formula

The following code block defines the formula for a carousel-style Adaptive Card:

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

Share via

Use Adaptive Cards to display carousels

Build a carousel using an Adaptive Card

DataJSON code block

Adaptive Card formula

Related content

Feedback

Additional resources