What are adaptive cards
“Adaptive Cards are platform-agnostic snippets of UI, authored in JSON, that apps and services can openly exchange.”
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
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.
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.
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.
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.
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.
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