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

Question

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

Answer 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.