Create Dynamic Adaptive Cards in Teams using Power Automate

Recently I looked at the basics of Adaptive cards, but what if you want more dynamic adaptive cards in Teams that respond to user input?

Adaptive Cards

When you create an adaptive card you send some json that describes the adaptive card to Microsoft Teams. But quite often you might have a requirement where your adaptive card changes once a user has responded.

I’m going to use the example of tasks in this post.

Using the Post an Adaptive Card to a Teams channel and edit for a response action will be the action to create the Adaptive Card.

This will create an adaptive card that look like this:

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2",
    "type": "AdaptiveCard",
   "body": [
        {
            "text": "A new task has arrived",
            "type": "TextBlock"
        },
        {
           "facts": [
               {
                    "title": "Task",
                    "value": "Task 2"
                }

           ],
            "type": "FactSet"
        }
    ],
    "actions":[
       "title":"Assign to me",
       "type":"Action.Submit",
       "data":"test"
    ]
  
}

Now what I want to do is simple. When someone clicks on the Assign to me I want the flow to update my adaptive card to say who picked up the task. What I need is a dynamic adaptive card.

Dynamic Adaptive Cards

To create a Dynamic Adaptive Card I could create a second action similar to the first one with the following code:

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2",
    "type": "AdaptiveCard",
   "body": [
        {
            "text": "A new task has arrived",
            "type": "TextBlock"
        },
        {
           "facts": [
               {
                    "title": "Task",
                    "value": "Task 2"
                },
 {
                    "title": "Assigned",
                    "value": "Yes"
                }
           ],
            "type": "FactSet"
        }
    ]
  
}

But now I could will end up with two Adaptive Cards once a user has pressed the Assign to me button.

That is not what we want!

So i updated my first Adaptive card action and removed that second action again. My flow is now like this:

When I run this action I get my adaptive card again.

And when I click on the Assign to me button I get the following card to replace the above card:

Ok, that is quite nice, but just updating the adaptive card is often not good enough. We will need to get our flow to pick up the details from the response.

One thing that is a bit of a shame though is that the Update Message takes text, but it doesn’t seem to be taking a json format like the original message. It would be nice if the original message could be extended rather than replaced with a less informative message.

The Dynamic content will help us a bit here:

When we look at the code that is returned by the adaptive card action we can get to details like who clicked on the button.

{
  "responseTime": "2021-03-11T09:53:16.0265389Z",
  "responder": {
    "objectId": "091e5a70-3d89-40ff-8fb0-e3d84ff7669d",
    "tenantId": "3975c6a6-11e8-4113-8429-1847f555ae47",
    "email": "pieter@tenant.onmicrosoft.com",
    "userPrincipalName": "pieter@tenant.onmicrosoft.com",
    "displayName": "Pieter Veenstra"
  },
  "submitActionId": "Assign to me"
}

Knowing who clicked on the button we can now get the flow to assign the task to the person who clicked that button and complete the assigning process without the need for the user to leave Teams.