New Microsoft Flow action for posting Adaptive Cards as a bot on Microsoft Teams channel was released on March 2019. New actions allows you to create a customized Adaptive Card with your content and posting it to selected Microsoft Teams channel.
Adaptive Cards – what they are?
Adaptive Cards are a simple way to create consistent and rich content in unified way across applications. A card is described with a simple JSON object, which describes the card content. Hosting application, where card is displayed, is responsible for card’s look and feel, so it feels familiar to end user.
A card can contain text, images, audio and video content elements. Content can be organized with containers, columns, fact lists and image sets. Card can also contain inputs and actions. Most common input types are supported like text, number, date and choices, and actions currently support opening an URL to a browser, submitting the card data and showing a card. Submit can be used for example passing data back to a bot on Microsoft Teams.
{
"type": "AdaptiveCard",
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "Example Card"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"style": "Person",
"url": "https://pbs.twimg.com/profile_images/744046415517720580/Thq2F505_bigger.jpg",
"size": "Small"
}
],
"width": "auto"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "Matti Paukkonen",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "None",
"text": "@mpaukkon",
"isSubtle": true,
"wrap": true
}
],
"width": "stretch"
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Content of an example card.",
"wrap": true
},
{
"type": "FactSet",
"spacing": "None",
"facts": [
{
"title": "Title",
"value": "Project Plan"
},
{
"title": "Task",
"value": "Reviw"
},
{
"title": "Assigned to:",
"value": "Matti Paukkonen"
},
{
"title": "Due",
"value": "20.3.2019"
}
]
}
]
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "View Document",
"url": "http://adaptivecards.io"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
Example card on JSON-format
Documentation, Schema Explorer, Samples and a Designer for cards can be found on https://adaptivecards.io/. Check it out, you get the idea.
Flow action for Adaptive Cards
For Microsoft Flow action needed configuration are Team ID, Channel ID and Message. Message is actual Adaptive Card in JSON-format. You can get the card template easily from Adaptive Cards Designer. Dynamic content can be added, but expression format is needed, if JSON is copied to Message field.
Teamifying with Adaptive Cards
I wrote a blog post on January with a topic “Teamify SharePoint reminders with Microsoft Flow“, which I described how to post reminders from SharePoint lists to Microsoft Teams channel.
Now with Adaptive Cards I can create a version 2.0 just by removing Post Message -action and adding Post Adaptive Card -action inside of the loop, where returned list items are gone through. So, it posts a card for each returned document, because actions are on card context and I wanted to add “View Document” action to open a document directly from the card.
And after the Flow run I can see reminder inside of an Adaptive Card
Afterword
Adaptive Cards are a great way to bring better experience to end-users and make Teams channel messages more actionable. And since you can use Flow for posting cards, you can wire-up your integrations in very simple way. Some ideas I’m going to do in the near future
- Post new Planner tasks to my team’s channel
- Post feedback gathered with Microsoft Forms publicly available on Teams
What I’ve learned?
Adaptive Cards are not supporting same features as Actionable message cards with Outlook. You can’t use HTTP POST actions to post data from your card. I hope that this will improve.
And as always, remember to take care of your “.,:;[{}]”, when doing JSON in your Flows. “How did I miss that colon from there!”
Matti Paukkonen 
Is there a way around not having Action.HTTP in MS Teams? I’d like to figure out a way for a flow to create an adaptive card, but responses (with inputs) to kick off another Flow.
LikeLike
With Action.OpenUrl you can call and start another Flow. Flow is triggered with HTTP Request and you can pass parameters on relativePath option, for example like this “{documentID}/{action}/{comment}” and you can you use documentID, action and comment as dynamic content on your Flow.
LikeLike
Hi Matti, great idea with the Action.OpenUrl. Have you possibly found a workaround not to open a blank page in the browser when a button with this action is clicked? A workflow is triggered indeed, but that blank window might be quite confusing for end users.
LikeLike
Great post! I am curious if one can create a Carousel layout post to a Teams channel this way? It’s hard to find the JSON code for a carousel style set of cards. Thanks for any light you can shed on carousels.
LikeLike
Flow only supports posting a single card.
Showing a carousel of cards is supported for bots. https://docs.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-reference#carousel-collection
LikeLike
Thank you!
LikeLike
Are you able to delete your adaptive cards from a Teams channel? This is so irritating, my flow bot works and card looks nice but i am not able to delete my adaptive cards from Teams.
LikeLike
Only Team owners can delete messages from Flow bot and it requires that on Teams messaging policy “Owners can delete sent messages” is enabled.
LikeLike
Have you found a way to post new Planner task to a team’s channel? I’ve tried google for a solution and tried myself but no luck. Thanks!
LikeLike