Adaptive Card: Fetch and Display User Profile Image

2024-01-17

Introduction
Problem Statement
Solution
Test the flow
Summary

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 extent 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 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 which will be used in the Adaptive Card Image Type.

We will create a scheduled flow that sends out a Morning Wish everyday to the end user via an adaptive card in Teams chat which will have his profile photo as a well as the morning wish text.

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 workaround 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

Share via