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 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 to show the list of tasks in the agent.
Select Add node (+) to add a node, and then select Variable management > Set a variable value.
Select the box under Set variable, and then select Create new.
Select the new variable (for example, Var1) to display the Variable properties panel.
Name your variable something meaningful, such as EmployeeTaskList.
This variable management node is used to convert the JSON string into a table that can be used later in the Adaptive Card.
Select Add node (+) and Variable management > Parse value.
Under Parse value, select the EmployeeTaskList variable you created in the previous section.
Under Data type, select From sample data.
Select </> Get schema from sample JSON, then copy and paste the same JSON into the From sample data section of the Data type settings. The sample data automatically generates the schema and datatype. Select Confirm.
Under Save as, select Create a new variable.
Select the new variable, and change the Variable name to TaskTable.
Display the data in an Adaptive Card
To display the data in an Adaptive Card, use a Message node.
Select + Add, and select Adaptive Card from the dropdown.
Select the Media section to show the Adaptive Card properties panel.
Inside the Adaptive Card properties panel on the right, select the </> Edit JSON dropdown and change it to Formula.
Now we can refer the JSON record properties using expressions like Topic.TaskTable.employeeName.
To display array items in an Adaptive Card, use the Container element with the items property.
The items property accepts an array of elements as its value. Each element in the array is displayed in the Adaptive Card, using the 'ForAll' function. Reference the Topic.TaskTable.employeeTasks array, as it allows access to each of its properties.
If you want to create the topic without following these instructions, you can select Open code editor from the top right command bar, and paste the following YAML code in the code editor view.
Learn how to enhance the user experience of declarative agents by using Adaptive Cards to render API data visually. Create and configure Adaptive Card templates, integrate them into API plugins, and test the setup in Microsoft 365 Copilot. Learn the practical steps for building and previewing Adaptive Cards in Visual Studio Code.
Use the interactive Adaptive Cards node to collect information from a user and store the response in one or more variables in Microsoft Copilot Studio.