Skip to main content

Notifications

Render Adaptive Cards Images from Azure Storage

 

Priyaranjan_13-1647964838493.png

 

Introduction

Business Use Case

Implementation

Create the flow

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 case is to fetch an image and display it in the card.

Business Use Case

 

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 an header image that we pick from the Azure Storage

 

Priyaranjan_0-1647964832902.png

 

Implementation

 

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

Priyaranjan_1-1647964832906.png

 

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

 

Priyaranjan_2-1647964832910.png

 

 

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

 

Priyaranjan_3-1647964832916.png

 

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.

 

Priyaranjan_4-1647964832919.png

 

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

 

Priyaranjan_5-1647964832923.png

 

The uploaded image will now appear within the container.

 

Priyaranjan_6-1647964832925.png

 

 

Next step is to generate a Shared Access Signature which will act as a restricted URI which you can use for accessing the recently uploaded blob image. Click on 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. 

 

 

Priyaranjan_7-1647964832930.png

 

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.

 

Priyaranjan_8-1647964832931.png

 

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.

 

Priyaranjan_9-1647964832934.png

 

 

Create the flow

 

Lets create a scheduled flow that will run everyday at a specified time.

Priyaranjan_10-1647964832936.png

 

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.

 

 

 

{
 "type": "AdaptiveCard",
 "body": [
 {
 "type": "Image",
 "url": "https://adaptivecardimagesrepo.blob.core.windows.net/adaptivecards/GoodMorningBanner.png?sp=r&st=2022-01-22T11:04:02Z&se=2022-12-30T19:04:02Z&spr=https&sv=2020-08-04&sr=c&sig=ZW8q%2BK1Ki%2BBN0XJqML0%2F6y8XiXc8izpJs0JUfNVtBPE%3D ",
 "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"
}

 

 

Priyaranjan_11-1647964832941.png

 

Test the flow

 

As it’s a scheduled flow lets, 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 :

 

Priyaranjan_12-1647964832944.png

 

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

Comments

*This post is locked for comments