Adaptive Card: How to repeat Fact Set Element within card from a Parse JSON action with multiple objects?

[virakones]

Hello, I'm using more custom adaptive cards but just running into some challenges (new to JSON).

Background:

Recently put together a Powerapp for Teams where a user will submit pricing details to a Lead to approve or edit.

Upon submission, the details will trigger a power automate flow that sends a custom Adaptive Card with text input fields that will look up a record and edit values if an edit is made. Otherwise there is a button to simply approve.

Issue:

I have a Parse JSON action that will serialize the request details into an array of objects. Then, I use an 'Apply to Each' action using the body of the Parse JSON action to fill in the Adaptive Card details. However, the Card itself will send multiple times for each object rather than simply repeating the Fact Set element in the card itself, so its just 1 card. Not multiple.

Question:

In my template JSON below, how do I bind the Parse JSON output properly to the "$data" property of the Fact Set that I want to repeat below?

Tried following the official documentation but just having no luck connecting it to the Parse JSON action.

Here is a look at the flow:

Here is a look at the Card

Here is the Adaptive Card Template payload

- In the Fact Set $data property, I would like to bind the Parse JSON data

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "Container",
            "style": "emphasis",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "size": "Large",
                                    "weight": "Bolder",
                                    "text": "@{variables('varClientName')}"
                                }
                            ],
                            "width": "stretch"
                        }
                    ]
                }
            ],
            "bleed": true
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "size": "ExtraLarge",
                                    "text": "@{variables('varOrderDescription')}",
                                    "wrap": true
                                }
                            ],
                            "width": "stretch"
                        }
                    ]
                },
                {
                    "type": "FactSet",
                    "facts": [
                        {
                            "title": "Submitted By",
                            "value": "@{variables('varSubmittedBy')}"
                        },
                        {
                            "title": "Confirm Date",
                            "value": "@{variables('varConfirmationDate')}"
                        },
                        {
                            "title": "In-Hands Date",
                            "value": "@{variables('varInHandsDate')}"
                        },
                        {
                            "title": "Client Budget",
                            "value": "@{variables('varClientBudget')}"
                        },
                        {
                            "title": "Client Price",
                            "value": "@{variables('varClientTargetPrice')}"
                        }
                    ],
                    "separator": true,
                    "height": "stretch"
                },
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "width": "stretch",
                            "items": [
                                {
                                    "type": "FactSet",
                                    "facts": [
                                        {
                                            "title": "SKU",
                                            "value": "{$root.sku}"
                                        },
                                        {
                                            "title": "Description",
                                            "value": "{$root.description}"
                                        },
                                        {
                                            "title": "Unit Price",
                                            "value": "{$root.unitPrice}"
                                        },
                                        {
                                            "title": "Quantity",
                                            "value": "{$root.quantity}"
                                        },
                                        {
                                            "title": "Production Type",
                                            "value": "{$root.productionType}"
                                        }
                                    ],
                                    "$data": "{$root}" // Bind the Parse JSON data here
                                }
                            ]
                        },
                        {
                            "type": "Column",
                            "width": "stretch",
                            "items": [
                                {
                                    "type": "Input.Text",
                                    "placeholder": "Edit Unit Price",
                                    "maxLength": 1000,
                                    "id": "acEditPrice"
                                }
                            ],
                            "id": "@{items('Apply_to_each')['id']}"
                        }
                    ]
                }
            ]
        },
        {
            "type": "Container",
            "style": "emphasis",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "horizontalAlignment": "Right",
                                    "text": "Total Price Submitted",
                                    "wrap": true
                                }
                            ],
                            "width": "stretch"
                        },
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "weight": "Bolder",
                                    "text": "@{variables('varProductsTotalSum')}"
                                }
                            ],
                            "width": "auto"
                        }
                    ]
                }
            ],
            "bleed": true
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "ActionSet",
                    "actions": [
                        {
                            "type": "Action.Submit",
                            "title": "Submit",
                            "style": "positive",
                            "data": {
                                "id": "{$root.id}",
                                "action": "approve"
                            }
                        }
                    ]
                }
            ]
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2",
    "fallbackText": "This card requires Adaptive Cards v1.2 support to be rendered properly."
}

[Haris572]

Did you get solution for this? I'm having the same issue.

[virakones]

hey @Haris572 

Yes, I managed to find a work around in power automate using Apply to each, an Array variable and Compose. Though this solution was some time back (last year) so I'm not sure if binding is available for power automate adaptive cards in a Teams context these days. For now, you can ignore all the "$root" variables in my previous example - this will be replaced by your dynamic content.

Before I begin, I recommend using Designer | Adaptive Cards throughout to test out how your custom card will appear. I kept the card very simple, the FactSet object was enough for my needs. Otherwise, the site is a great resource for building custom Adaptive Cards.

My workaround below:

In the sample photo above of the actual card in Teams, the part I wanted repeated were the "products" (from SKU to Production Type)

