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.

          

Property	What is expected
Environment	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”.  e.g. /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!”
Details	“Your response has been registered.”

Example

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	https://tenantname.sharepoint.com
Method	GET
URI	_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.