Compose Adaptive cards with array of records

Part 1 of this blog discusses how to use adaptive cards with Copilot studio. This blog discusses on how to design cards that contain array of dynamic data and use in copilot studio.

To keep it short, we will follow a template and design a card that has array of records.

Let’s see how to build a card as in below picture.

The first step is to put the design in your mind into the designer and design a record with sample records. Here in our case, we are getting data from SharePoint list. The above card is what I build with sample records to understand json card payload. It will also be easy to copy the parts of this payload into different actions in Power Automate. Hence, design the card first in the designer and get ready with the payload.

Now let’s see how we plugin dynamic data through Power Automate.

Below is the template for that.

1. Initialize a string variable and copy the first part of the card payload. This includes the type, schema, version and any header elements you use in the body of an adaptive card that doesn’t repeat. Ensure to separate the card payload to parts without breaking any single characters like comma and braces.

2. Later bring up your desired data. Be it a Dataverse table, SharePoint list or any other data source. Apply any data operations if needed to bring them as array of records.

3. Then use the apply to each action and pass the array of values into it. Within the loop use Append to string variable action and use the json payload portion you had in your sample for a first record. As the formatting and styling remains same for each record, we append the same json structure to the Adaptive card variable and just replace the hard-coded values with dynamic content.

4. The last part is to close the body and adaptive card payload with final brackets. Use append to string action out of the loop and use the final brackets to close the card payload.

That’s it. Just pass the adaptive card variable into the copilot action that returns the adaptive card to the topic where this Power Automate flow is called.

At the end, your Power Automate flow will look like this

To use the card in a message, add message node and select adaptive card from the choices. In the Adaptive card wizard, switch to Formula from JSON and then type in the below expression to display the card.

Topic.<Your_Adaptive_Card_Variable>