Adaptive Cards have become the pre-eminent way to make Cards. They’re simple enough to build, yet interactive enough to be useful for almost any use case. You can read a full insider’s guide about what unexpected pitfalls you should consider. First-time Adaptive Card developers frequently want to make a Card so that it can be sent to a channel or colleague in Teams.
So in this guide, we’ll explore two ways you can do this. Both are not without compromises, so be sure to think twice before committing.
Official way: Post updates to MS Teams
The official way Microsoft recommends involves – surprise – using Microsoft PowerAutomate. You build little “recipes” called Flows where you pick a trigger app and then push an Adaptive Card to MS Teams as part of your Flow.
There are a ton of templates you can browse on this PowerAutomate page, just search for Microsoft Teams and click on a template to start.
This will bring you into the PowerAutomate web interface, where the Flow template first requires you to authenticate with your trigger and action apps. Once that’s done hit Continue.
This drops you into the Flow editor. Here you can configure each step separately. For example, in the above screenshot you can pick a Folder that the Flow will scan for new emails, and in the bottom portion you configure your Adaptive Card for Teams.
First, you can decide whether this Adaptive Card goes into a Channel, Group chat or directly in a chat with the Flow bot.
Then we come to the actual Adaptive Card piece where you define the schema for the Adaptive Card. Within this schema you can dynamically insert a bunch of dynamic content, basically parameters captured from previous steps. These will bring your Adaptive Card to life by filling it with the data from your trigger.
Once you’re done you can Save your Flow and use the Test panel to make sure it works as expected.
Problems when using PowerAutomate to push Adaptive Cards into Teams
Alas, there are a couple of quirks of this setup that you should consider.
1. Template confusion
There are templates for Microsoft Teams that just send a plain message, not an Adaptive Card. When browsing the templates, there is no discernable way to figure out which one you’re going to get. But you can just click on + New step and then search for Adaptive Card to rectify that.
2. There is no way to preview or edit the Adaptive Card
The Adaptive Card schema in the Flow editor is pretty bare, it just shows the pure Json for the Adaptive Card. Previewing or editing your Card can be cumbersome.
You could copy-and-paste the Schema over to the Microsoft Adaptive Card Designer. However, if you do that, all existing dynamic expressions will break the Designer. So you if you want to preview the Card there, you will have to first remove those. You could then make changes to your layout as needed, and copy the Schema back to the Flow editor (and re-add any parameters that you had to strip out). Yeah…
3. No AI to ask a chatbot for help
Since the Flow lets you post your Adaptive Card in Chat with Flow bot, you’d be forgiven for assuming that there is some kind of conversation you can have in order to query a specific Card. Alas, this simply isn’t the case. There is no AI, there is no language component that you can “train” or anything like that, that could help you or your team ask for specific Cards.
Setting PowerAutomate aside, you can build your own chatbot with Microsoft Bot Framework. Such a bot can respond with Adaptive Cards, but in order to deploy that to Microsoft Teams you’ll have to have an Azure subscription.
4. Cost
Well, we’re talking about a Microsoft product here, so be prepared to write a big cheque. A single flow that can push an Adaptive Card to your MS Teams instance can be licensed for $100 a month – this notably includes all users in your organization. Depending on the number of users, this may present a good economy for you.
Alternatively, if you are in a small team or perhaps want to use PowerAutomate for yourself, you’ll likely go with the user plan that’s $15 a month. Is this good value? You decide – after you read the next section…
Free way: Receive updates from any app + ask a chatbot
There is a pretty succinct way to build Adaptive Cards for Microsoft Teams, provided you’re not shy to try a 3rd party app. It’s called Digital Assistant, and pretty much takes care of the entire lifecycle of making a Card and combining it with real-time data. Let’s dig in:
1. Add Digital Assistant to Teams
The first step is simple enough. Go into your Teams app and click on Apps (bottom left corner) and search for Digital Assistant. Then just go ahead and hit the Add button.
This will bring you to your personal Digital Assistant chatbot. Within a few seconds, the bot will recognize you as a new user and send you this message:
Once you got this message (can take up to 45 seconds) go ahead and click Link Accounts. This will drop you into the Digital Assistant login screen, where you’ll probably just want to click Sign in with Microsoft (unless you already have an account).
If you did go with the Microsoft option, you will be first asked to authorize adenin’s Digital Assistant…
…followed by a prompt to authorize Microsoft Teams to link to your Digital Assistant account, which you can just Allow.
Once the accounts are linked, return to your Digital Assistant chatbot in Teams and wait – approximately 45 seconds – until your chatbot acknowledges your identity.
2. Design your Adaptive Card for Microsoft Teams
Now we’re ready to make our Card. To start, navigate to this link: https://app.adenin.com/App/Designer/AdaptiveCard/?template=add
This will drop you into the Assistant’s version of Microsoft’s original Adaptive Card Designer. Basically, we’re now just 4 steps away from having our own Adaptive Card for Microsoft Teams:
1 – Name
You’ll have to name your Adaptive Card something. The chatbot in Teams will use this to find your Card
2 – Payload
The Card needs a design. You’re either a seasoned Adaptive Card Designer, and know exactly what to do. Or you’re new to the format, in which case why not start with a pretty template by clicking Pick a sample. This will open many useful business templates for Adaptive Cards, similar to the ones mentioned in this post.
3 – Chatbot training material
The MS Teams bot will find your Card based on the title, as well as training “utterances” that you can add on to enhance the chatbot recognition smartness. To add some AI training data, click on the speech bubble icon in the top-right hand corner.
This will open the Add utterances modal where you can add your first sentence by clicking the + Add another phrase button. Utterances follow a very simple logic that you can use to denote synonyms or optional words, such as (MS|Microsoft) which the AI will learn to do understand as one being the abbreviation of the other. Once you’ve entered some training data hit Save.
Now comes the moment of truth: Save your new Adaptive Card, and then ask the AI chatbot for it. Go back to your MS Teams chat to ask one of your utterances or just the title of your Adaptive Card.
That should swiftly bring the Card you just designed to your Digital Assistant chatbot in Teams. (If not, you can contact the Digital Assistant’s support team.)
4 (optional) – Connect with a data connector
If you’re happy to just experiment with different layouts for your Adaptive Card, you can skip this step. But to take it to the next level, you can integrate a data source to create live lists, status cards or anything you want.
To do that, go to the App Directory and search for an app you use in your business, say Microsoft 365.
Now, depending on the specific app, you have a couple of options for an Adaptive Card.
A – Create a custom Card
Some apps, such as Microsoft 365, have a big green button on the bottom that lets you jump straight into the Adaptive Card Designer to create a new card using Microsoft 365 data.
Click on Make a custom Microsoft 365 Adaptive Card and this will bring you straight to the Adaptive Card Designer.
It looks almost like before, except now you have actual live data showing in the Sample Data Editor corner of your Designer. You could directly start with Templating the Card, i.e. inserting placeholders that represent your Json data.
Then just Save the Card, and go over to Microsoft Teams and ask the chatbot for the Card’s title (default is New Notebook in our example).
B – Use a custom API endpoint for the Adaptive Card
Let’s say we need very specific data from Microsoft 365, perhaps recent OneDrive files. We can get any API endpoint from Microsoft’s API into the Designer. To do this we click on the Pick a Connector button that lets us change the API request URL to point to a different endpoint.
To find out what endpoints Microsoft supports, we browse the Microsoft’s Graph API Explorer. The UI of this tool lets you configure an entire query URL that you can just copy-and-paste across into the Pick a Connector window to change what data is being received.
Just copy the query over into the field labeled Enter your request URL. Then go to the Modify permissions tab in the Graph API Explorer and copy all the listed permissions over into the OAuth2 Scopes field. The normal delimiter for scopes is a [ ] space, but other APIs may require different ones.
Once you click Save this will bring up a prompt in the Sample Data Editor area that reads Authorize data access. Clicking this will send you to an oAuth screen where you can authorize Digital Assistant to access the scopes you defined.
If that all went to plan, you get your live data showing up in the Sample Data Editor corner of your Adaptive Card, ready for you to make your own custom Adaptive Card that uses any endpoint from Microsoft 365’s Graph API.
Now we can create a nice Card layout, using the Templating language from Adaptive Cards. In our example, we pulled in recent OneDrive files for the user so the Card could look something like this:
Then we just add some very limited training data:
Then, click Save and you can enjoy your brand-new Adaptive Card right inside Microsoft Teams. Just ask your chatbot to Show me my files and your answer should be this:
C – Edit an existing Adaptive Card
Other apps from the App Directory, such as Zapier-powered apps, create Adaptive Cards automatically. But even these system-generated Adaptive Cards can be edited before you use them in Microsoft Teams.
Let’s say we have a Zap that pushes new Google Sheets rows to our Digital Assistant Board. The Assistant will automatically generate an Adaptive Card once the first Zap is received, which will look like this:
To change this Adaptive Card, click on the three dots menu and then press Designer. This will open the Card in the Adaptive Card designer where you can make some changes.
Whatever you save as the title of the Card will be how you find it in Microsoft Team’s chatbot (more training data can be added from the Add Utterances menu). So head back to your Board or to your Teams chatbot and ask for your, now modified, Adaptive Card:
3. Upsides to using Digital Assistant
Designed as a business app for devs and teams, the Digital Assistant has thought about making Adaptive Cards for Microsoft Teams end-to-end:
- Easily project Adaptive Cards into Teams with ready-to-go Teams app
- Train a chatbot to recognize user questions and match it to the right Card
- Offer built-in integrations, as well as the ability to connect to custom API endpoints
- Combine the Adaptive Card Designer with real-time API responses for a much easier design process
- Free forever plan that works for most devs
~~~
And there you have it. A very comprehensive comparison how easy it is to make Adaptive Cards for Microsoft Teams with Microsoft’s standard tools, or with the free Digital Assistant. Did you make an Adaptive Card? Let us know in the comments.
