'Bind an Array with dynamic length to an Adaptive Card
I was wondering how I could bind an array which can have a dynamic length to an element in Microsofts Adaptive Cards. Specifically, I want to make a list with instructions and display those in "kind-of-a-list" with a dynamic layout. In a perfect world, ths list would be filled dynamically and adjust its length to the length of the array. Any ideas/workarounds?
Card Payload:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "TextBlock",
"text": "${title}",
"size": "Medium",
"weight": "Bolder",
"wrap": true,
"separator": true
},
{
"type": "FactSet",
"facts": [
{
"title": "1.",
"value": "${instructions[1]}"
},
{
"title": "2.",
"value": "${instructions[2]}"
},
{
"title": "3.",
"value": "${instructions[3]}"
},
{
"title": "4.",
"value": "${instructions[4]}"
},
{
"title": "5.",
"value": "${instructions[5]}"
}
],
"isVisible": false,
"$data": "${$root['instructions[0]']}",
"separator": true
}
]
}
Card Data:
{
"title": "Instructions:",
"instructions" : [
"blablablba",
"qwerertzasdfadfds fasdf ",
"asdfkjhasf 3 asdflkjw",
"Lorem ipsum dolor mi",
"hello world",
"last instruction"
]
}
Solution 1:[1]
the best way to do this is if you change your JSON a litle bit:
{
"title": "Instructions:",
"instructions": [{
"id": "1",
"text": "blablablabla"
},
{
"id": "2",
"text": "qwerertzasdfadfds fasdf "
},
{
"id": "2",
"text": "asdfkjhasf 3 asdflkjw"
},
{
"id": "3",
"text": "Lorem ipsum dolor mi"
},
{
"id": "4",
"text": "hello world"
},
{
"id": "5",
"text": "last instruction"
}
]
}
This way you can build the card like this:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.3",
"body": [
{
"type": "TextBlock",
"text": "${title}",
"size": "Medium",
"weight": "Bolder",
"wrap": true,
"separator": true
},
{
"type": "FactSet",
"facts": [
{
"$data": "${instructions}",
"title": "${id}.",
"value": "${text}"
}
],
"separator": true
}
]
}
Which would look like this:
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Tim Cadenbach |