Do you ever have a need to post notifications to people in Teams based on a trigger or something happening? In this post I’ll show you how to make this notifications fancy with adaptive cards!
Adaptive Cards
So… what are adaptive cards you ask? They’re platform-agnostic snippets of UI, written in JSON, that apps and services can openly exchange. When delivered to a specific app, the JSON is then transformed into native UI that automatically adapts to its surroundings.
This basically means that we design an adaptive card, and it’s look will slightly alter based on the app we’ve surfaced it in. For example if we surface it in Teams by posting one in a chat or channel, then it’ll match the Microsoft Teams user interface.
Designing Adaptive Cards
Before we can start posting Adaptive Cards in places such as Microsoft Teams we need to design one! When we do this we’ll put some placeholders in place to create the design of the card, and then we’ll replace the content in those place holders with dynamic content in Power Automate when we need to actually post an Adaptive Card with some content in a channel or chat or other location.
Let’s design one first though…
To design your Adaptive Card you can go to adaptivecards.io. You can also use Power Apps cards, though this is in preview currently, so whilst there’s another option at G.A., this is the option I’ll use for this post currently.
Head to the designer at adaptivecards.io and you can start designing your card! You’ll very simply be able to drag card elements in from the left hand bar, and then edit their individual properties using the element properties pane on the right. You’ll notice the card payload (JSON) changing as you make changes to your card.
So… I’ve now designed a very simple card. I’ve got a title which is statically coded, my site logo which is statically coded, a subtitle, also statically coded, a field for today’s date which I will replace with an expression in Power Automate to make dynamic, and some partly hard coded body, and a part I will replace with dynamic content from a previous action. Then I’ve also got a button or ‘action’ to launch a URL.
Posting the adaptive card to Microsoft Teams using Power Automate
Now we’re going to use Power Automate to post our fancy adaptive card to a chat in Microsoft Teams. In this case, it’s only me that’s interested in this content, so I’ll use a chat and hard code the to value as myself. However, if I potentially wanted to let a wider team know about something I’d use an actual team and channel to post the content in.
Anyway, let’s create the flow. I’m going to use a recurrence trigger of every day at 3pm.
Now I’m going to use the WordPress Power Automate connector, and the action ‘Get site statistics’ to get my site’s information. Based on my connection I’ll select my site in the Site Id input.
Now I’ll add the action ‘post adaptive card in a chat or channel’ from the Microsoft Teams connector. Then I’ll say I’ll post as the flow bot, in a chat with the flow bot, with the recipient as myself (lewis@lewisdoes.dev)
Now for the adaptive card, we’ll go back to our designer and select ‘copy card payload’, now simply paste your clipboards content into the ‘adaptive card’ field.
Now we need to go through the JSON and update any fields we notice are hard coded that we wanted to soft code with an expression or dynamic content. So I’m looking for [today’s date] and [statistics]. You can actually select inside the field and do a CMD+F or CTRL+F to find the content you’re looking for.
I’m going to replace my today’s date text with the following expression.
Now I’m going to update my ‘statistics’ with the dynamic content from my wordpress action to post statistics here. You can use \n to make a new line in JSON.
Perfect! Now let’s test it out!
I did have one issue with version 1.5 of Adaptive Cards when running my first test so I changed the version to 1.4 inside my JSON and things worked perfectly!
Looks like my views are a little low at the end of the week hey!
I hope this post helped. If you didn’t understand something or need some more help with Adaptive Cards and Power Automate, let me know.