Create Your First Adaptive Cards in Power Automate and Post in Teams Step by Step Guide

In this “Adaptive Cards in Power Automate” article, we will learn about what an adaptive card is in Power Automate and how to create my first adaptive cards and post in Microsoft Teams channel using Power Automate flow step by step.

Here are two scenarios:

• I will post an adaptive card in Teams Channel and wait for the user response using the “Post adaptive card and wait for a response” Microsoft Teams action.
• I will post an adaptive card in Teams Channel without waiting for any user responses, just for notification purposes, using the “Post card in a chat or channel” Microsoft Teams action.

I have designed this article with multiple real-time demos for the above two scenarios.

In the world of automation and workflow management, Microsoft Power Automate is a powerful tool that allows you to create, manage, and automate business processes effortlessly. One of the key features of Power Automate is its ability to work with Adaptive Cards. Adaptive Cards are a versatile way to create interactive and visually appealing content within your workflows. In this article, we will explore what Adaptive Cards are in the context of Power Automate, how to work with them, and how to post Adaptive Cards in Microsoft Teams using Power Automate flows.

Understanding Adaptive Card in Power Automate

Let’s understand the concept and usage of adaptive cards in Power Automate.

What is an Adaptive Card in Power Automate?

Adaptive Cards are a flexible and open-source technology that allows you to create cards with rich and interactive content that can be used across various platforms and services, including Microsoft Teams, Outlook, and Power Automate. These cards can adapt their layout and content based on the platform or device they are being viewed on, providing a consistent user experience.

In Power Automate, Adaptive Cards enable you to present information, receive user input, and trigger actions within your automated workflows. They are particularly useful when you want to communicate data or interact with users in a structured and visually appealing way. Adaptive Cards can display text, images, buttons, input fields, and more, making them a versatile choice for enhancing your workflow automation.

How to Work with Adaptive Cards in Power Automate?

Working with Adaptive Cards in Power Automate involves several key steps:

• Create an Adaptive Card: You can create an Adaptive Card using the Adaptive Card designer, a web-based tool provided by Microsoft. The designer allows you to define the card’s layout, content, and interactions. Once you’ve designed your card, you can export it as a JSON file, which you’ll later use in your Power Automate flow.
• Configure Your Flow: In Power Automate, start by creating a new flow or editing an existing one. To add an Adaptive Card, you’ll typically use the “HTTP” trigger action to create a new HTTP endpoint. This endpoint will serve as the connection point for your Adaptive Card.
• Use the Adaptive Card JSON: In your flow, you’ll use the Adaptive Card JSON you created earlier in step 1. This JSON defines the structure and content of your card. You can either add it directly to the flow or store it in a variable for easier management.
• Send or Receive Adaptive Cards: You can send Adaptive Cards in your Power Automate flow to various platforms, such as Microsoft Teams, Outlook, or other supported services. To send an Adaptive Card, you can use the “HTTP” action to make a POST request to the relevant platform’s REST API, passing the card’s JSON data. To receive Adaptive Cards, you can use triggers or actions that listen for incoming cards from external services. For example, you can set up a trigger to respond to a message posted in Microsoft Teams that contains an Adaptive Card.

• Add Interactivity: Adaptive Cards can include interactive elements, such as buttons, input fields, and actions. You can define these interactions in the card’s JSON, and in your flow, you can configure actions to respond to user inputs or trigger specific actions based on the card’s content.
• Handle Responses: When a user interacts with an Adaptive Card, your flow can capture their responses and process the data. This might involve updating a database, sending notifications, or initiating additional workflow steps.

How to Post an Adaptive Card in Microsoft Teams using Power Automate Flow

Posting an Adaptive Card in Microsoft Teams using Power Automate is a powerful way to share information, gather feedback, or initiate processes directly within the Teams environment. Here’s a step-by-step guide:

