c#botframeworkadaptive-cards
In bot framework v4, how to implemente rating card with comment box and submit button
I have made a bot framework V4 using C#. I have made star rating in adaptive card but I need to add comment box and submit button in it,but my submit button is not working.In debugging mode its not hitting the any method of bot.Kindly help me. I am also attaching the code of my rating card having comment box and submit button in it.
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"color": "Accent",
"text": "Rate your experience!"
},
{
"type": "TextBlock",
"separator": true,
"text": "Please rate your experience! Your feedback is very appreciated and will help improve your
experience in the future. ",
"wrap": true
},
{
"type": "ColumnSet",
"spacing": "Medium",
"columns": [
{
"type": "Column",
"selectAction": {
"type": "Action.Submit",
"data": "awful"
},
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg"
},
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Awful"
}
],
"width": "stretch"
},
{
"type": "Column",
"selectAction": {
"type": "Action.Submit",
"data": "bad"
},
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg"
},
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Bad"
}
],
"width": "stretch"
},
{
"type": "Column",
"selectAction": {
"type": "Action.Submit",
"data": "ok"
},
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg"
},
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Ok"
}
],
"width": "stretch"
},
{
"type": "Column",
"selectAction": {
"type": "Action.Submit",
"data": "good"
},
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg"
},
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Good"
}
],
"width": "stretch"
},
{
"type": "Column",
"selectAction": {
"type": "Action.Submit",
"data": "terrific"
},
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg"
},
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Terrific"
}
],
"width": "stretch"
}
]
},
{
"type": "Input.Text",
"id": "comment",
"placeholder": "Add a comment",
"isMultiline": true
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0",
"actions": [
{
"type": "Action.Submit",
"title": "Ok",
"data": "ok"
}
]
}
Solution
There's a couple of issues with your card JSON that you need to fix:
- Your actions don't have titles.
- You should make
dataan object instead of a string. String works, mostly, but is less consistent.
You can find/fix most errors with your card by copy/pasting your code in the Designer and looking for errors:
I've recreated your card so that it works:
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Rate your experience!",
"weight": "Bolder",
"color": "Accent",
"size": "Medium"
},
{
"type": "TextBlock",
"text": "Please rate your experience! Your feedback is very appreciated and will help improve your experience in the future. ",
"wrap": true
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"altText": "",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg",
"selectAction": {
"type": "Action.Submit",
"data": { "rating": "awful" },
"title": "awful"
}
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"altText": "",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg",
"selectAction": {
"type": "Action.Submit",
"data": { "rating": "bad" },
"title": "bad"
}
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"altText": "",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg",
"selectAction": {
"type": "Action.Submit",
"data": { "rating": "ok" },
"title": "ok"
}
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"altText": "",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg",
"selectAction": {
"type": "Action.Submit",
"data": { "rating": "good" },
"title": "good"
}
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"altText": "",
"url": "https://upload.wikimedia.org/wikipedia/commons/1/18/Five-pointed_star.svg",
"selectAction": {
"type": "Action.Submit",
"data": { "rating": "terrific" },
"title": "terrific"
}
}
]
}
]
},
{
"type": "Input.Text",
"placeholder": "Add a comment",
"isMultiline": true,
"id": "comment"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0",
"actions": [
{
"type": "Action.Submit",
"title": "Ok"
}
]
}
Note, that the feedback will come in Activity.Value.rating