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 post adaptive card in Microsoft Teams using Power Automate

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 design Adaptive card using Power Automate

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:

See also  SPFx - Bind dropdown list from SharePoint list using PnP

Example:

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

Power Automate post adaptive card in a MS Teams Channel

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

How to post adaptive card in a Microsoft Teams channel using Power Automate
RequirementConditionResult
When an Item is created in the SharePoint listIf the Task Assigned To member is present in Team Group MembersPost 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.

Power Automate post adaptive card in a Microsoft Teams channel

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']}
How to send an adaptive card in Microsoft Teams using Power Automate

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.

Power Automate post adaptive card in MS Teams channel

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.

See also  Area Chart in Power BI

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']})
Post a Adaptive card to Microsoft Teams using Power Automate

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.

Adaptive cards in Microsoft Teams using Power Automate

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:

How to create and Post an Adaptive card in Power Automate

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:

Send an Adaptive card to Microsoft Teams channel using Power Automate

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

See also  How to attach files to planner tasks 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:

>