Render Adaptive Card Images from SharePoint Library using Power Automate

[Priyaranjan]

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.

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.

In today’s article we will see how to use an image stored in SharePoint and render it within the adaptive card.

Use Case

I have uploaded an image to the Document Library which I would want to use as the Header or Banner of the Good Morning Message that goes out to the users. To achieve this we will use a scheduled Flow that runs everyday at a specified time and picks the image from the library to form the header of the card and add the good morning wish just below the image resulting in a simple Wish Card to start off the day

Implementation

Let’s use the recurrence trigger to start off with the scheduled flow.

We will then get the Banner/Header image which is stored in the library using Get File action

Since the image content is returned as an object, we will use the compose action and use the below expression to convert it to a base64 string

base64(outputs('Get_file_content')?['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

As we can see we have just 2 elements in the JSON:

• Image : That holds the Header Banner image from SharePoint Library
• RichTextBlock : Which contains the morning wish message

Adaptive Card JSON

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "Image",   
           "url": "data:image/png;base64,@{outputs('Compose_-_Convert_Image_to_Base_64')}",
           "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"
}

Thus the overall flow would look like below :

Test the flow

Since it is a scheduled flow, we will do a manual trigger to test the flow. It will pick the Banner image from SharePoint Library, create the adaptive card using the JSON payload and sent it to Teams Chat.

Note :

At times if the total JSON payload is over 28KB it will throw the below error and it could be because of the size of the image you are using.

This is by design and there is no way as of now to work around the payload and the Engineering team is working on this. In such a situation an easy workaround would be to use a tool like this to bring the Image size below 20Kb.

Summary

Thus we saw how to use an image stored in SharePoint as a banner in the adaptive card that we sent to Microsoft Teams