在自适应卡片中，如何使用数据绑定到模板来创建 table？

Question

关于使用模板的文档说我们可以绑定数组数据来迭代模板，我正在尝试使用它来创建一个 table，但我不确定如何设置它。

这是我的数据，它有 2 行数据：

[
    {
        "ID": "1",
        "Name": "bot1.atmx",
        "Description": "Bot 1 Description"

    },
    {
        "ID": "2",
        "Name": "bot2.atmx",
        "Description": "Bot 2 Description"

    }
]

这是一个简单的模板table，请注意{id}、{name} 和{description} 数据绑定语言。

{
    "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"
}

如何绑定它来创建 table？

Answer 1

你离得并不远。请注意，绑定语法在 2020 年 5 月从 {name} 更改为 ${name} https://docs.microsoft.com/en-us/adaptive-cards/templating/

要使其正常工作，请为您的数据命名，即：

{
    "properties" :
    [
        {
            "ID": "1",
            "Name": "bot1.atmx",
            "Description": "Bot 1 Description"
        },
        {
            "ID": "2",
            "Name": "bot2.atmx",
            "Description": "Bot 2 Description"
        }
    ]
}

并在您的列项中添加一个简单的 "$data": "${properties}",，如下所示：

                    ...
                    "columns": [
                    {
                        "type": "Column",
                        "items": [
                            {
                                "$data": "${properties}",
                                "type": "TextBlock",
                                "size": "Medium",
                                "text": "${ID}"
                            }
                        ],
                        "width": "30px"
                    },
                    {
                    ...

但请注意，您没有创建漂亮的外观 table，您没有连接的行来排列单元格。您要做的就是：绘制 3 个彼此相邻的独立列。添加更多行将使它看起来像这样：

在自适应卡片中，如何使用数据绑定到模板来创建 table？

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

adaptive-cards