• Create an Adaptive Card: Start by designing your Adaptive Card using the Adaptive Card designer. Ensure that your card contains all the necessary information, such as text, images, buttons, and input fields.
• Create a Power Automate Flow: In Power Automate, create a new flow or edit an existing one. You can use a trigger that initiates the flow, such as “For a selected message” or “When a new message is posted in a channel.”
• Add an Adaptive Card Action: Within your flow, add an action to send an Adaptive Card. This action might be called “Post your own adaptive card as the Flow bot to a channel.” Configure this action to send the Adaptive Card JSON that you created in step 1.
• Define the Target Channel: Specify the target channel in Microsoft Teams where you want to post the Adaptive Card. You can choose the channel when configuring the “Post your own adaptive card” action. This ensures that the card appears in the desired location within Teams.
• Trigger the Flow: Activate your flow by following the trigger condition you’ve set. For example, if you’ve selected the trigger “When a new message is posted in a channel,” your flow will run each time a new message appears in the specified channel.
• Observe the Adaptive Card in Teams: Once the flow is triggered, the Adaptive Card will be posted in the designated Teams channel. Team members can then view and interact with the card.
• Handle Responses (Optional): If your Adaptive Card includes interactive elements, you can set up additional actions in your flow to respond to user inputs. This might involve updating a database, sending notifications, or taking other automated steps based on the card’s content.

Advantages of Adaptive card instead sending email in Power Automate

Using Adaptive Cards in Power Automate offers several advantages over sending traditional emails. Here are some of the key benefits:

• Enhanced Interactivity: Adaptive Cards are highly interactive and allow users to perform actions directly within the card, such as submitting forms, responding to surveys, or acknowledging tasks. This level of interactivity is not typically available in traditional emails.
• Improved User Experience: Adaptive Cards provide a more engaging and visually appealing way to present information compared to plain text emails. Users can see structured data, images, buttons, and input fields, resulting in a better user experience.
• Platform Consistency: Adaptive Cards are designed to adapt their layout and appearance based on the platform they are viewed on. This ensures a consistent and optimized user experience across various services, including Microsoft Teams, Outlook, and mobile apps.
• Real-time Updates: Adaptive Cards can display real-time data and updates. For example, you can use Adaptive Cards to show live information like stock prices, weather forecasts, or the status of a process without users needing to open a separate application.
• Reduced Email Clutter: Using Adaptive Cards for routine notifications, surveys, or alerts reduces email clutter and keeps your email inbox focused on important communications. This can help improve email organization and reduce the chance of important messages being overlooked.
• Immediate Actions: Adaptive Cards often include actionable buttons that allow users to take immediate actions. This can be particularly useful for tasks that require a quick response, such as confirming attendance at a meeting or acknowledging a request.
• Integration with Microsoft Teams: Adaptive Cards seamlessly integrate with Microsoft Teams, making it easy to share information and interact with team members within the Teams environment. You can post Adaptive Cards in Teams channels, chats, and group conversations.
• Simplified Data Collection: When using Adaptive Cards for forms or surveys, the data collected from users can be automatically processed and integrated into other workflows, databases, or applications. This streamlines data collection and eliminates the need for manual data entry.
• Customization and Branding: Adaptive Cards can be customized to match your organization’s branding and style, creating a consistent and professional appearance for your communications.
• Reduced Cognitive Load: Adaptive Cards present information in a structured format, reducing cognitive load by making it easier for users to understand and respond to the content. This can lead to more effective communication and better user engagement.

Adaptive Cards in Power Automate offer a more interactive, visually appealing, and platform-agnostic way to convey information, collect data, and engage with users. They are particularly well-suited for scenarios where traditional emails may not provide the same level of interactivity or user experience.

Adaptive Cards in Power Automate: Practical Demos

By now, we have learned about adaptive cards in Power Automate—what is it and how to work with adaptive cards theoretically? Now, let us work with practical examples.

Example: Create your first adaptive card: Post an adaptive card to a Teams channel and wait for a response

Create a manually triggered instance of cloud flow.

Add the “Post adaptive card and wait for a response” Microsoft Teams action.

Note:

• First time, the connection will take sometimes to login to the data connection.

Select the Team and the Channel to which you’d like to post the card.

Configure the below parameters in the “Post adaptive card and wait for response” action:

