Teamify with Adaptive Cards and Microsoft Flow

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

Example card on Designer

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

Post Adaptive Card action

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.

Example card on Microsoft Teams

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.

Post Adaptive Card -action

And after the Flow run I can see reminder inside of an Adaptive Card

SharePoint reminder 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!”

4 thoughts on “Teamify with Adaptive Cards and Microsoft Flow

Add yours

  1. 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.

    Like

    1. 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.

      Like

  2. 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.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Powered by WordPress.com.

Up ↑

%d bloggers like this: