7 minute read

You should read this first.

Azure bot registration

What are adaptive cards

“Adaptive Cards are platform-agnostic snippets of UI, authored in JSON, that apps and services can openly exchange.”

Adaptive cards

Cards are basically JSON files written per adaptivecards standard that are transformed into native UI of an app in which they are delivered. The native UI automatically adapts to its surroundings.

Example of adaptive cards in botframework

Copy to Clipboard

Keep in mind that you’ll need to use “Card Factory” class from “botbuilder” to send and manage adaptive cards. You also need other classes, but this one is directly related to our topic right now. So, include those classes in your bot.js file.

Copy to Clipboard

NOTE: You can also define your cards directly in your bot.js file where you use it. But it can get quite messy so it’s not recommended. You should always write your cards into separate JSON files and include them when needed.

Copy to Clipboard

Adaptive cards in botframework bots

And here is how the card looks in Webchat or Bot Framework Emulator. It’s not the prettiest, but it takes the UI of the platform so other platforms may have better looking cards.

adaptive cards in bot- input card

Useful tips:

  • Version 1.3 is currently not supported in MS Teams

  • Version 1.2 media elements are not showing video and audio in MS Teams

  • Be careful using cards to collect user’s password since all text is displayed like regular text when entered, there is no dedicated password input field

Card update and delete

You can update and delete your adaptive cards so that they don’t stay in your chat forever. There isn’t really any use for them after you’ve used them. It would also be bad for security reasons to leave a card, that can run operations on a remote server, active. Managing cards keeps your chat neat and clean and if you ever need a card again, you can call for it from you bot.

So, what’s the idea? You can update and delete a card, but how to use it correctly. Well, we made a card that collects user input, instead of showing a new card with results, you can just update the input card. You won’t need it anymore after all. You can also delete it and send a new one, but updating it is a quicker and better way of doing it.

Delete adaptive cards

Deleting adaptive cards is easy and it can be done with just one line of code. The placement of that one line is the thing you need to worry about. You don’t want to delete a card before it updates or delete it right after it is shown so keep that in mind.

Copy to Clipboard

Update adaptive cards

Updating cards isn’t as simple as deleting them because you must replace them with another card. So, we need another adaptive card and we need to include it in our bot. After that, we need to set it’s “id” to “ReplyToId” from our context in order to point to the card we want to update. Then we update the card similarly as sending it.

Copy to Clipboard

Uses for adaptive cards in botframework

  • Great for collecting user data

  • Work well for gathering user feedback

  • Making appointments is much easier

  • Each user can have his own personal business card that the bot can display

  • Collecting a list of inputs for a bot operation

  • You can create tasks and make an input for an answer – great for schools

  • Much easier to collect information than bot dialogs

  • Can display audio and video media

Up next.

Bot Framework Dialogs