• Post as: Flow Bot; here the other options are “Power Virtual Agents (Preview)” and “Enter custom value“.
• Post in: Channel; here the other options are “Chat with flow bot“, “Group chat” and “Enter custom value“.
• Message: This is adaptive card JSON text, shown below the screenshot.
• Update message: This is optional; we can go with the default text, “Thanks for your response!”
• Team: Select your team; here you will see the list of teams where the flow creator account has access.
• Channel: Select your channel; here you will see the list of channels where the flow creator account has access.

Adaptive card JSON Message template:

Use this adaptive card template if you want to collect data from employees or team members using the Power Automate adaptive card poll:

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "Poll Request",
            "id": "Title",
            "spacing": "Medium",
            "horizontalAlignment": "Center",
            "size": "ExtraLarge",
            "weight": "Bolder",
            "color": "Accent"
        },
        {
            "type": "TextBlock",
            "text": "Header Tagline Text",
            "id": "acHeaderTagLine",
            "separator": true
        },
        {
            "type": "TextBlock",
            "text": "Poll Header",
            "weight": "Bolder",
            "size": "ExtraLarge",
            "spacing": "None",
            "id": "acHeader"
        },
        {
            "type": "TextBlock",
            "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum lorem eget neque sollicitudin, quis malesuada felis ultrices. ",
            "id": "acInstructions",
"wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Poll Question",
            "id": "acPollQuestion"
        },
        {
            "type": "Input.ChoiceSet",
            "placeholder": "Select from these choices",
            "choices": [
                {
                    "title": "Choice 1",
                    "value": "Choice 1"
                },
                {
                "title": "Choice 2",
                "value": "Choice 2"
            },
                {
                    "title": "Choice 3",
                    "value": "Choice 3"
                }
            ],
            "id": "acPollChoices",
            "style": "expanded"
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Submit",
            "id": "btnSubmit"
        }
    ]
}

 

You need to change the above template as per your needs. For this demo, I will show how to conduct a poll to collect car choice data from employees, and according to this, I will change the template.

Make the following replacements in the above adaptive card template JSON:

Text to change	New text
Header Tagline Text	Your Poll Name Example: Power Automate Poll
Poll Header	Your Poll Header Example: Preferred Car Model
Poll Question	Your Poll Question Example: Please vote on your preferred car model from the choices listed here.
Replace the latin text with a reason, or business context, related to why you are conducting the poll.	Your poll description example: We are polling our employees in order to determine if we should provide personalized parking places that are sized for the most popular cars.
Choice 1 (replace in both places)	Your Poll Choice 1 example: Tesla
Choice 2 (replace in both places)	Your Poll Choice 2 example: Lexus
Choice 3 (replace in both places)	Your Poll Choice 3 example: Honda

Do not remove any quotation marks when you do the replacements. You can revise the car choices to suit your needs.

Modified adaptive card JSON for car poll

After changing the text, the adaptive card JSON should be like below:

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "Poll Request",
            "id": "Title",
            "spacing": "Medium",
            "horizontalAlignment": "Center",
            "size": "ExtraLarge",
            "weight": "Bolder",
            "color": "Accent"
        },
        {
            "type": "TextBlock",
            "text": "Power Automate Poll",
            "id": "acHeaderTagLine",
            "separator": true
        },
        {
            "type": "TextBlock",
            "text": "Preferred Car Model",
            "weight": "Bolder",
            "size": "ExtraLarge",
            "spacing": "None",
            "id": "acHeader"
        },
        {
            "type": "TextBlock",
            "text": "We are polling our employees in order to determine if we should provide personalized parking places that are sized for the most popular cars.",
            "id": "acInstructions",
"wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Please vote on your preferred car model from the choices listed here.",
            "id": "acPollQuestion"
        },
        {
            "type": "Input.ChoiceSet",
            "placeholder": "Select from these choices",
            "choices": [
                {
                    "title": "Tesla",
                    "value": "Tesla"
                },
                {
                "title": "Lexus",
                "value": "Lexus"
            },
                {
                    "title": "Honda",
                    "value": "Honda"
                }
            ],
            "id": "acPollChoices",
            "style": "expanded"
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Submit",
            "id": "btnSubmit"
        }
    ]
}

Once you complete the configuration of the “Post adaptive card and wait for a response” action, add the “Send an email (V2) or Send an email (V3)” action as per your permission to the send an email notification action.

The send an email notification action should have the following configurations:

