Repeating elements with Adaptive Cards Templating

Question

I am creating an adaptive card that requires that I repeat some elements in an array using the Designer. I am trying to create a list of items for an invoice so I need to repeat items in the cart....

I have a template with this container with the element that need to be repeated:

   {
            "type": "Container",
            "items": [
                {
                    "type": "Container",
                    "items": [
                        { 
                            "$data": "${items}",
                            "type": "ColumnSet",
                            "columns": [
                                {
                                    "type": "Column",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "wrap": true,
                                            "text": "${quantity}"
                                        }
                                    ],
                                    "width": "auto"
                                },
                                {
                                    "type": "Column",
                                    "spacing": "Medium",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "wrap": true,
                                            "text": "${product.name}"
                                        }
                                    ],
                                    "width": "stretch"
                                },
                                {
                                    "type": "Column",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "${cost}",
                                            "wrap": true
                                        }
                                    ],
                                    "width": "auto"
                                },
                                {
                                    "type": "Column",
                                    "id": "chevronDown1",
                                    "spacing": "Small",
                                    "verticalContentAlignment": "Center",
                                    "items": [
                                        {
                                            "type": "Image",
                                            "selectAction": {
                                                "type": "Action.ToggleVisibility",
                                                "title": "collapse",
                                                "targetElements": [
                                                    "cardContent1",
                                                    "chevronUp1",
                                                    "chevronDown1"
                                                ]
                                            },
                                            "url": "https://adaptivecards.io/content/down.png",
                                            "width": "20px",
                                            "altText": "collapsed"
                                        }
                                    ],
                                    "width": "auto"
                                },
                                {
                                    "type": "Column",
                                    "id": "chevronUp1",
                                    "isVisible": false,
                                    "spacing": "Small",
                                    "verticalContentAlignment": "Center",
                                    "items": [
                                        {
                                            "type": "Image",
                                            "selectAction": {
                                                "type": "Action.ToggleVisibility",
                                                "title": "expand",
                                                "targetElements": [
                                                    "cardContent1",
                                                    "chevronUp1",
                                                    "chevronDown1"
                                                ]
                                            },
                                            "url": "https://adaptivecards.io/content/up.png",
                                            "width": "20px",
                                            "altText": "expanded"
                                        }
                                    ],
                                    "width": "auto"
                                }
                            ]
                        },
                        {
                            "type": "Container",
                            "id": "cardContent1",
                            "isVisible": false,
                            "items": [
                                {
                                    "type": "Container",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "isSubtle": true,
                                            "wrap": true,
                                            "text": "${product.description}"
                                        }
                                    ]
                                }
                            ]
                        }
                    ],
                }
            ],
        }

and sample data that looks something like this:

{
    "items": [
        { 
            "quantity": "1", 
            "unitCost": "55", 
            "cost": "55", 
            "product": {
                "name": "Product 1", 
                "description": "Lorem ipsum dolor sit amet"
            }
        }, { 
            "quantity": "2", 
            "unitCost": "55", 
            "cost": "55", 
            "product": {
                "name": "Product 2", 
                "description": "Lorem ipsum dolor sit amet"
            }
        }
    ]
}

I followed the example here but I cannot get the same effect... I am presuming it is cause I have nested elements.

Tim Cadenbach Tim Cadenbach · Accepted Answer · 2020-07-14T21:20:02

to do what you want to achieve you need to use dynamically generated targetElements and ID's.

I used your template and fixed it to have a working example here: https://www.madewithcards.io/cards/toggleable-description-in-array

Here's the code for reference:

{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"body": [{
        "type": "TextBlock",
        "text": "Items:",
        "size": "Medium",
        "weight": "Bolder"
    },
    {
        "type": "Container",
        "$data": "${items}",
        "items": [{
                "type": "ColumnSet",
                "columns": [{
                        "type": "Column",
                        "items": [{
                            "type": "TextBlock",
                            "wrap": true,
                            "text": "${quantity}"
                        }],
                        "width": "auto"
                    },
                    {
                        "type": "Column",
                        "spacing": "Medium",
                        "items": [{
                            "type": "TextBlock",
                            "wrap": true,
                            "text": "${product.name}"
                        }],
                        "width": "stretch"
                    },
                    {
                        "type": "Column",
                        "items": [{
                            "type": "TextBlock",
                            "text": "${cost}",
                            "wrap": true
                        }],
                        "width": "auto"
                    },
                    {
                        "type": "Column",
                        "id": "chevronDown${product.name}",
                        "spacing": "Small",
                        "verticalContentAlignment": "Center",
                        "items": [{
                            "type": "Image",
                            "selectAction": {
                                "type": "Action.ToggleVisibility",
                                "title": "collapse",
                                "targetElements": [
                                    "${product.name}",
                                    "chevronUp${product.name}",
                                    "chevronDown${product.name}"
                                ]
                            },
                            "url": "https://adaptivecards.io/content/down.png",
                            "width": "20px",
                            "altText": "collapsed"
                        }],
                        "width": "auto"
                    },
                    {
                        "type": "Column",
                        "id": "chevronUp${product.name}",
                        "isVisible": false,
                        "spacing": "Small",
                        "verticalContentAlignment": "Center",
                        "items": [{
                            "type": "Image",
                            "selectAction": {
                                "type": "Action.ToggleVisibility",
                                "title": "expand",
                                "targetElements": [
                                    "${product.name}",
                                    "chevronUp${product.name}",
                                    "chevronDown${product.name}"
                                ]
                            },
                            "url": "https://adaptivecards.io/content/up.png",
                            "width": "20px",
                            "altText": "expanded"
                        }],
                        "width": "auto"
                    }
                ]
            },
            {
                "type": "Container",
                "id": "${product.name}",
                "isVisible": false,
                "items": [{
                    "type": "Container",
                    "items": [{
                        "type": "TextBlock",
                        "isSubtle": true,
                        "wrap": true,
                        "text": "${product.description}"
                    }]
                }]
            }
        ]
    }
]

}

The data is untouched and taken from your sample.

Repeating elements with Adaptive Cards Templating

1 Answers