Define tab order in Adaptive Cards for Microsoft BotFramework - botframework

Question

tl;dr: How can we define the tab order of Adaptive Cards Input Elements?
Hi there,
we are using Adaptive Cards in a web chat project along with MS Bot Framework V4. We have e.g. one card, where you enter your address. We have two columns to show the input fields side-by-side in a 2x2 fashion:
Street | Number
Zip | City
That's how our customers would normally read it - from left to rights and the things in a row belong together. But as we are using columns, the tab order of the adaptive card is "wrong": it tabs through the column and then goes to the right column and tabs through there from top to bottom.
Is there a way to define the tab order or does anyone have an idea, how to keep the "layout" of the adaptive card but end up with the correct tab order?
Best regards

Answer 1

The solution was much easier, than I thought: I had to separate each row of the column set into several column sets, each being in its own container. Then the tab order is correct from left to right and then from top to bottom.
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "TextBlock",
"text": "**Address**",
"size": "Large",
"height": "stretch"
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "street*",
"spacing": "Large",
"height": "stretch",
"weight": "Bolder"
},
{
"type": "Input.Text",
"placeholder": "Street",
"id": "street",
"value": "{street}"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Number*",
"spacing": "Large",
"weight": "Bolder"
},
{
"type": "Input.Text",
"placeholder": "Number",
"id": "number",
"value": "{number}"
}
]
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Zip*",
"spacing": "Medium",
"weight": "Bolder"
},
{
"type": "Input.Text",
"placeholder": "Zip",
"id": "zip",
"value": "{zip}"
}
],
"spacing": "None",
"height": "stretch",
"horizontalAlignment": "Center"
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "City*",
"spacing": "Medium",
"weight": "Bolder"
},
{
"type": "Input.Text",
"placeholder": "City",
"id": "city",
"value": "{city}"
}
],
"horizontalAlignment": "Center",
"height": "stretch"
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Send"
}
]
}