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.

Business Use Case

One of the common use cases is to fetch an image and display it on 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 this article, we will create a scheduled flow that sends out Morning Wishes Card to an end-user which will have a header image that we pick from the Azure Storage

Implementation

Before we get into the development of the flow, let’s see how we can store the image in the azure storage. Head over to Azure storage and search for storage accounts

Specify the resource group and storage account name that will be used for the creation of a new account. Ensure that the name for the storage account is unique and in small letters. Click on review and create once the details have been filled out.

The provisioning would take some time and head over to the newly created storage account and click on containers.

Click on create which will open the right panel where we can specify the Blob Storage Container name and set the access level to Private.

Click on create to add the container which will let you upload the image as a blob to it. Click on Upload to add the image

The uploaded image will now appear within the container.

The next step is to generate a Shared Access Signature which will act as a restricted URI that you can use for accessing the recently uploaded blob image. Click on the shared access token that will open up the below window where you can generate the SAS token. Specify the permission as Read and set the expiry time for the token that we will generate now. Also, ensure to select the protocol as HTTPS.

Click on Generate SAS token and URL button which will create the token for use. Copy the Blob SAS Token value and store it safely.

As a final step, head over to the uploaded image and copy the URL to a Notepad. Append “?<SASToken>” to this URL to generate the final URL that will be used within the adaptive card.

Create the flow

Let’s create a scheduled flow that will run every day at a specified time.

We will next add a Post adaptive card in a chat or channel action where we will post the Adaptive Card JSON that dictates the content and structure of the Card. We can use the adaptive card designer for designing the JSON. The JSON used for the card is as shown below. The details of working with JSON have been described previously in an article here.

Test the flow

As it’s a scheduled flow let, manually test the flow. It will trigger the flow which picks the image from the direct link to the blob image and add it to the card JSON which gets posted and rendered in the teams as below :

Summary

Thus we saw how we can store an image in an Azure Container and use it within an adaptive card that gets posted to Microsoft teams via a scheduled flow