Skip to main content

Create Customized Adaptive Cards for Power Automate Approvals in Microsoft Teams

Microsoft recently released a fantastic new feature with which we can action approval requests directly in Teams. This is great news, and no doubt moves us further away from the days of having to trawl through our email to locate an old approval request.

But, what customization options are available for approval requests? Can we change the way these look? And can we create our own version of the approval adaptive cards?

This blog covers how you can create a customized version of the adaptive card for Power Automate approvals.

So, how does it work?

Firstly, we need to look at the json payload that generates the out-of-the-box approval adaptive card. This can be extracted by initiating a variable of type string and then adding and configuring a “Create an approval” action. We will then set the value of our variable to “Teams Adaptive Card”.

Our flow should look like the following

If we now test run the flow and check the value of our variable, we should see the json payload in the "INPUTS" > "Value" as shown below.

We can copy this into Virtual Studio Code and reformat. We can now gain an understanding how this works.

I have also converted this into a schema which is accessible via my GitHub, along with some custom samples located here.

The key part of the adaptive card is the “ActionSet” section and in particular the “data” properties listed against each action, such as “Approve” and “Reject”. I have annotated what is expected against each property in the table below.



What is expected


Environment Name / GUID. This can be retrieved by navigating to Power Automate and clicking on “My flows”. Within the URL copy everything between “/environments/” and “/flows”. 


/manage/environments/<copy this value>/flows

Approval Title

Create an Approval > {Title}

Approval Link

Create an Approval > {Respond link}

Approval Name

Create an Approval > {Approval ID}

Item Link

Create an Approval > {Item link}

Item Link Description

Create an Approval > {Item link description}

On Behalf Of Notice

When an item is created > {Created By Display Name}

Creator Name

When an item is created > {Created By Display Name}

Creator Email

When an item is created > {Created By Email}

Creation Time

When an item is created > {Created}

Message Title

“Thank you!”


“Your response has been registered.”


As long as we have a fully functional “
ActionSet” to handle the approvals, everything else such as the card aesthetics can be customized. Let us now drop in the “Post your own adaptive card as the Flow bot to a user (preview)” action and populate the Message field with our updated json payload as shown below.

If we now test run the flow, our adaptive card should appear within Teams from the Flow Bot. It should look pretty much identical to the out-of-the-box approval version.

Let us now have some fun and create some customized versions of this adaptive card.

Shown below are some examples of what I have created to give you an idea of what is possible.

For each of these quick samples I used the adaptive card designer, and inserted the “ActionSet” code block discussed above.

You can download the json for each of these examples via my GitHub link.

Let us see it in action

Our approval request:

Request approved:

Conclusions and lessons learnt

Sometimes scenarios may arise in which the out-of-the-box approval card needs some form of customization to fulfill a requirement. Previously perhaps the approver was required to click a link and navigate away to review more details, but now it seems in some, if not most, cases we can surface all pertinent details within the approval adaptive card.

Pulling a user’s photo is more difficult than what it needs to be

At the time of writing this blog, pulling a user’s photo from SharePoint will only work in the web version of Microsoft Teams. The desktop client will return a blank image placeholder.

According to the following article it is because SharePoint expects an access token when a request is received before sending back the user’s picture. This is handled automatically in the web version of Teams.

I have tried numerous methods to get this working and I have yet to find a reliable solution. One workaround I tried for this issue is to use the “Get user photo” action and then use a “Compose” action to encode the binary image data into Base64, as described here:

This particular workaround failed for me with an error stating “The payload is too large. Please make sure the size is less than 28KB”.

I tried a similar workaround that uses the “Send an HTTP request to SharePoint” action. I found this workaround at the following link and would like to credit FraserM for the solution.

Plug in the following values into the “Send an HTTP request to SharePoint” action

Site Address




_layouts/15/userphoto.aspx?size=S&username=[User's Email Address]

Within a compose action, encode the response from the “Send an HTTP request to SharePoint” action into Base64.

Then within the adaptive card render the image as a base 64 png.

At the time of writing this workaround appears to work okay for me. Hopefully at some point soon Microsoft will release an action that we can use to reliably embed profile pictures into Adaptive Cards, but until then this is the most reliable solution I have found.


  1. Wonderful article, many thanks! Was able to follow your steps.

    One thing looks strange to me - when you click an action in custom adaptive card, it turns in to default "Approvals" look. Have you find a way around this?


Post a Comment

Popular posts from this blog

Replace Power Automate Approval Emails with Adaptive Cards in Microsoft Teams

Microsoft recently released a personal app for Approvals within Teams. Please review this before investing time implementing something customized. If you are still interested in creating a custom adaptive card for an approval process check out the following blog for which this blog is a good precursor. With Microsoft Teams becoming an increasingly dominant force in collaboration, and one objective being the reduction of email, this blog covers how you can simply replace approval email notifications with dynamic adaptive cards in Teams. So, how does it work? I have created a sample SharePoint list using the “ Travel requests ” template and associated it with my Team as shown below. Within Microsoft Power Automate I have created an “ Automated cloud flow ” using the “ When an item is created ” trigger. The next step is to add the “ Create an approval ” action. I have personally configured this action as follows. Notice how I have set the “ Enable notifications ” to “ No ”. This wil

Customize list forms in SharePoint with JSON formatters

Back in the days of classic SharePoint we had a few options to customize list forms, such as JSLink. Up until recently our options to customize list forms in modern SharePoint were somewhat limited. Sure, we could use JSON to apply custom formatting to views and columns, but unless we leveraged tools, such as PowerApps or SPFx Application Customizers, it was impossible to style list forms. Microsoft has recently introduced JSON formatters for list forms and I think they are great, especially for requirements where a simple header or footer change may be required. In this blog we will cover what JSON formatters are, how we can leverage them and some useful examples to support our understanding. What are JSON formatters? When Microsoft introduced the modern version of SharePoint, capabilities like JSLink were no longer compatible and became obsolete. JSLink was useful because it allowed us to customize list views, forms and columns, and for some time there was a void until Micros

Using Microsoft Graph Open Extensions with PowerApps

This blog will cover how to create a lightweight application that will Create, Read, Update and Delete user profile data in Microsoft Graph by extending the “user” resource. Firstly, let us cover what exactly Graph Extensions are. Graph Extensions allow us to extend several graph resources, such as “user” and “message”, to capture additional data that we may need for our own application, without having to rely on an external data source. One benefit of using Graph Extensions over methods such as local storage is the roaming capability. Also, because the application properties are stored in the Graph, they can be leveraged across the whole Microsoft 365 platform. Because I am an aviation geek we will use “favorite aircraft” as an example scenario. Here is the high-level objective. A user can create, read, update and delete a property named “plane” The selection is saved as an extended property in the Microsoft Graph. Getting started Because we are interacting with the Mi