Send Adaptive Cards and get responses in Microsoft Teams with Power Automate

Context

With Adaptive Cards, you can easily share and display information without to be a designer and manipulate complex styles. Formatted in JSON, Adaptive Cards support multiple hosts like Microsoft Teams, Outlook, Bot Framework, Viva Connections Dashboard and more. In this article, I’ll show you an easy way to create, send and get responses from your end users in Microsoft Teams with Power Automate and Adaptive Cards so let’s go!

Building and sending Adaptive Cards

The easiest way to create your own Adaptive Cards when you have no idea about the structure and capabilities is to use the Adaptive Cards Designer from Microsoft. This useful web tool can generate Adaptive Cards from templates or from scratch and render the cards for the multiple hosts available. I recommend you to use this tool as much as possible when you’re starting.

In my case, I’ll generate a simple feedback request Adaptive Card for Microsoft Teams host as below:

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2",
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "Image",
                    "url": "https://i.imgur.com/L0GbkSf.jpeg",
                    "id": "imgHeader",
                    "altText": "header",
                    "horizontalAlignment": "center"
                },
                {
                    "type": "TextBlock",
                    "wrap": true,
                    "text": "Help us to improve our IT services",
                    "horizontalAlignment": "Center",
                    "size": "Large",
                    "color": "Dark",
                    "id": "lblHeader",
                    "weight": "Bolder"
                },
                {
                    "type": "TextBlock",
                    "wrap": true,
                    "text": "How can we improve our IT services?",
                    "id": "lblQuestion"
                },
                {
                    "type": "Input.Text",
                    "placeholder": "Your feedback here",
                    "isMultiline": true,
                    "id": "txtFeedback"
                },
                {
                    "type": "ActionSet",
                    "actions": [
                        {
                            "type": "Action.Submit",
                            "id": "btnSubmit",
                            "style": "positive",
                            "title": "Submit"
                        }
                    ]
                }
            ]
        }
    ]
}
The render of my custom card for Microsoft Teams from the Designer tool.

Note: the version of Adaptive Cards supported in each host can be different so be careful to use the right version number for your target host (1.2, 1.3, 1.4, etc.).

You can select Adaptive Cards target version to use in the Designer tool.

Now it’s done, you can create your Power Automate flow. For this article, I’m creating a simple instant cloud flow with manual trigger to show you the main logic behind but you can use any other available trigger for your business needs like SharePoint, SQL Server, ServiceNow, custom connector, etc.

In the Power Automate flow, just add the action named “Post adaptive card and wait for a response” as below:

Use this action to send the Adaptive Card and wait for user’s response in Microsoft Teams.

You need to fill the required fields of the action:

Post as: Flow bot

Post in: Chat with Flow bot

Message: Adaptive Card JSON code from the Designer

Update message: Thank you for your feedback!

Recipient: email address of the user to send the card (user@domain.com)

For this article, I’m also just adding a simple Compose action to format some fields from the user’s response but you can imagine a plenty of different scenarios where to store the response’s data like SharePoint, SQL Server, Excel, OneDrive, custom connector, etc.

You can get all fields related to user’s response from the action.
The Compose action formats some fields from user’s response.

And now it’s time to test the flow, in my case I’m just testing it in a manual mode:

Target user has received the card and the flow is now waiting for the user’s response.

Fill the feedback text field and click on “Submit” button to continue the process:

The Update message from the action parameter is displaying to the user.

Finally, we can see that our Compose action displays all the selected fields from the response:

The Compose action displays the selected fields from user’s response in Microsoft Teams.
User display name: Adele Vance
User email: AdeleV@yhabersaat.onmicrosoft.com
User feedback: I can't find anything on the IT service portal.
Action ID: btnSubmit

I’m currently testing Adaptive Card Extensions (ACEs) with SharePoint Framework (SPFx) for Viva Connections Dashboard and I thought it was the good time to present you an other great low code/no code solution to deal with Adaptive Cards! I hope this article will be useful and don’t hesitate to contact me if you have any question or request regarding this article or want more technical details to implement this solution.

Happy coding everyone!

Resources

https://docs.microsoft.com/en-us/adaptive-cards

https://docs.microsoft.com/en-us/power-automate

https://docs.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/what-are-cards

https://adaptivecards.io/designer

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