Get started with adaptive cards in Power Automate

Getting started with adaptive cards can be difficult. In this post i have written some guidelines to get you started.

Adaptive cards

You might have seen these cards in Microsoft teams that ask you to do things or maybe they just inform you of an update.

You can create these cards from a flow within Power automate. int his post I will look at how to get started. But before I do that it is important to recognize the different elements within an adaptive card.

Adaptive cards in Power Automate

Power automate gives you 5 actions to create Adaptive Cards. if you want to get some information back from the user you will want to use the … and wait for a response actions.

But all of these actions might look easy, but creating an adaptive card means that you have to get familiar with the Adaptive Card json schema that has been used. When you look at that the first response will almost 100% be: What is that all about?!

The Adaptive Card Designer

Rather than learning how to put the json together you can also use the Adaptive Card Designer.

This will help a lot with getting the basics of the Adaptive Card right.

Adaptive Cards elements

Like with all json we will have to start with an empty object

{
}

But this is not an adaptive card yet! We will have to add some more to get the body of the adaptive card action completed.

When we add the following properties we have an adaptive card. I’ve left the body out. This is where we are going to create the content of the adaptive card.

{
    "type": "AdaptiveCard",
    "body": [ ...
               ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.3"
}

If we wanted to create a card that displays a text then we could add some more json code as shown below and we have our first usable Adaptive card ready by displaying a text in bold.

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "This is a test"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.3"
}

There are still quite few more properties that can be set at the root level of the card that we are creating, things like language or back ground image the Scheme Explorer will give the further details of these properties.

The Body of the Adaptive Card

I will now focus on the body of the adaptive cards. We already saw the TextBlock in the earlier example. We didn’t go through all the available properties though. You could for example set the colour of the of the text block or how you want to align the text.

But there are more things that you can add to your card. You could add any of the following:

• Image
• Media
• MediaSource
• RichTextBlock
• TextRun

Even though TextRun is available within the schema, it isn’t something that works within Microsoft Teams.

Wait for a response

So far we have seen adaptive cards the hard way. When you use the Post an Adaptive Card to a teams user and wait for a response we actually get an easier to use interface.

Hitting the Create Adaptive Card button in the action below …

… Will give you this UI that looks very similar to the Adaptive Cards designer that I mentioned earlier. for this feature to work you will need to enable the experimental preview features.

This would give a personal adaptive card that looks like this.

This card will make the flow wait for a submit. The flow will then collect the infromation submitted by the user.

The above card matches the following json. Using the UI is so much easier to use.

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.2",
    "body": [
        {
            "type": "TextBlock",
            "text": "Tell us about yourself",
            "weight": "Bolder",
            "size": "Medium"
        },
        {
            "type": "TextBlock",
            "text": "We just need a few more details to get you booked for the trip of a lifetime!",
            "isSubtle": true,
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Your name",
            "wrap": true
        },
        {
            "type": "Input.Text",
            "id": "myName",
            "placeholder": "Last, First",
            "spacing": "None"
        },
        {
            "type": "TextBlock",
            "text": "Your email",
            "wrap": true
        },
        {
            "type": "Input.Text",
            "id": "myEmail",
            "placeholder": "youremail@example.com",
            "style": "Email",
            "spacing": "None"
        },
        {
            "type": "TextBlock",
            "text": "Phone Number"
        },
        {
            "type": "Input.Text",
            "id": "myTel",
            "placeholder": "xxx.xxx.xxxx",
            "style": "Tel",
            "spacing": "None"
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Submit"
        }
    ]
}

Tokens

Within the Adaptive cards it is also possible to use tokens:

"body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "${title} ${createdUtc}"
        }
    ],

There are a number of tokens avialable.

$title = The title of the card

$createdUtc is a time stamp like 2021-02-19T06:08:39Z

But when you use the Teams actions in a flow you can create your own tokens. In this case I made a token ( Message) called test.

Now within the Adaptive Card UI, I can use this token

But there is so much more related to Adaptive Cards. I hope that this post will get you started.