Getting started with Adaptive cards

Table of contents

Examples of adaptive cards
When to use adaptive cards
Adaptive cards vs. PowerApps cards
Create adaptive cards
Important things to remember
Copy the complete JSON from below
Adding it to your flow
Adding dynamic data into the message
Who is the sender / recipient of the card?
Processing adaptive card outputs
Further reading
Get into it
Microsoft resources:

☝

TL;DR - Imagine having a dynamic, interactive way to present information within your applications that not only looks great but also adapts to different platforms and devices. That's exactly what Adaptive Cards offer! These versatile UI snippets allow developers to create rich, engaging content that can be seamlessly integrated into various Microsoft 365 services like Teams or Outlook.

Examples of adaptive cards

You will mostly use adaptive cards in Microsoft Teams by sending them with Power Automate. They can be used to simply display information or to ask users to input data. That data can then be saved in SharePoint or used elsewhere. Here you can see to simple examples in Microsoft Teams.

Adaptive Card displaying flight information.

Adaptive Card asking a user to input their first and last name, email and phone number.

Technically, you can use adaptive cards in other areas like Outlook or Azure Bots, but I will focus on Microsoft Teams here. Outlook actionable messages are a great way to bring modern messages to your Outlook users. Take a look here:

Adaptive Cards in Outlook (Actionable Messages)

‣

When to use adaptive cards

‣

Adaptive cards vs. PowerApps cards

Create adaptive cards

The creation of adaptive cards is done in an online designer: https://www.adaptivecards.io/designer/. By using drag-and-drop to place display and input elements, you can create fully custom cards. You can choose from various input types like text or date, as well as buttons that open a URL or submit data to a database.

When you drag-and-drop elements into designer, those elements will automatically get put into an overall JSON schema. That schema describes your adaptive card. You will need to copy this later on to your Power Automate workflow.

Important things to remember

Choose the correct host app. In most cases this will be Microsoft Teams:

Check your designed card in light and dark mode by using the Theme dropdown.
Be aware of the version at the top right. The versions mainly dictate the features available to use. Depending on your selected host, you can only use up to specific version. As of February 2025, Microsoft Teams supports max. 1.5 (Check here if necessary).
If you are using inputs and want to process them later, give every input an Id. An Id is a unique identifier that you need to use later in your flow to read the entered data.
To help the user understand what they are entering in what input, give every input a label.

Copy the complete JSON from below

Adding it to your flow

As of now, you will find three main adaptive card actions in Power Automate. There are also other actions with cards and triggers, which I will not go into right now.

Post card in a chat or channel

This is used to send information to a user or channel. The information is read-only.

Post adaptive card and wait for response

This is used to interactively send information to a user or channel, meaning users can input data in form of text, choices, dates and more. Remember here, that flows do not wait indefinitely.

Update an adaptive card in chat or channel

This can be used to update an existing card, for example when a user inputs data and you want to respond with that data as a confirmation. Only available in group-chat or channel.

Adding dynamic data into the message

If your flow triggers from a SharePoint List and you want to use a column value, feel free to do that like you always would. Just make sure you keep the correct JSON schema. After inserting dynamic inputs, check all commas and quotation marks.

🚨

If you want to use outputs from your adaptive card, like a entered text, I recommend adding the dynamic contents AFTER you use its outputs in actions following the adaptive card. As of February, 2025 there seems to be a bug, where outputs are not suggested to you, when you insert dynamic content into the card. Im guessing that the flow designer thinks the JSON schema is broken.

Dynamic input from a users action in adaptive card schema.

Who is the sender / recipient of the card?

You can send cards from the Flow-Bot, a User or a Copilot Studio Agent. These are the possible recipients of your message in Microsoft Teams.

Flow-bot to user, group chat or channel. User-directed cards will go to the users “Workflows” chat. For group-chat directed cards, you need to have the group-chat id.
User to group-chat or channel. This will include a hint of the flow owners name.
Bot to User. The bot will look like a 1:1 chat for the recipient and include the bots name.

Processing adaptive card outputs

If you did not insert dynamic content into the JSON, you can choose your outputs with the Id you gave them in any following actions. If you cant see your input elements or their ids, check your ids and if you already inserted data into your adaptive card schema. If so, either remove it or use an expression to get your data.

Outputs form the adaptive card are available.

If not available, this is the expression you can use. Replace your action name within body() and the id of your input after data/.

outputs('Post_adaptive_card_and_wait_for_a_response')?['body/data/textName']
outputs('Post_adaptive_card_and_wait_for_a_response')?['body/data/selecteddate']
outputs('Post_adaptive_card_and_wait_for_a_response')?['body/data/favoritenumber']
outputs('Post_adaptive_card_and_wait_for_a_response')?['body/data/people-picker']

🚨

All outputs are strings - format the outputs according to your needs. If you entered a number your adaptive card will return it as a string. If your SharePoint list expects a number, format that output with int() or float() to make it a number.