Repeating elements with Adaptive Cards Templating - adaptive-cards

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.

Answer 1

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.