Microsoft explains that adaptive cards are platform-agnostic snippets of UI, authored in JSON, that apps and services can openly exchange. When delivered to a specific app, the JSON is transformed into native UI that automatically adapts to its surroundings. It helps design and integrate light-weight UI for all major platforms and frameworks.

What is very interesting with adaptive card is that you can use it in Microsoft Teams to interact with your users. Basically, you can send text, forms, etc. and parse their answer. Then, you can easily use their answer to use it in your Microsoft Flow.

In this article, I will explain how to create an adaptive card, and how to send it in Microsoft Teams.

Getting Started

If you are wondering how to create the adaptive card JSON structure, then it is very simple. Thanks to the adaptive cards designer: you can design and build your card through a web interface and then just copy/paste the JSON code.

Adaptive Cards

Let’s start by creating a new card, click “New card”

Let’s start by creating a new card, click “New card”

We have a blank adaptive card that appears in the console

Blank adaptive card

  • On the left, you can notice the different cards elements that you can just drag and drop into your card
  • On the bottom, you can notice when you add new card elements, then the card payload editor will update the JSON schema code automatically
  • On the right, you can notice the card structure with the properties panel in which you can customize the card elements

Let’s start by adding a TextBlock element into the adaptive card to confirm that the JSON code will be updated

Let’s start by adding a TextBlock element

Now, If you want to have a preview of your adaptive card, then just click on “Preview mode”

Preview of your adaptive card

To exit from the preview mode, just click again on “Preview mode”. That’s very simple!

You can customize easily your TextBlock, just scroll down and you will notice the “style” section, you can modify the color, the size, etc.

You can customize easily your TextBlock

We can add the action by clicking “Add an action” (don’t forget to uncheck the TextBlock to see the action menu)

Add an action

Click on “Action.OpenUrl” and then you can customize your URL. In this example, I add a link to the ITSM portal in order to check the tickets.

Click on “Action.OpenUrl”

As you can see, building adaptive cards is very simple, so now, I will publish my card.

Open a new tab in your web browser, and go to Power Automate to create a new blank flow.

Add a “recurrence” trigger, in my case, I want a notification each morning


Then click on “New step”

Click on “New step”

Choose an operation

Then, you must select how you want to post your card

  • Post as a user means that the card will be posted on behalf of you
  • Post as flow bot means that the card will be post via the Power Automate bot

Show options

And then, you must select where do you want to post your card. You can post the card on a channel, in a group chat, …

Select an option

To finish, you need to copy/paste your JSON code from the adaptive cards designer to the Adaptive Card field and save the flow.

Copy/paste your JSON code

Let’s test the flow manually to confirm if it works

Save the flow

You can easily adapt adaptive cards depending on your needs.

Note that if you get this message:

Note that if you get this message

then modify the version of your JSON code in the adaptive cards designer. Select 1.4 or 1.3 and it will work.

Modify the version of your JSON code in the adaptive cards designer

Back to blog