Now, let’s run this flow.

You may notice the flow run is not completed because here we have used the action “Post adaptive card and wait for a response,” which means it is waiting for the user’s response to get it completed.

Now, let’s move on to the team channel that we have configured in this action. There,  we can see a poll request has been posted in the specified team’s channel. See below:

 

Now, let’s submit the poll. I will select the car as “Lexus”.

Once we submit the answer, we will get the below automatic message in the team channel.

Now, let’s go to see the flow’s running status. We can see that the flow ran successfully.

Now, let’s go to the email box. We can see that the car choice poll response email has arrived.

Example: Notification without User Action – Post card in a chat or channel

Scenario: You want to send a notification to your team about an upcoming holiday.

For this scenario, we need to add the “Post card in a chat or channel” action, as we don’t need any action from the user.

Configurations in the “Post card in a chat or channel” are as below:

Post as: Flow bot, options are available in the Post as, as below:

• User
• Flow bot
• Power Virtual Agents (preview)
• Power Apps (Preview)
• Enter custom value

Post card in a chat or channel Post as configurationPost in: Channel, options are available in the Post in, as below:

• Channel
• Chat with Flow bot
• Group chat
• Enter custom value

• Team: Select your team from the available teams you have access to where you want to post this adaptive card.
• Channel: Select your channel from the available channels you have access to where you want to post this adaptive card.
• Adaptive Card: Use the below Adaptive Card JSON for Holiday Notification:

{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Upcoming Holiday",
"size": "large",
"weight": "bolder"
},
{
"type": "TextBlock",
"text": "Reminder: The office will be closed on December 25th, Monday, for Christmas Day.",
"wrap": true
}
]
}

Now, let’s run the flow.

Once the flow runs successfully, we can see the below adaptive card in the specified team channel.

Example: Task Assignment with User Action – Post adaptive card and wait for a response

Scenario: You want to assign tasks to team members and have them acknowledge and complete the tasks.

Add an “Post adaptive card and wait for a response” action and use the below adaptive card JSON for task assignment:

{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Task Assignment",
"size": "large",
"weight": "bolder"
},
{
"type": "TextBlock",
"text": "Please complete the following task:",
"wrap": true
},
{
"type": "TextBlock",
"text": "Task: Review the project proposal",
"wrap": true
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Mark as Completed",
"data": {
"action": "markCompleted",
"taskId": "123"
}
}
]
}

Now, let’s start running the flow. Once the flow has started, we can see the below adaptive card in the specified team channel.

Once we click on the “Mar as Completed” button, the flow will be completed successfully.

Example: Meeting Reminder with User Action – Post adaptive card and wait for a response

Scenario: You want to send meeting reminders to your team with the option to confirm their attendance.

Adaptive Card JSON for Meeting Reminder:

{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Meeting Reminder",
"size": "large",
"weight": "bolder"
},
{
"type": "TextBlock",
"text": "You have a meeting at 2:00 PM today.",
"wrap": true
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Confirm Attendance",
"data": {
"action": "confirmAttendance",
"meetingId": "456"
}
}
]
}

Now, let’s start running the flow. Once the flow has started, we can see the below adaptive card in the specified team channel.

Once we click on the “Confirm Attendance” button, the flow will be completed successfully.

Note:

• In the above adaptive card JSON demos, we have used the hard-coded value. We can also pass the values dynamically from the SharePoint Online List or Document Library or from any data sources where the connection reference account has access.

Reference:

• Create your first adaptive card

Summary: Adaptive cards in Power Automate

Thus, in this article, we have learned about the adaptive cards in Power Automate and how to post adaptive cards in Microsoft Teams using the Power Automate flow. To summarize this article, we can conclude as follows:

• How to post an adaptive card in the Teams channel and wait for the user response using the “Post adaptive card and wait for a response” Microsoft Teams action
• How to post an adaptive card in a Teams channel without waiting for any user responses, just for notification purposes, using the “Post card in a chat or channel” Microsoft Teams action

See Also: Power Platform Articles

If you found this article helpful and enjoyed it, please consider sharing it with your friends and colleagues. Please don’t forget to subscribe to our site to receive our latest articles directly in your inbox. 🙂

About Post Author