How to create 3 option buttons in adaptive/hero card in bot farmework without post back - azure

Question

I have run into a use case where I need to design a card with 3 option buttons which are clickable but do not Postbank directly. Only when user clicks on submit button, the selected option button values are posted back.
how to achieve it in azure bot framework using rich cards?

Answer 1

This is possible and please find the code below, you can always pass data property inside your Submit button. In my case it is for the msteams channel, and it is available for different channel too. The data property contains another key called Value, which contains object of different key value pairs that you can pass. This will pass the data to the channel and you can always set a display text for the message or you can leave blank.
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "Container",
"$data": "${$root}",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": "You can click here to search KB article for this topic on ServiceNow",
"wrap": true
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "278px",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Search KB articles",
"data": {
"msteams": {
"type": "messageBack",
"displayText": "",
"text": "search-kb-article",
"value": {
"id": "search-kb-article",
"action": "searchKBArticleAction",
"keyword": "${$data.LastMessage}"
}
}
}
}
]
}
]
},
{
"type": "Column",
"width": "30px",
"items": [
{
"type": "Image",
"url": "https://ipnq4wdas01.azurewebsites.net/Images/home.png",
"selectAction": {
"type": "Action.Submit",
"data": {
"msteams": {
"type": "messageBack",
"displayText": "",
"text": "Home",
"value": {
"id": "Home",
"action": "menuAction",
"value": "Home"
}
}
}
}
}
]
}
]
}
],
"style": "emphasis",
"bleed": true
}
]
}