Introduction
There have been some exciting new features in the latest releases, and with the coming 2.0 release, it’s for an article! 👍
Adaptive Cards
Adaptive Cards are a way to deliver information that’s intuitive for users to understand and interact with.
Platform-agnostic is key as this ensures the information is delivered where the users are, whether on Microsoft Teams, Cisco WebEx Teams, Microsoft Viva Connections, Microsoft Outlook, etc., on all devices. The cards are basically small UI snippets written in JSON that allow for binding dynamic data in JSON format.
In the last few years, you have seen them appear more and more in the Microsoft ecosystem. Those small cards showing a variety of information and sometimes actions.
Like; flight status, Stock information, approval flow from Power Automate, weather information, etc. the list is long.
In the Microsoft ecosystem, Adaptive Cards is currently supported in the following host apps:
- Microsoft Bot Framework WebChat (1.3)
- Microsoft Outlook Actionable Messages (1.4)
- Microsoft Teams (1.4)
- Microsoft Viva Connections (Preview) (1.3)
- Cortana Skills (1.2)
The designer
Microsoft has made it easy to get started designing your own Adaptive Cards
Go try the Adaptive Cards Designer and check out a few samples. - Two of my examples below have samples as well.
Usage Examples as an Administrator
To ignite your curiosity, I have made a few examples.
Password expiry notification
Instead of letting the password expire and potentially interrupt important work, wouldn’t it be great to let the company bot proactively reach out to users when their passwords are near expiration?
Password Expiry Notification JSON code
Azure Monitor alert
Another great example is Azure Monitor alert notifications
Note - the card element table would make more sense for the dimension name and value, but as table was added in 1.5, and teams are currently using 1.4, this is not possible.
Product Information
The last of my examples is to present product-related information.
Adaptive Card to Teams using Power Automate and PowerShell
Let’s try to post an Adaptive Card to Teams using Power Automate and trigger it by PowerShell.
I’ve designed a simple card and set it to 1.4 as I want to post it to Microsoft Teams. The card only contains two TextBlock elements.
{ "type": "AdaptiveCard", "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.4", "body": [ { "type": "TextBlock", "wrap": true, "weight": "Bolder", "text": "" }, { "type": "TextBlock", "text": "", "wrap": true, "separator": true } ] }
To post the Adaptive Card to Teams, go to Power Automate and create a new Flow with the trigger When a HTTP request is received
Hint - Use Use sample payload to generate schema as this helps create the Request JSON Body Schema
Add an Post adaptive card in a chat or channel action and paste the Adaptive Card JSON created in the designer.
Insert the Dynamic Values Heading and Description into the Adaptive Card JSON.
Now try and invoke the HTTP Request Trigger in PowerShell.
PowerShell code to trigger the Power Automate flow `` $body = @{ ‘Heading’ = ‘From PowerShell’ ‘Description’ = ‘Hello World’ }
$uri = “https://prod-62.westeurope.logic.azure.com:443/workflows/57cba0c..."
Invoke-RestMethod -Uri $uri -Body ($body | ConvertTo-Json) -Method post -ContentType “application/json” ``
Now you will receive a chat message from the Flow Bot containing your Adaptive Card.
Conclusion
Presenting information in a text-only format is often ignored as its seen as clutter. Let’s start presenting information and actions to users that feel intuitive and is beautiful by default ✨
Remember; this is not only for Teams, as most of the examples were based on. I’m really excited by using Adaptive Cards in Viva Connections too, but as for now, it’s in Preview. I will keep an eye on this and keep you posted 🪄
More information on Adaptive Cards
To learn more about Adaptive Cards, check out the following links: