adaptive-cards - 在 Adaptive Cards 中，如何使用数据绑定到模板来创建表？

Question

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

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

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

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

    }
]

这里是模板，它只是一个简单的表，注意 {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"
}

如何绑定它来创建表？

标签： adaptive-cards

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

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