Introduction
Adaptive cards give us the option to share information in a platform-agnostic way using JSON. In our previous articles, we did see how we can share basic Adaptive cards into Microsoft Teams using Power Automate. In this article, we will see how we can extend the implementation by adding images to the card.
One of the common use cases is to fetch the User Profile Image of the user and display it in the card.
Problem Statement
Images can be rendered in multiple ways in the adaptive card like:
- Store in SharePoint Document library and use the Base 64 image content in Card
- Use Direct URL to a publicly hosted file within the card. But do note that, you will have to test this scenario thoroughly as not all direct links would work as expected. Direct shareable links in Onedrive/SharePoint and some of the Image hosting sites don’t render in the cards
- Store Image in Azure Storage and use the image content in the card.
Same way, we can get the direct URLs to the user profile image in many ways. If we hit the below URLs in the browser, it would render the image:
However, if we use this direct URL in the Image Type of the Adaptive card, it will not be rendered in the card:
Solution
To overcome this, we will make use of the Get User Profile Photo action and get the image content that will be used in the Adaptive Card Image Type.
We will create a scheduled flow that sends out a Morning Wish every day to the end user via an adaptive card in Teams chat which will have his profile photo as well as the Good Morning Wish.
Followed by that, we will add the Get User Photo action and provide the UPN of the user whose photo we need to pick and show in the card
This action will output the image content which will be an object and hence we need to convert that into base64 string using the below compose action and we will use the expression:
| base64(outputs(‘Get_user_photo_(V2)’)?[‘body’]) |
Final step is to create the JSON that we will use in the Adaptive card and we can do this using the Adaptive card designer .
| { “type”: “AdaptiveCard”, “body”: [ { “type”: “Image”, “style”:”Person”, “url”: “data:image/png;base64,@{outputs(‘Compose_-_Convert_Image_to_Base_64’)}”, “size”:”Medium”, “horizontalAlignment”: “Center” }, { “type”: “RichTextBlock”, “inlines”: [ { “type”: “TextRun”, “text”: “Hello Priyan, Good Morning !”, “size”: “Large”, “weight”: “Bolder” } ], “horizontalAlignment”: “Center” } ], “$schema”: “http://adaptivecards.io/schemas/adaptive-card.json”, “version”: “1.2” } |
As we can see we have just 2 elements in the JSON:
- Image : That holds the user profile image
- RichTextBlock : Which contains the morning wish message
Test the flow
Since it is a scheduled flow, we will do a manual trigger to test the flow. It will pick the user profile photo, create the adaptive card using the JSON payload, and sent it to Teams Chat.
Summary
Thus, we saw how to work around the issue related to picking the user profile image directly from the System URL and used the Get User Photo Power automate action to fetch the image and used it in the JSON payload of the adaptive card to render the user image
