adaptive-cards - 如何使用自适应卡片行映射 JSON 数组 - 使用 Designer 创建模板

Question

我正在尝试为自适应卡片创建模板。我的自适应卡在很多方面都类似于费用报告自适应卡。 https://adaptivecards.io/samples/ExpenseReport.html

它基本上是供经理批准时间表的时间表提交卡。它应该看起来像这样。

自适应卡片草稿预览(具有静态行数)

我面临的挑战是固定行数，提供的示例具有固定的行数。在实际情况下，行数将是动态的。一个时间表将有 4 行，而其他时间表将有 2 行。因此，具有固定行数的模板不适用于我的情况。

我想做的是使用模板功能并在自适应卡片模板中创建一行并将其与 JSON 中的行数组绑定(bind)。根据数组的大小，行将被复制到自适应卡中。以下是示例模板。

自适应卡片模板

数据绑定(bind)截图

JSON:数组项的数量将是动态的，期望模板考虑这一点并进行扩展。

"teRows": [{
                    "date": "Date1",
                    "task": "task1",
                    "hours": "10"
                }, {
                    "date": "Date2",
                    "task": "task2",
                    "hours": "20"
                }, {
                    "date": "Date3",
                    "task": "task3",
                    "hours": "30"
                }, {
                    "date": "Date4",
                    "task": "task4",
                    "hours": "10"
                }
                ]

模板指南:https://learn.microsoft.com/en-us/adaptive-cards/templating/language

Answer 1

我想通了，对于数组，我们需要使用 {$root.arrayname} 创建绑定(bind)。我错过了那部分。

基本上 $root 就是你的整个 JSON。现在，只要数组是 JSON我们需要相应地解决它。

示例 JSON:

{
    "title": "username (timePeriod)",
    "header":[
    {
        "field":"Submitted On",
        "value":"Date"
    },
    {
        "field":"Total Hours",
        "value":"40"
    }
    ],
    "submittedOn": "dateField",
    "totalHours": "totalHours",
    "description": "data editor",
    "creator": {
        "name": "NxP"
    },
     "teRows":[ {
            "date": "Date1",
            "task": "task1",
            "hours": "10"
        },{
            "date": "Date2",
            "task": "task2",
            "hours": "20"
        },{
            "date": "Date3",
            "task": "task3",
            "hours": "30"
        }
    ]
}

案例 1:使用 检索标题

text property = {title}
Data Context = blank

案例二:获取创作者姓名

text property = {creator.name}
Data Context = blank

案例 3:将行映射到 teRows 数组。

选项 1:在容器级别添加绑定(bind) - ColumnSet 级别

columnset text property = blank
columnset Data Context = {$root.teRows}

添加单独的列文本属性

Date text property = {date}
Task text property = {task}
Hours text property = {hours}

选项 2:在列级别而非列集级别添加数据绑定(bind)和文本属性

Date text property = {date}
Date Data Context = {$root.teRows}
Task text property = {task}
Task Data Context = {$root.teRows}
Hours text property = {hours}
Hours Data Context = {$root.teRows}

带有动态数组绑定(bind)的 Card 的输出。