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

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

Is [this](https://github.com/microsoft/AdaptiveCards/issues/2448#issuecomment-613627799) your GitHub account? If so, you say you already got this working. What do you still need help with? — Kyle Delaney, Apr 15 '20 at 17:51
@KyleDelaney, This is me documenting it for future use, also sharing my experience with other developers who may benefit from this. :) Hope this doesn't violate any policy you might have in place :) — np4coding, Apr 15 '20 at 21:35
This has nothing to do with me or my policies. If you ask a question on Stack Overflow that you already know the answer to without saying you already know the answer and you plan to answer the question yourself, then you're not really using Stack Overflow the way it's meant to be used. If you want to share your knowledge then you should search for other people's questions to answer or you should write a blog post. — Kyle Delaney, Apr 16 '20 at 00:08
Sorry @KyleDelaney I disagree with your comment. I am sure StackOverflow will also disagree with your comment, Check this out https://stackoverflow.blog/2011/07/01/its-ok-to-ask-and-answer-your-own-questions/ — np4coding, Apr 16 '20 at 16:42
@KyleDelaney, if you create a new question you will see on the bottom of the question option to answer your own question. If you are moderator for this tag feel free to remove the tag, but I am sure what I am doing is not wrong. Sorry again — np4coding, Apr 16 '20 at 16:44

score 4 · Answer 1 · answered Apr 15 '20 at 19:40

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.

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

1 Answers1

Linked