In the adaptive card template it was the below bolded section of code that I repeated inside a ColumnSet "items" array:

                    "type": "ColumnSet",

                    "columns": [

                        {

                            "type": "Column",

                            "width": "stretch",

                            "items": [

                                {

                                    "type": "FactSet",

                                    "facts": [

                                        {

                                            "title": "SKU",

                                            "value": "dynamic content SKU"

                                        },

                                        {

                                            "title": "Description",

                                            "value": "dynamic content Description"

                                        },

                                        {

                                            "title": "Unit Price",

                                            "value": "dynamic content Unit Price"

                                        },

                                        {

                                            "title": "Quantity",

                                            "value": "dynamic content Quantity"

                                        },

                                        {

                                            "title": "Production Type",

                                            "value": "dynamic content Production Type"

                                        }

                                    ]

                                }

                            ]

                        }

Here, I would have a list of items I want to iterate through, initialize an array variable and appended each item inside an 'Apply to Each' to a group of "FactSet" JSON objects that I recompose back into the card later.

Here is a brief step-by-step with a very simple example:

1. Have items you want to iterate through to add into a custom adaptive card.

This is your list of items that will give you the dynamic content to work with

2. Initialize Array variable action

This will hold the items you iterate through later to compose into JSON that you add back into the custom adaptive card. leave blank.

3. Apply to each action - body/value from Step 1

Here you will iterate through your list of items

4. (Inside apply to each) Append to Array action - use variable from Step 2 

Inside the Apply to Each, we will append to this array variable the items as JSON content the adaptive card can render later. For this I used the adaptive cards "FactSet" object and replaced the values with dynamic content.

Just make sure that your value string content is encapsulated in double quotes.

Below is the 'append to array' action content with my dynamic content as the values

       {

            "type": "FactSet",

            "facts": [

                {

                    "title": "Fact 1",

                    "value": "Dynamic Content 1"

                },

                {

                    "title": "Fact 2",

                    "value": "Dynamic Content 2"

                }

            ]

        },

I added a comma in red there because this would repeat. If its your last item, you will need to remove that - this could potentially be done with a condition - otherwise it will mess up your JSON and error out on the flow.

As another option, I added a simple textblock later on in the adaptive card so that the text block was always the last item and I could repeat the fact set as much as I wanted without messing up the JSON.

example below (we will see this in context in later steps):

        {

            "type": "TextBlock",

            "text": "Random Text - Hello!",

            "wrap": true

        }

5. (Outside of Apply to Each) Compose action - Compose your Array variable
Your Compose content should just be the output of the variable. The Compose's output should look something like this (using my simple example in earlier steps):

       {

            "type": "FactSet",

            "facts": [

                {

                    "title": "Fact 1",

                    "value": "Dynamic Content 1"

                },

                {

                    "title": "Fact 2",

                    "value": "Dynamic Content 2"

                }

            ]

        },

       {

            "type": "FactSet",

            "facts": [

                {

                    "title": "Fact 1",

                    "value": "Dynamic Content 3"

                },

                {

                    "title": "Fact 2",

                    "value": "Dynamic Content 4"

                }

            ]

        },

6. (optional) Compose action - You can compose your cards JSON here before you add it to a "Post Adaptive card" action to troubleshoot or debug

Effectively this example is a simple "one-way" card sent to a user or channel. You can get more complex and collect responses with 'input' adaptive card objects but this was personally a bit harder to put together for me - see my other post here: Solved: Re: How to Select value from Object using value fr... - Power Platform Community (microsoft....

Otherwise, at this point you're composing the card in its entirety and will look like something like this (your composed array variable output from Step 5 will go where the red bolded content goes: 

{

    "type": "AdaptiveCard",

    "body": [

        {

            "type": "TextBlock",

            "size": "Medium",

            "weight": "Bolder",

            "text": "Sample"

        },

       [Output of Compose from Step 5 goes here]

        {

            "type": "TextBlock",

            "text": "Random Text - Hello!",

            "wrap": true

        }

    ],

    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",

    "version": "1.3"

}

I recommend at this point grabbing this current Compose actions output and copying it into Designer | Adaptive Cards payload editor to make sure it looks right.

Here is a quick image of the card as designed so far:

Code:

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "Sample"
        },
        {
            "type": "FactSet",
            "facts": [
                {
                    "title": "Fact 1",
                    "value": "Dynamic Content 1"
                },
                {
                    "title": "Fact 2",
                    "value": "Dynamic Content 2"
                }
            ]
        },
        {
            "type": "FactSet",
            "facts": [
                {
                    "title": "Fact 1",
                    "value": "Dynamic Content 3"
                },
                {
                    "title": "Fact 2",
                    "value": "Dynamic Content 4"
                }
            ]
        },
        {
            "type": "TextBlock",
            "text": "Random Text - Hello!",
            "wrap": true
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.3"
}

7. Post Adaptive Card action - whatever type you need (channel, chat, etc.)

Now your JSON is ready and you can simply take the output from Step 6 and place it in the adaptive card field.


I hope this is helpful enough to get you started - this was something simple I put together last year and is working out now with inputs, edits, etc. and helped me on my path to create more customized adaptive cards. highly recommend hanging out on the Schema Explorer | Adaptive Cards to understand what you can add, what version Teams supports, how to add cards into Outlook, etc. It's pretty cool!