Software Architect / Microsoft MVP (AI) and Technical Author

AI, Azure, Bot Framework, Chatbots, Microsoft

How To Capture Data and Events from Adaptive Cards in Bot Framework Composer

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:

JOIN MY EXCLUSIVE EMAIL LIST
Get the latest content and code from the blog posts!
I respect your privacy. No spam. Ever.

Leave a Reply