How to Post an Adaptive Card to Microsoft Teams Using Power Automate?

In this article, I will explain adaptive cards for teams and how to post an Adaptive card to Microsoft Teams using Power Automate.

Also, we will discuss how to design Adaptive cards in Power Automate with an example.

Adaptive Cards for Teams

An adaptive card is like small bits of UI, generated in json format, where it shares and displays the blocks of information to apps or services without customizing the HTML or CSS to render them.

When these adaptive cards are delivered to host applications like Microsoft Teams Outlook, the Json is transformed into UI and displays the content.

The adaptive cards can be customized according to the application’s design. Furthermore, they facilitate many features for designing cards, such as buttons, input fields, multimedia, etc.

How to Design Adaptive Cards in Power Automate

To create an adaptive card in Power Automate, go through the below points:

Power Automate provides 4 flow actions to create adaptive cards in Microsoft Teams. This flow action has a different functionality to perform.

To create an adaptive card, a user should be familiar with the Adaptive card JSON schema. Instead of creating a card from scratch, a user can also use the Adaptive card designer.

• Inside the Microsoft Adaptive Cards designer, we can create a New Card or select it from the Template so that it will generate the json format for the adaptive card.
• Select the host app ad ‘Microsoft Teams‘ from the drop-down options.

How to Post an Adaptive Card to Microsoft Teams Using Power Automate

To send an adaptive card to the Microsoft Teams team channel using Power Automate, follow the below steps:

Example:

Here, I have a SharePoint list named Tasks with various columns, as shown below.

This SharePoint site is also present in Microsoft Teams as a team, where it has a default General channel.

Requirement	Condition	Result
When an Item is created in the SharePoint list	If the Task Assigned To member is present in Team Group Members	Post an Adaptive card to the MS Teams team channel

Go through the below steps to achieve the example:

1. Open the Power Automate Home page and click + Create -> select Automated Cloud flow. Give flow name, and select trigger when an item is created -> Tap Create.

Inside the trigger, select Site Address and List Name.

2. Next, add a List Teams flow action to retrieve all the teams present in Microsoft Teams of the current user.

3. Now, select the ‘Condition’ control flow action, where to get the team from the list of teams present in Microsoft Teams.

@{items('For_each')?['displayName']} is equal to @{items('For_each')?['displayName']}

4. Under the True condition, remove the List group members flow action, which will retrieve all the team members along with the owner.

Configure the below parameter:

• Group Id: Select Team Id from the dynamic content of List teams.

Each loop will be added automatically, taking the outputs of the body/value of a Teams List.

The previous action generated the array of members and owners of a particular Microsoft Teams team, where we should post the adaptive card.

5. Now, I need to filter the array based on If the array value contains the Task Assigned To member -> Then only, post an adaptive card in the Microsoft Teams team channel.

Add a ‘Filter array‘ flow action, and provide the below details:

• From: Select body/value dynamic content under List group members.
• Filter Query: Insert the below code.

@contains(@{item()?['displayName']},@{triggerBody()?['TaskAssignedTo']?['DisplayName']})

6. Finally, add a ‘Post card in chat or channel‘ flow action. Ensure to give the below details:

• Post as: Select Flow bot from the drop-down.
• Post In: Choose Channel from the drop-down options.
• Team: Select a required team from the list.
• Channel: Take a General channel under teams
• Adaptive Card: Add the below code.

I have already created a json format with the adaptive card designer according to my requirements using Power Automate.

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.4",
    "body": [
        {
            "type": "TextBlock",
            "text": "Project Task",
            "wrap": true,
            "spacing": "ExtraLarge",
            "fontType": "Default",
            "size": "Medium",
            "weight": "Bolder",
            "color": "Attention"
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Task Title",
                            "wrap": true,
                            "weight": "Bolder",
                            "color": "Accent"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Task Assigned To",
                            "wrap": true,
                            "color": "Accent",
                            "weight": "Bolder"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Task Priority",
                            "wrap": true,
                            "color": "Accent",
                            "weight": "Bolder"
                        }
                    ]
                }
            ],
            "spacing": "Small",
            "separator": true,
            "horizontalAlignment": "Center"
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "@{triggerBody()?['Title']}",
                            "wrap": true
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "@{triggerBody()?['TaskAssignedTo']?['DisplayName']} ",
                            "wrap": true
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "@{triggerBody()?['TaskPriority']?['Value']}",
                            "wrap": true
                        }
                    ]
                }
            ]
        }
    ]
}

Refer to the image below.

6. Once the flow is created, save and test the flow manually. At this point, create a new item in the SharePoint list as shown below:

7. If there are no errors, the flow runs successfully and posts an adaptive card in the MS Teams team channel, as seen in the screenshot below:

This way, we can send an adaptive card to the Microsoft Teams team channel using Power Automate.

Conclusion

I hope this tutorial has given you an idea about the Power Automate adaptive card and how to design and post an adaptive card in Microsoft Teams using Power Automate.

Also, you may like:

• Delete Files Older than 3 Years from SharePoint Document Library Using Power Automate
• Set Microsoft Teams Status Using Power Automate
• Post Image to Microsoft Teams Channel Using Power Automate
• Power Automate Remove Characters From String
• Sort Array in Power Automate