Adaptive Cards, what else can you use them for?

As usual, if you don’t know what Adaptive Cards are you probably want to read a bit about them first. The easiest start is by just going to www.adaptivecards.io, play a bit with the designer there, have a look at the samples and get a feeling what all this is about. Just come back here whenever you’re done and don’t forget me :)

Many people think Adaptive Cards is something Microsoft invented to be used in MS Teams or Power Platform and the alike and while that is totally true it's only half the picture. Adaptive Cards and the technology behind, including the templating engine, can be used for so much more!

Let's just have a closer look at what the website says here:

Adaptive Cards are platform-agnostic snippets of UI, authored in JSON, that apps and services can openly exchange. When delivered to a specific app, the JSON is transformed into native UI that automatically adapts to its surroundings.

That, to me, doesn’t necessarily say anything about any Microsoft product as such. No! You can use it in your apps, your websites, your mobile apps. Basically, wherever you like and everything you need to do so is included in the library itself on Github, NPM or Nuget. (https://www.github.com/microsoft/adaptivecards)

In the last year, as part of my work for Teamwork.com we used Adaptive Cards for various things. Our MS Teams App (available in Beta, just ask us ) is using cards for various notifications and UI pieces.

The Visual Studio Code Extension is fully made with Cards and was showcased during Build and MS Ignite last year. If you want to have a look, here it is:
https://github.com/Teamwork/vscode-projects
https://marketplace.visualstudio.com/items?itemName=Teamwork.twp

Isn’t that still a Microsoft product?

So… yea someone said to me on Ignite, its great yea but VSCode is still a Microsoft product. Even if VS Code is Electron-based, yea maybe true. I get that. However, I have more to talk about for you :)

This is a screenshot of one of our upcoming desktop apps. Written in Electron and vue.js. We used Adaptive Cards here to show some file details and allow adding comments on files.

Teamwork Document Editor V2 using Adaptive Cards for a few features

Its again, similar to VS Code obviously an Electron app, the same thing again and before someone says anything, let's get a bit crazier :)

Why not build a somewhat full app UI with basically just Adaptive Cards?

Yeah right, sounds crazy, some people might not even think that's doable but here we are, have a look at these two screenshots:

Person listing, made with just Bootstrap and Cards

Adaptive Card used to grab person details

In the last roughly one hour I build an example app you can see on the screenshots. The only things this app is using are Bootstrap, Vue.JS and Adaptive Cards. There’s no input field or anything in the code itself, Vue.js is only used for routing and data/state management, Bootstrap for grid and positioning.

The app is mainly made with two cards, one for the list view and the other one for edit/create.

List Card: https://github.com/DeeJayTC/AdaptiveCardsPeopleApp/blob/master/AdaptiveCardsVuePeople/src/assets/personCard.json

Edit Card: https://github.com/DeeJayTC/AdaptiveCardsPeopleApp/blob/master/AdaptiveCardsVuePeople/src/assets/personCreate.json

We can use the same card for edit and create as the templating engine will omit empty values and just show the placeholder, when showing the create modal we sent no data and the templating engine automatically just shows the placeholder and no value.

{
    "type": "Input.Text",
    "placeholder": "Person full name",
    "value": "{$root.displayName}",
    "id": "name"
},

But lets just not talk about stuff, demo’s are the best proof, just have a look at this, the full app available and working online: https://deejaytc.github.io/AdaptiveCardsPeopleApp/

Full source available here: https://github.com/DeeJayTC/AdaptiveCardsPeopleApp

Now, why am I talking to you about this?

Well, as said in the beginning, Adaptive Cards and everything related is a lot more than just a technology used for Microsoft products. It's highly flexible and can be used for a ton of things. This article pretty much should just explain that you can do more with Cards than you might have thought by now.

Just start thinking…what else can I use this for? I’m sure you’ll find a few great things.

Let me know what you use Cards for today and let's talk!