How to display user's photo in adaptive card with Microsoft Graph?

Question

How to display user's photo in adaptive card with Microsoft Graph?

Sally Chen 145 Microsoft External Staff

Hi,

I am creating a Teams Message Extension. I want to know how to display the user's photo on the adaptive card. The photo is retrieved from Microsoft Graph like this: https://graph.microsoft.com/v1.0/users/${id}/photo/$value

The part of adaptive card is as follows:


"type": "ColumnSet",

"columns": [

    {

    "type": "Column",

    "items": [

        {

        "type": "Image",

        "url": "path/to/photo",

        "altText": "profileImage",

        "size": "Small",

        "style": "Person"

        }

    ],

    "width": "auto"

    }
]

Thank you!

1 answer

Your answer

Answer 1

Prasad-MSFT 8,981 Microsoft External Staff Moderator

People icon helps to view the images of users in an Adaptive Card. You can insert an image and apply all the properties supported on images. People icon is supported in Teams mobile and desktop clients.

There are two types of people icons that are supported in an Adaptive Card:

Persona: If you want to show a single user in an Adaptive Card, it displays the people icon and the name of the user.
Persona Set: If you want to show multiple users in an Adaptive Card, it displays only the people icon of the users.

Ref: https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-format?tabs=adaptive-md%2Cdesktop%2Cdesktop1%2Cdesktop2%2Cconnector-html#people-icon-in-an-adaptive-card

Thanks,

Prasad Das

*************************************************************************

If the response is helpful, please click "Accept Answer" and upvote it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate.

Prasad-MSFT 8,981 Reputation points Microsoft External Staff Moderator

2025-01-02T11:37:36.99+00:00
Also, you have already retrieved the User's Photo using Microsoft Graph API, Convert the Photo to Base64 since the adaptive card requires the image in a Base64 format. Once you have the Base64 string, you can embed it in the adaptive card JSON.

{ "type": "AdaptiveCard", "body": [ { "type": "Image", "url": "data:image/jpeg;base64,{{Base64ImageString}}", "size": "Medium", "style": "Person" }, { "type": "TextBlock", "text": "User's Photo", "weight": "Bolder", "size": "Medium" } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.2" }

Replace {{Base64ImageString}} with the actual Base64 string of the user's photo.

Thanks,

Prasad Das

*************************************************************************

If the response is helpful, please click "Accept Answer" and upvote it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate.
Suman 1 Reputation point

2025-01-27T13:35:21.86+00:00
@Prasad-MSFT : Can we change the image size in persona or persona set. I want a little bigger image to be shown in the adaptative card. There is a view type which is set to compact in the JSON, are there other possible values for view to make it bigger?

{ "type": "Component", "name": "graph.microsoft.com/user", "view": "compact", "properties": { "id": "65f50003-e15d-434a-9e14-0fcfeb3d7817", "displayName": "Daniela Mandera", "userPrincipalName": "damandera@microsoft.com" } }

Share via

How to display user's photo in adaptive card with Microsoft Graph?

1 answer

Your answer