Adaptive Cards are one of the most configurable UI components you can integrate with your chatbot to create rich conversational experiences in your chatbot.
With adaptive cards, you can add labels, input fields, buttons, images, or mix multiple types of UI element to create almost any type of input form you need.
The site www.adaptivecards.io contains loads of examples and a schema explorer to help you click and create your adaptive card. You can then import this into Bot Framework Composer.
In this blog post, I show you how to configure an adaptive card that prompts for a username. When the submit is clicked, the input data is fetched from the post and redisplayed in an activity.
Adaptive Cards JSON
What follows is the adaptive card JSON. Here we can see the body node contains a header in bold (Add Record) and an input field (username). There is also a submit button (Submit):
- ```
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "Add Record"
},
{
"type": "Input.Text",
"placeholder": "Name",
"id": "username"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
]
}
```
Send A Response to Ask A question
We create a new “Send A Response to Ask A question” activity:
Then set the Attachment to the JSON from earlier:
Next, we need to capture the button click. We can do this by adding a trigger.
Message Received Activity
We add new Message Received trigger to the same dialog. We also add a Send a Response activity and read the data in the current turn. This contains the value that was submitted from the adaptive card:
Testing
We can test the chatbot using the Bot Framework Emulator. Here we can see the adaptive card is displayed, the input is captured and then echoed back:
Andrew
Hi Jamie, thank you for this. Once the value is saved in the message received trigger, I guess i am stuck with where to go next, IE. do i continue adding more activities to this same Trigger or back in the BeginDialog Trigger; and, what about when i capture some more input from another card in the Dialog, do i use this same message received trigger or add a second message received trigger.
Sandeep
Jamie,
You are a Saviour. Found this after a lot of research and trial and error.
Thanks.
jamie_maguire
Sandeep – thankyou! Glad this blog post was able to help you.