How to map JSON Array with Adaptive Card Row - Using Designer to Create Template

问题

I am trying to create a template for the adaptive card. My adaptive card is similar to the expense report adaptive card in many ways. https://adaptivecards.io/samples/ExpenseReport.html

It is basically a timesheet submission card for the manager to approve the timesheet. It should look something like this.

Preview of the draft Adaptive Card (with a static number of rows)

The challenge I am facing is fixing a number of rows, samples provided has a fixed number of rows. In real cases, the number of rows will be dynamic. One timesheet will have 4 rows and others will have 2 rows. So template with a fixed number of rows is not going to work in my case.

What I would like to do is use the templating feature and create one row in the adaptive card template and bind it with an array of rows in JSON. Based on the size of the Array, rows will be replicated in the adaptive card. The following is a sample template.

Adaptive Card template

Databinding screenshot

JSON: Number of array items will be dynamic, and the expectation is to have a template consider this and expand.

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

Templating Guide: https://docs.microsoft.com/en-us/adaptive-cards/templating/language

回答1:

I figured it out, for array we need to create binding using {$root.arrayname}. I was missing that part.

Basically $root is your entire JSON. Now, wherever the array is JSON we need to address it accordingly.

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

Case 1: Retrieve Title using

text property = {title}
Data Context = blank

Case 2: Retrieve Creator Name

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

Case 3: Map Rows to the teRows Array.

Option 1: Add binding at container level - ColumnSet level

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

Add individual columns text property

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

Option 2: Add data binding and text property at column level and not at column set level

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}

The output of the Card with dynamic array binding.

来源：https://stackoverflow.com/questions/61230518/how-to-map-json-array-with-adaptive-card-row-using-designer-to-create-template

标签

adaptive-cards