In my previous blog post I showed how to Send reminders to Teams from Microsoft Lists using Power Automate. In this post we will extend the Flow functionality to include an Adaptive Card based on our Issue Tracker List data. Please see my previous post for the steps required to complete this build.
I’m using the Adaptive Cards Restaurant sample for my starting point for its simplicity of design. While in the designer be sure to set the Host app to “Microsoft Teams”.
I have removed the elements that I do not require.
Click “Copy card payload”.
Edit your Issue tracker – Daily (Teams) Flow in Power Automate and add a new Microsoft Teams Post adaptive card in a chat or channel action and set:
- Post as to “Flow bot”
- Post in to “Chat with Flow bot”
- Recipient to “Person or group the issue is assigned to Email”
- Paste in the copied card payload to Adaptive Card
Now for the tricky part. You need to manually edit the card payload text to suite your needs and leverage the dynamic data that we pulled in from the Issue Tracker list. This should be an iterative approach where you test every change along the way. JSON is not my forte so I need to go slow and ensure that any of my changes don’t break the card. My completed card payload is listed below.
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"speak": "Issue tracker reminder",
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 2,
"items": [
{
"type": "TextBlock",
"wrap": true,
"text": "Issue tracker reminder:"
},
{
"type": "TextBlock",
"text": "@{items('Apply_to_each_-_Reminder')?['Title']}",
"weight": "Bolder",
"size": "ExtraLarge",
"spacing": "None",
"wrap": true
},
{
"type": "TextBlock",
"text": "Due in @{variables('varNumDays')} days.",
"size": "Small",
"spacing": "None",
"wrap": true
},
{
"type": "TextBlock",
"text": "@{items('Apply_to_each_-_Reminder')?['Description']}",
"size": "Small",
"wrap": true,
"maxLines": 3
}
]
}
]
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "More Info",
"url": "@{items('Apply_to_each_-_Reminder')?['{Link}']}"
}
]
}
My completed Flow looks like the image below. The Post a message in a chat or channel action is redundant but I am keeping it in the Flow to illustrate the different user experience between a chat message and adaptive card.
Save and test your Flow. Assuming you have an issue due in 30 days you will get the following adaptive card in Teams from Flow Bot:
The user experience with an adaptive card is far superior to a chat message. The card layout lends itself to quickly delivering and consuming information. Buttons and other “calls to action” can be added extending the functionality of the reminder and goes a long way in adding value to the experience.
Thanks for reading!
NY
Norm Young 
Excellent solution Norm. This is a great resource from Microsoft that I utilize when designing them https://adaptivecards.io/designer/
LikeLiked by 1 person
Hi Scott,
Thanks for the feedback and I agree https://adaptivecards.io/designer/ site is very useful.
Thanks again.
NY
LikeLike
I was brought to your helpful blog while struggling with my first flow. I am trying to add an adaptive card to a flow where the Teams recipient has option to “snooze” the reminder and then will be messaged again once that time has elapsed. I tried this (https://vnext.adaptivecards.io/samples/CalendarReminder.html) but it’s not working, any thoughts or maybe a blog post on using adaptive cards this way ; )
LikeLike
Hi Andy,
Challenge accepted! I’ll try Calendar Reminder out in the context of this blog post and will share back the results.
Thanks for reading!
NY
LikeLiked by 1 person
Hello again Andy,
PM me and I will show you what I did to get it to work.
NY
LikeLiked by 1 person
Hi Norm, pm sent : )
THANK YOU!
LikeLike
Could a person use this process as a way of working around the fact that you can’t @mention a user from within a Planner comments?
LikeLike
Hi Richard,
I suppose but adaptive cards are not bi-directional (at least in this blog post). I believe that Planner comments notify assignees. Is that not enough? I’d be curious to know more about the scenario.
Thanks for reading!
NY
LikeLike