What is Adaptive Cards?
Adaptive Cards is a Card UI framework announced by Microsoft in 2017 that aims to standardize the layouting of Cards independent of the platform.
The goal is to define a Card just once, make it portable and leave it to the different platforms to skin it according to its own requirements.
Adaptive Cards are obviously best supported by other Microsoft products, like Microsoft Teams or Bot Framework. As of October 2019 another rival to Microsoft Teams, namely Webex Teams, also made the switch to Adaptive Cards. You can see an up-to-date list of supported platforms on the Microsoft website.
If you're reading this article chances are you're already working (or considering to work) with Bot Framework. Maybe you're making a chatbot for your organization and are wondering if there any hidden implications of committing your project to the hands of Microsoft.
So here we have a few thoughts you might want to take into consideration:
Benefits of using Adaptive Cards
Apart from a wider perspective on Card-based UX more generally, Adaptive Cards is Microsoft's attempt to be part of the development. And there are many solid aspects to it:
- Written in JSON: Adaptive Cards is a 'description' or a 'recipe' for how a Card should be structured, the styling or skinning of the Card is then subsequently customized by the service into which the Adaptive Card is deployed.
- Write once, deploy everywhere: This is obviously great, as you can write the layout of your Card once and then different solutions will take care of making your Card appear native for the respective application.
- Rich functionality: Microsoft has included a lot interactivity for Adaptive Cards. They offer a wide range of inputs like dropdowns, text boxes and button and individual sections can be dynamically shown or hidden. This exceeds the range of functions, that Alexa Presentation Language or Slack Block Kit offers.
- Even supports voice: As part of the JSON in which Cards are defined, admins can even specify what should be read from the Card if voice output is available.
Challenges when using Adaptive Cards
However there are also some drawbacks to using Adaptive Cards, namely:
1. Little cross-platform support
Aside from Webex Teams, there isn't a single provider outside of Microsoft that supports Adaptive Cards. If your project should work on either Slack, Alexa or Google Assistant, then you will need to support their respective frameworks separately.
Arguably, even within Microsoft there isn't universal support for Adaptive Cards as neither SharePoint, nor the (admittedly) outgoing Skype support it.
2. No built-in business logic
Adaptive Cards are a pretty simple JSON "recipe" so to speak; they just show you what you gave them.
Apart from some conditional layouting, there isn't a whole lot of heavy lifting Adaptive Cards can do for you. (At least yet.)
Thus, for typical business use cases you'll have to think about implementing separately the following:
- User authentication: Who is looking at the Card? Will they log in separately to your Cards or share a session with, say, your SharePoint?
- Permissions: What Cards may a user see or find?
- Audiences: Will users personalize what Cards they see? If so, what Cards are mandatory for everyone?
Data binding: How do I get dynamic data like numbers into my Card's JSONNow available, see below
- Multi-lingual: If you speak French you may want to see French labels, and if you're European you may want European date formats, etc.
- Dates and formats: Many times JSON shows timestamps as Unix time, but don't go looking for any clever time formatting like "X minutes ago"
- New data: If the data from an API changes, how will the update be detected? And how will the Card know to get refreshed or recalled?
- Natural language understanding: When will the Card appear? What will take care of understanding what the user wants. (Actually, Bot Framework would be an option for this.)
Update 2020: Data binding, originally announced for version 2.0, is now available as a Preview. Microsoft calls it Templating, and, in a nutshell, it allows you to directly embed the data from your JSON into the payload of your Card.
For example, say you want to display someone's phone number you can just write the path of your JSON, seperated by dots, and Adaptive Card will go through the JSON until it reaches the correct node and paste it's content 1:1 into the Card.
Is the lack of business logic a reason not to use Adaptive Cards?
It shouldn't be. Being a fully fledged business platform wasn't ever the mission Microsoft had for Adaptive Cards. It's more a technology, like HTML is a technology. And just having HTML does a CMS not make, basically. 😉
3. Fragmented versions
Despite only a handful of platforms supporting Adaptive Cards, they use different versions which significantly differ in functionality. For example at the time of writing, Microsoft Teams was on version 1.0, Webex Teams on 1.1 and Bot Framework on 1.2.
According to Microsoft the latest stable version of Adaptive Cards is version 1.0.
With that in mind, there may be some odd constraints for making universally useful (and beautiful) Cards. For example:
- you need v1.1 to show specific image sizes
- step up to v1.2 so you can show Action buttons in places other than on the bottom
- with v1.3 (only announced) it looks like we might get media queries for responsive layouts, as well as GIF and SVG support.
While it's great Microsoft continues to create new features, the sluggish implementation kind of makes it hard to make a pretty Card that will work everywhere.
How we do it
With Digital Assistant we want to give users the most native experience for the platform they're using. We have our own Assistant Cards which are HTML5, but we show those only in a browser environment.
For Microsoft Teams we translate this Card into an Adaptive Card on the fly (see example on the right).
And for other platforms we use their native layouts, too: For Slack the Assistant shows Cards as Block Kit, with Alexa the native format is called APL and Google Assistant responses are in the Rich responses format.
It is this cross-platform compatibility that makes it easy for organizations to truly write a Card once, and deploy it everywhere without having to familiarize yourself with every nuance of every target channel.
If you're not convinced it's that easy, just try it for yourself with a free Digital Assistant account including all the above channels.
Hopefully this guide gave you a quick primer on Adaptive Cards and helped you decide whether it's for you. Are you a seasoned Apative Cards developer? If so, let us know if you think we missed anything in the comments below.