如何使用自适应卡行映射JSON数组-使用设计器创建模板

Question

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

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

自适应卡草稿预览（行数固定）

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

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

自适应卡模板

数据绑定屏幕截图

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://docs.microsoft.com/en-us/adaptive-cards/templating/language

Answer 1

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

基本上$ 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

案例2：检索创建者名称

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

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

选项1：在容器级别-列集级别添加绑定

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

添加单个列的文本属性

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

选项2：在列级别而不是列集级别添加数据绑定和文本属性

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}

具有动态数组绑定的Card的输出。