How to Use Microsoft Lists Image Columns in Adaptive Cards

By João Ferreira Feb 10, 2024 Microsoft Lists 0 Comments

Adaptive cards are a great way to create interactive and engaging experiences for your users in Microsoft 365. You can use adaptive cards to display data from various sources, such as SharePoint and Microsoft Lists, in a rich and customizable way.

However, using images stored in SharePoint in adaptive cards is not an easy task, as images can be stored in different locations with different ways to access them. For example, you may want to use an image, stored in a list image column, but how do you get the direct link to the image file that can be rendered in the adaptive card?

When I was working on a cafeteria menu for Viva Connections, I ran into a problem. I wanted to use a Microsoft List to store the dishes and their images, and then display them in an adaptive card. But how could I get the direct link to the image file from the list? I couldn’t find an easy solution for this. So, I came up with a workaround. I used Power Automate to create a flow that would automatically write the image link to another column in the list, whenever a new item was added. This way, I could access the image link from the adaptive card without any hassle.

1. In your list create a new text column that will be used exclusively to store the link to the image. When creating a new item leave this value empty as it will be written by a Power Automate flow
2. Create a new Automated flow in Power Automate and select the trigger When an item is created or modified
   

   

3. The second action must be Send an HTTP request to SharePoint, this will be used to get the image you added to the image column. You can learn more about where images are stored in Microsoft Lists here
   

   

4. Parse the result from the HTTP request using the Parse JSON
   

   

5. Initialize a variable to store the value for the image. If in your list you will only have a image column and no attachments you can assign the server ServerRelativeUrl directly to your image without doing any validation
   

   

6. Update the original list item using the action Update item and store the URL to the image in your auxiliar column, combining the tenant URL with the value stored in your variable
   

   

The result will be like what you see in the following image, you will have your image column and also the direct link to the image visible in the list.

Use the image link instead of the image column in your adaptive card. This ensures that the list images show up correctly.