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

如何绑定到表？

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个单独的列彼此相邻绘制。添加更多行将使其如下所示：

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

1 个答案: