Forum Discussion
Solved
Table in adaptive cards
This is my data for table where the buckets in billingproviderskick will be having many no of objects so , i want to implement this in a table , then i have tried in this as provided in the below code
{
"type": "AdaptiveCard",
"body": [
{
"type": "Table",
"columns": [
{
"width": 1
},
{
"width": 1
}
],
"$data": "${billingProvidersKick.buckets}",
"rows": [
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "${val}",
"spacing": "Small"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"url": "https://cdn-icons-png.flaticon.com/512/49/49172.png",
"size": "Small"
}
],
"width": "20px"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "$${formatNumber(totalBilledAmount, 10)}",
"wrap": true
}
],
"width": "stretch"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAulBMVEX//////v+TlZv///w9R1g/Rlo4P1UzPE+vsbgyOk7v8vQ+RVa0tbv6/f1BSFgtN0lscH0pL0XCw8YwNk3Nz9F6f4cyPEjc3d/39/dfZXHu7vM5P1ErMkZKUGDi4+fS0tdOWGZIT2FSVmducn8oMUJHTFfw9fSjpquYnqIsNEA7O1Clpa0ZIj0aJj4yOlSrsbUnKEFgYXJNSV1WXW+KiJEjLjvi5+ZARl99gI9zeH5rcXlSVl5dXmY+RU6/tsNIAAAGdElEQVR4nO2ci3qiOABGk4ZAAQGtbUXBC63aut25dDvTmensvv9rbRLAS0Vtt0HS7n++T6UJNhxyISRBQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADQIIzVngCtOYVDjE/qJa77FB4ijuzErg+n4zUsSDyH+65TF74VeaShUlom67k8PK0NHjZnyFjexniuH9aXSuhHDZbSvAWQeVjLSaaMsqBBw/HJiBR5WJOhrAgNGtJFd/aRDRmZd/jlc0Omrv4sf3vbBqGUGWioNwkTDb1YH3NioOGNzuv+4pY0Y9i7He00nFka4QuRSgOGsesOCdtheOok+ri8IY3koef4fkB21cNAYz0MGqqHc9cK6a481EtDbenc2Wf4Ea6HwtCn5Ch5KIFhDcBQM6YZUp2erLm2dJehPKBAH9REw1NXY5/mjzs1TmqW4czm3OLF640bnEcGGt792dHHpxPjDAVUa7+UmFYP6wCGNQBDzcCwBmCoGRjWwG5DykjLjRzH3eKzs3gqzgBrdbfjq7n8YlqfRoTOfF90Kf1niKAwHRff97eid8EXxhkyMuR+t5NuMfX50vDk03Z8NV+/GWdIhGHUG2zj9XlUGLKgIn4HJo61DXn6WPWlp6UhYWuf+9eQ0KZGhPcZZn61YXtVSkvEXchLmt/3ayhvjuL4cHLv1lDc/nleHBxWNMbQeq0h9QIh+X4MHYu/yJCVK3/yu/i5vI/fM2/RzPxhhWE8eqlhvshIELPccV9rquIMMRyIDsjSsKqFbNu5oRwCLeNFU3qgkMqBGgMM6XPDqi/1eWlIzu77Q8lDX3xOhnuYtcwopbKsDUIrjOX1bRiGjypjZCgpNoI4uM4NReNC/8omgqFlTTLLssQfVihfYShCJuH6PL4fmWCYz2p7oT+T60yC/jDqSbXlcGBR29oP03Hxxzeeum6UpW6Ydbucd92Mu0mWRmmSuS7Pumm35PsFMaCU5oaD0H8QhjSYZOEji5eT+YVgzK79UBnK0zDqSUbqlW/3VtviY8mjEfUwUDkmSunEiykNhlfDUSEm32jxItd8mOchka2oWrQp2lMZIEu52Cza1o0ugBFzT4tNw3gyVPUwLkpqkJt65DosDYXwnLG5Mgri/DN/zeflOHcBFS2vEfVQHPggsa5UHmZXXF4tyjwsDOPckHqrKlrk2OZunhLc7JA3bjhXhzpyw9zwKstG8aoebhjGRfuaR9EKQ7WD523oNG6YH9jAtR6kIbkfdnqyt6ka2DXDdjY8Ly8gq0aojFbVtQz3Ym+jqDZuqOqT1/WvPCoMs4yP4lVZlBdAWfNI+yoZx+UNYa5KiyhSnIQ8XNxSbXbHDTCUYZ7r+2oUI+PTR9llLhFh8l30SxdFv1SFkVX85gZZD1Or5I0xLMZphOGg6kttOzrPt14zrGrC1WJ7JMq/v+9vw38s7w/PK6J3cGbgWFvGObd5FUvDWVIZX4GdEvPy8GenG1UgAtPyIC86VXtUMf1lQs/7+bxFbxerY9y5yxZyb9MMWfmc0Cbroa+cwTHNUMG2IBuDv9vx1ZhrSLfY+Afb0TvI9zbRUCswrAEYagaGNbDHkJJxWyPX56b1SwW/ba5tAS1PLg00vPja1Uf6ZJyhOJpzncSm3R/q5+MbEhjWAgw186ENDZrHX38aQSMGzeN/wFK6/aRzsZ6md6GTcTOl1ItEHqpFL97aehoeqtmG307y0tWjh7ET9VxxA0+r88KQdtxZPnTmRUUp/dV58Qrgw3T6eR76/Li/MRRfclfNTTD1+zSKUcp/55FnOonVGiov8hevHoR8A4xMfHe8TDAf8ju17Yt6EhMJnbn86riGJ0nyk6j1rfIMq1uKv+3uqf6k1BJhSn5x++SohqyX8rS3ttKXkbOIp/Ng79f+W1KsSO5R7wPGh5Il7YTPVMtJ86MYJVbyra70vImVPJHj5iF5XFjJJG/dlGDI+T/zmpIb9C1rWrlUrlbOpjy5/JIXS+/W5X7Sqyeh+DRJrO9nB1a864eR1pRbTnJx17q77iac29etOri5SFz+Y/rl6IKy1p/PHCFmO04iVxWGvuNWPQz0Rmzb991wfHxB9RxEcBOm3c81/t6l4LM7nd0Ex2xGV6i5vV7rtt4fLb1t9fRfgl5q+HxOsC4ayT8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgf8u/88FIIxAXSwIAAAAASUVORK5CYII=",
"size": "Small"
}
],
"width": "20px"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "${formatNumber(distinctClaimCount, 0)}",
"wrap": true
}
],
"width": "stretch"
}
]
},
{
"type": "TextBlock",
"text": "$${formatNumber(totalPaidAmount, 2)}",
"spacing": "Small",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"url": "https://media.istockphoto.com/id/613529262/vector/glass-sphere-with-blood.jpg?s=612x612&w=0&k=20&c=JLKQlDcKkiByAr7GEaIqKUutYnfMIat60BJ4WOdVWrY=",
"altText": "${status}",
"height": "20px"
}
],
"width": "auto"
},
{
"type": "Column",
"spacing": "small",
"selectAction": {
"type": "Action.ToggleVisibility",
"title": "expand",
"targetElements": [
"cardContent${$index}",
"chevronDown${$index}",
"chevronUp${$index}"
]
},
"verticalContentAlignment": "center",
"items": [
{
"type": "Image",
"id": "chevronDown${$index}",
"url": "https://adaptivecards.io/content/down.png",
"width": "20px"
},
{
"type": "Image",
"id": "chevronUp${$index}",
"url": "https://adaptivecards.io/content/up.png",
"width": "20px",
"isVisible": false
}
],
"width": "auto"
}
]
},
{
"type": "Container",
"id": "cardContent${$index}",
"isVisible": false,
"items": [
{
"type": "Container",
"items": [
{
"$data": "${a_claims.buckets}",
"type": "TextBlock",
"text": "* ${val}",
"isSubtle": false,
"wrap": true
}
]
}
]
}
]
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.5"
}{
"billingProvidersKick": {
"buckets": [
{
"val": "normal school",
"count": 20,
"totalBilledAmount": 87687.765768,
"distinctClaimCount": 2,
"totalPaidAmount": 9058.71,
"a_claims": {
"buckets": [
{
"val": "1234567",
"count": 29
},
{
"val": "2345678",
"count": 20
}
]
}
}
]
}
}
here , for each object in bucket the table has been repeated but i wan to repeat the row .
if i add any row as header then this header is attached to every single row
so please guide me as i want to loop row no the table
To repeat the rows instead, you should set the "$data" property at the TableRow level.
{ "type": "AdaptiveCard", "body": [ { "type": "Table", "columns": [ { "width": 1 }, { "width": 1 } ], "rows": [ { "$data": "${billingProvidersKick.buckets}", "type": "TableRow", "cells": [ { "type": "TableCell", "items": [ { "type": "TextBlock", "text": "${val}", "spacing": "Small" }, // ... rest of your code ] }, // ... rest of your code ] } ] } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.5" }In this JSON, the "$data" property is set at the TableRow level, which means that for each object in the "buckets" array, a new row will be created in the table.
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.
1 Reply
Prasad_Das-MSFTMicrosoft
To repeat the rows instead, you should set the "$data" property at the TableRow level.
{ "type": "AdaptiveCard", "body": [ { "type": "Table", "columns": [ { "width": 1 }, { "width": 1 } ], "rows": [ { "$data": "${billingProvidersKick.buckets}", "type": "TableRow", "cells": [ { "type": "TableCell", "items": [ { "type": "TextBlock", "text": "${val}", "spacing": "Small" }, // ... rest of your code ] }, // ... rest of your code ] } ] } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.5" }In this JSON, the "$data" property is set at the TableRow level, which means that for each object in the "buckets" array, a new row will be created in the table.
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.