In Adaptive Cards, how to create table using data binding to template? - adaptive-cards

Question

The documentation on using template say that we can bind array data to iterate over a template, I am trying to use it to create a table, but I am not sure how to set this up.
Here is my data, it have 2 rows of data:
[
{
"ID": "1",
"Name": "bot1.atmx",
"Description": "Bot 1 Description"
},
{
"ID": "2",
"Name": "bot2.atmx",
"Description": "Bot 2 Description"
}
]
Here is template, which is just a simple table, notice the {id}, {name}, and {description} data binding language.
{
"type": "AdaptiveCard",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "Medium",
"text": "ID"
}
],
"width": "30px"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Left",
"size": "Medium",
"text": "Name"
}
],
"width": "100px"
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Description",
"horizontalAlignment": "Left",
"size": "Medium"
}
]
}
]
},
{
"type": "ColumnSet",
"spacing": "None",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "{ID}",
"wrap": true
}
],
"width": "30px"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Left",
"text": "{Name}",
"wrap": true
}
],
"width": "100px"
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "{Description}"
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
How can I bind this to create table?

Answer 1

You're not that far off.
Notice that the binding syntax changed in May 2020 from {name} to ${name} https://learn.microsoft.com/en-us/adaptive-cards/templating/
To make it work, give youre data a name, i.e:
{
"properties" :
[
{
"ID": "1",
"Name": "bot1.atmx",
"Description": "Bot 1 Description"
},
{
"ID": "2",
"Name": "bot2.atmx",
"Description": "Bot 2 Description"
}
]
}
and add a simple "$data": "${properties}", into you column-items like this:
...
"columns": [
{
"type": "Column",
"items": [
{
"$data": "${properties}",
"type": "TextBlock",
"size": "Medium",
"text": "${ID}"
}
],
"width": "30px"
},
{
...
But be aware, you're not creating a nice looking table, you don't have connected rows to aline the cells.
All you do is: draw 3 seperated columns next to each other. Adding more lines it will make it look like this: