Display data from arrays in Adaptive Cards

Adaptive Cards are a versatile tool used to create interactive and engaging conversations in Copilot Studio, and can be used to display an array of items. In this article, for simplicity, we build the scenario in a new topic and we use a hard-coded example. However, you would likely get the data from a more dynamic source, like a SharePoint list, by using Power Automate.

Initialize a variable with the task list

In this scenario, you have a list of tasks in an array, and you want your agent to show these tasks.

1. In Copilot Studio, create a topic and call it "Show tasks," for example.

2. On the Trigger node, use the words "my tasks" and "show tasks" for the trigger phrases.

3. Select the Add node icon below the Trigger node, select Variable management, and then select Set a variable value.

4. Select the box under Set variable, and then select Create new.

5. Select the new variable (for example, Var1) to display the Variable properties panel.

6. Rename your variable to something meaningful, such as EmployeeTaskList.

7. Paste the following JSON literal into the To value field:

   {
       "employeeName": "Alice",
       "employeeID": "E12345",
       "employeeDepartment": "HR",
       "employeeTasks": [
           {
               "taskID": "T001",
               "taskDescription": "Review employee benefits",
               "dueDate": "2025-10-15"
           },
           {
               "taskID": "T002",
               "taskDescription": "Conduct new hire orientation",
               "dueDate": "2025-09-30"
           },
           {
               "taskID": "T003",
               "taskDescription": "Update HR policies",
               "dueDate": "2025-11-05"
           }
       ]
   }
   

Parse the JSON literal into a table

To convert the JSON string into a table that can be used later in the Adaptive Card, you must parse it.

1. 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.

2. For Parse value, select the variable from the previous node—EmployeeTaskList, in this example.

3. For Data type:

   1. Select From sample data, then select Get schema from sample JSON.

   2. In the editor that opens, paste the same JSON string, and select Confirm. The sample data automatically generates the schema and data type.

4. For Save as, select Create a new variable.

5. Select the new variable, and rename it TaskTable.

   

Display the data in an Adaptive Card

To display the data in an Adaptive Card, use a Message node.

1. Select Add, and select Adaptive Card from the dropdown.

2. Select the Media section to show the Adaptive Card properties panel.

3. Inside the Adaptive Card properties panel on the right, select the </> Edit JSON dropdown and change it to Formula.

4. Paste the following code.

   {
     type: "AdaptiveCard",
     version: "1.5",
     body: [
       {
         type: "TextBlock",
         text: "Employee Information",
         weight: "bolder",
         size: "large"
       },
       {
         type: "TextBlock",
         text: "Employee Name: " & Topic.TaskTable.employeeName,
         separator: true
       },
       {
         type: "TextBlock",
         text: "Employee ID: " & Topic.TaskTable.employeeID,
         separator: true
       },
       {
         type: "TextBlock",
         text: "Department: " & Topic.TaskTable.employeeDepartment,
         separator: true
       },
       {
         type: "TextBlock",
         text: "Tasks",
         weight: "bolder",
         size: "medium",
         separator: true
       },
       {
         type: "Container",
         items: 
           ForAll(Topic.TaskTable.employeeTasks,
             {
               type: "TextBlock",
               text: "- Task ID: " & taskID & ", Description: " & taskDescription & ", Due Date: " & dueDate ,
               wrap: true
             }
         )
       }
     ]
   }
   

   Notice how the formula refers to the record attributes by using expressions like Topic.TaskTable.employeeName. Also notice that it uses the Container element with the items property to display array items on the Adaptive Card. The items property accepts an array of elements as its value. Each element in the array is displayed on the Adaptive Card, using the ForAll function. The reference to the Topic.TaskTable.employeeTasks array allows access to each of its properties.

Build the same example scenario from YAML code

If you prefer to build this example topic quickly, you can create a blank topic, open the code editor, and replace the default YAML code with the following code.

kind: AdaptiveDialog
beginDialog:
  kind: OnRecognizedIntent
  id: main
  intent:
    displayName: Untitled
    triggerQueries:
      - array

  actions:
    - kind: SetVariable
      id: setVariable_uFs69M
      variable: Topic.EmployeeTaskList
      value: "{ \"employeeName\": \"Alice\", \"employeeID\": \"E12345\", \"employeeDepartment\": \"HR\", \"employeeTasks\": [ { \"taskID\": \"T001\", \"taskDescription\": \"Review employee benefits\", \"dueDate\": \"2023-10-15\" }, { \"taskID\": \"T002\", \"taskDescription\": \"Conduct new hire orientation\", \"dueDate\": \"2023-09-30\" }, { \"taskID\": \"T003\", \"taskDescription\": \"Update HR policies\", \"dueDate\": \"2023-11-05\" } ] }"

    - kind: ParseValue
      id: 58zKdp
      variable: Topic.TaskTable
      valueType:
        kind: Record
        properties:
          employeeDepartment: String
          employeeID: String
          employeeName: String
          employeeTasks:
            type:
              kind: Table
              properties:
                dueDate: String
                taskDescription: String
                taskID: String

      value: =Topic.EmployeeTaskList

    - kind: SendActivity
      id: sendActivity_oNXY1r
      activity:
        attachments:
          - kind: AdaptiveCardTemplate
            cardContent: |-
              ={
                type: "AdaptiveCard",
                version: "1.5",
                body: [
                  {
                    type: "TextBlock",
                    text: "Employee Information",
                    weight: "bolder",
                    size: "large"
                  },
                  {
                    type: "TextBlock",
                    text: "Employee Name: " & Topic.TaskTable.employeeName,
                    separator: true
                  },
                  {
                    type: "TextBlock",
                    text: "Employee ID: " & Topic.TaskTable.employeeID,
                    separator: true
                  },
                  {
                    type: "TextBlock",
                    text: "Department: " & Topic.TaskTable.employeeDepartment,
                    separator: true
                  },
                  {
                    type: "TextBlock",
                    text: "Tasks",
                    weight: "bolder",
                    size: "medium",
                    separator: true
                  },
                  {
                    type: "Container",
                    items: 
                      ForAll(Topic.TaskTable.employeeTasks,
                        {
                          type: "TextBlock",
                          text: "- Task ID: " & taskID & ", Description: " & taskDescription & ", Due Date: " & dueDate ,
                          wrap: true
                        }
                    )
                  }
                ]
              }