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

【问题标题】：How to map JSON Array with Adaptive Card Row - Using Designer to Create Template如何使用自适应卡片行映射 JSON 数组 - 使用 Designer 创建模板
【发布时间】：2020-07-28 12:40:50
【问题描述】：

我正在尝试为自适应卡片创建模板。我的自适应卡在很多方面类似于费用报告自适应卡。 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

【问题讨论】：

this 是您的 GitHub 帐户吗？如果是这样，你说你已经得到了这个工作。你还需要什么帮助？
@KyleDelaney，这是我记录它以备将来使用，也与其他可能从中受益的开发人员分享我的经验。 :) 希望这不会违反您可能制定的任何政策 :)
这与我或我的政策无关。如果您在 Stack Overflow 上问一个您已经知道答案的问题，但没有说您已经知道答案，并且您打算自己回答这个问题，那么您并没有真正按照预期的方式使用 Stack Overflow。如果你想分享你的知识，那么你应该搜索其他人的问题来回答，或者你应该写一篇博文。
对不起@KyleDelaney 我不同意你的评论。我相信 StackOverflow 也会不同意您的评论，请查看 stackoverflow.blog/2011/07/01/…
@KyleDelaney，如果您创建一个新问题，您将在问题选项底部看到回答您自己的问题。如果您是此标签的版主，请随意删除标签，但我确信我所做的并没有错。再次抱歉

标签： adaptive-cards

【解决方案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：将 Rows 映射到 teRows 数组。

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

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 的输出。

【讨论】：