Adaptive cards in bots

7 minute read

You should read this first.

“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.

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.

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.

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.

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.

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.

Up next.