Dynamic Data Binding on Teams Adaptive Card tables

[kaangoksal]

Hi, I have a very basic card, and I couldn't get it working, also couldn't find good examples for it as well. I decided to ask it here.

I have this card template, very simple:
this is the data:

{
    "data": [
        {
            "key": "Board",
            "value": "Adaptive Cards"
        },
        {
            "key": "List",
            "value": "Backlog"
        },
        {
            "key": "Assigned to",
            "value": "Matt Hidinger"
        },
        {
            "key": "Due date",
            "value": "Not set"
        }
    ]
}

This is the card

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5",
    "body": [
        {
            "type": "Table",
            "columns": [
                {
                    "width": 1
                },
                {
                    "width": 1
                }
            ],
            "rows": [
                {
                    "$data": "${data}",
                    "type": "TableRow",
                    "cells": [
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "${key}",
                                    "wrap": true
                                }
                            ]
                        },
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "${value}",
                                    "wrap": true
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "$data": [
                        {
                            "name": "Matt"
                        },
                        {
                            "name": "David"
                        },
                        {
                            "name": "Thomas"
                        }
                    ],
                    "text": "${name}"
                }
            ]
        }
    ]
}

I'm using this to simulate my card:

https://adaptivecards.io/designer/

the card doesn't loop the data elements... 😞

Does anyone know why?

[#2]

@kaangoksal - 

The $data property is used to bind data to the elements of the card, and it should be placed in the body of the card, not in the rows of the Table.

Here's the corrected version of your card:

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5",
    "body": [
        {
            "type": "Table",
            "columns": [
                {
                    "width": 1
                },
                {
                    "width": 1
                }
            ],
            "items": [
                {
                    "$data": "${data}",
                    "type": "TableRow",
                    "cells": [
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "${key}",
                                    "wrap": true
                                }
                            ]
                        },
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "${value}",
                                    "wrap": true
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "$data": [
                        {
                            "name": "Matt"
                        },
                        {
                            "name": "David"
                        },
                        {
                            "name": "Thomas"
                        }
                    ],
                    "text": "${name}"
                }
            ]
        }
    ]
}

In this corrected version, the $data property is moved to the items array of the Table type. This allows the TableRow to loop over each item in the data array and create a new row for each item.

Thanks, 

Prasad Das

------------------------------------------------------------------------------------------ 

If the response is helpful, please click "**Mark as Best Response**" and like it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate. 

[#3]

@Prasad_Das-MSFT 

I pasted your suggestions, it doesn't work.

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5",
    "body": [
        {
            "type": "Table",
            "columns": [
                {
                    "width": 1
                },
                {
                    "width": 1
                }
            ],
            "items": [
                {
                    "$data": "${data}",
                    "type": "TableRow",
                    "cells": [
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "${key}",
                                    "wrap": true
                                }
                            ]
                        },
                        {
                            "type": "TableCell",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "${value}",
                                    "wrap": true
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "$data": [
                        {
                            "name": "Matt"
                        },
                        {
                            "name": "David"
                        },
                        {
                            "name": "Thomas"
                        }
                    ],
                    "text": "${name}"
                }
            ]
        }
    ]
}

this one is from your reply ^

this is the data v

{
    "data": [
        {
            "key": "Board",
            "value": "Adaptive Cards"
        },
        {
            "key": "List",
            "value": "Backlog"
        },
        {
            "key": "Assigned to",
            "value": "Matt Hidinger"
        },
        {
            "key": "Due date",
            "value": "Not set"
        }
    ]
}

used this link

https://adaptivecards.io/designer/

I'm also looking at other examples from the community and they also don't render

https://techcommunity.microsoft.com/t5/teams-developer/adaptive-card-dynamic-table-row-with-input/m-...

[#4]

Spent some more time on this apparently I was not pressing the preview mode button, if you press that it renders it. My initial json was right, also the community one.