Create Dynamic Adaptive Cards in Teams using Power Automate Microsoft Office 365 image 20

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 reponse action will be the action to create the Adaptive Card.

Create Dynamic Adaptive Cards in Teams using Power Automate Microsoft Office 365 image 15

This will create an adaptive card that look like this:

Create Dynamic Adaptive Cards in Teams using Power Automate Microsoft Office 365 image 16

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.

Create Dynamic Adaptive Cards in Teams using Power Automate Microsoft Office 365 image 19

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:

Create Dynamic Adaptive Cards in Teams using Power Automate Microsoft Office 365 image 20

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

Create Dynamic Adaptive Cards in Teams using Power Automate Microsoft Office 365 image 21

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

Dynamic Adaptive Cards

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:

Create Dynamic Adaptive Cards in Teams using Power Automate Microsoft Office 365 image 23

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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: