'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"
]
}

Card



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:

enter image description here

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