Forum Discussion
MicrosoftDynamic Data Binding on Teams Adaptive Card tables
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?
Prasad_Das-MSFTThe
$dataproperty is used to bind data to the elements of the card, and it should be placed in thebodyof the card, not in therowsof theTable.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
$dataproperty is moved to theitemsarray of theTabletype. This allows theTableRowto loop over each item in thedataarray 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.
kaangoksalI 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-p/3987986- kaangoksalSpent 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.
