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

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: