Including a user photo in an Adaptive Card

[GRAEMEJOHNSON]

Hi

As a proof of concept, I'm trying to build a flow that will post an adaptive card to a Teams channel with my profile mugshot in the message body.

The only components I can find to return my profile image, return the raw content, rather than a URL....is there a way to get this working?

[Adarsh2199]

Thanks Fraser! Was stuck in this for a long while now. Your answer really helped. This idea worked, I just had to change

"url": "data&#58image/png;base64,@{outputs('Compose')}",

 to 

"url": "data:image/jpeg;base64,@{outputs('Compose')}",

and it worked fine for me. I wanted to use user profile image in adaptive card(to be displayed on Outlook app) and was able to achieve that.

[Anonymous]

This worked perfectly for me, thank you!

[Thwatered]

None of the prior options worked for me. I think due to 302 redirect errors in the 'Send a HTTP Request to Sharepoint' action. The response didn't return any redirected location so I was stuck.

"https://teams.microsoft.com/api/mt/apac/beta/users/8:orgid:<user ID>/profilepicturev2?displayname=<display name>&size=HR96x96"

What worked for me was to construct the above URL used by Teams for user photos. This includes a user ID (e.g. '3666e81d-07ba-628e-b633-51db53a564c3') that I noticed was included in the output from 'List group members'. Filter this output by 'User Principal Name' = email address of the user (case-sensitive so I used toLower()) to find the relevant member.

toLower(triggerOutputs()?['body/Assigned/Email'])

in the adaptive card, the user picture is posted via:

{
"type": "Image",
"style": "Person",
"size": "Small",
"url": "https://teams.microsoft.com/api/mt/apac/beta/users/8:orgid:@{items('Apply_to_each')?['id']}/profilepicturev2?displayname=@{items('Apply_to_each')?['displayName']}&size=HR96x96"
}

Apply to each loop should only have one iteration due to the filter. You could avoid this by writing the filter outputs to variables.

When checking, these 96x96 images are only ~9 kB. Thankfully below the 28 kB limit.

Edit: also, you may need to edit 'apac' to suit your region if not in Asia Pacific.

[Nand_Basto]

You Saved me @FraserM ,
Thank you so so much for this solution!

[FraserMagee]

my pleasure 🙂

[marco7]

With the new teams this not work anymore. Anyone konw other options to get teams profile picture?

[McPowerPlatform]

I have an alternative that works faster, at least that was my experience with the New Teams:

1. Start the flow with the new action, Send an HTTP request to SharePoint  where you have to incluce the required parameter such as the Site Address, make sure that you have the GET method selected, and in the URI:
 _layouts/15/userphoto.aspx?size=S&username= email parameter

2. In the Post Adaptive Card Action, in the message where you have the Payload, use the following text:
{ 
"type": "Image",
"url": "data:image/png;base64, ", 
"style": "Person",
"size": "Small"
}   

3. Insert this expression just next to the base64, 
body('Send an HTTP request to SharePoint')?['$content']

You should have:
{ 
"type": "Image",
"url": "data:image/png;base64,[your expression] ", 
"style": "Person",
"size": "Small"
}   
4. Run the flow and enjoy!!!

[marco7]

Ok but in case the user doesn't have photo i want to show the initials of the name and surname, like teams did. Using this solution, if user doesn't have photo, it will show empty user photo

[MichelH]

You can test if the "empty image" is send by SharePoint. This is always the same image.

When that happens you can put something else there, e.g. a transparant image.
You would then see the initials in the altText.

[McPowerPlatform]

Great Question!!, what I do is using the Office365 connector using "Get user photo metadata" action,  check if the user has photo, if not, I use a generic image for employees stored in a document library, geting  the base64 content of that image base64( image content) 
Then add a compose action for true or false like this, one using the photo and the other using the generic one.
concat('data:image/png;base64,',base64(GetUserofficephoto))

concat('data:image/png;base64,',base64(outputs('genWorker')?['body']))

let me know how this works for you

Sharepoint Get File content

[McPowerPlatform]

Flow Condition Update, Has photo is an expression bool(

outputs('Get_user_photo_metadata')?['body/HasPhoto'

)  is equal to true

[brandtyl]

Hi all, 

I've tried all of the solutions here, but I couldn't get any of them to work. The profile photo I was trying to use was always too large. In other words, I had exceeded the maximum allowed size for adaptive cards (28KB).

I was able to get a profile photo in an adaptive card by doing the following:

1. Add the Get user profile (V2) step to your app. The User (UPN) is the email of the employee you want to add to the adaptive card or, in my case, the Created By Email value of a SharePoint item (see Screenshot 1).

2. Add a Compose action for the JSON that will go in the Post card in a chat or channel action in the Adaptive Card value (see Screenshot 2).

3. Add the code below in the body of the JSON in the Compose action (see Screenshot 3). As you can see, the values for the id, displayName, and userPrincipleName all come from the Get user profile (V2) step (see Screenshot 4). 

{
"type": "Component",
"name": "graph.microsoft.com/user",
"view": "compact",
"properties": {
"id": "@{outputs('Get_user_profile_(V2)')?['body/id']}",
"displayName": "@{outputs('Get_user_profile_(V2)')?['body/displayName']}",
"userPrincipalName": "@{outputs('Get_user_profile_(V2)')?['body/userPrincipalName']}"
}
}

Hope this helps! By the way, the image is very small, but it's better than nothing. 

Screenshot 1

Screenshot 2

Screenshot 3

Screenshot 4

[brandtyl]

I should have realized this sooner, but I was way too excited when I thought I had found a solution. I'm trying to send adaptive cards as the Flow bot. When testing this solution, I was posting as the User. It seems the solution above will only work if you are posting an adaptive card as a User! 

[Maximiano]

Thank you! Still working on 2k24, 
Using 1.4 in my schema to Teams.

[CWRRT]

I have tried almost every suggestion without success. I get a bunch of symbols in the input and output fields which may be part of the issue? I tried manually putting in the sharepoint url with user photo path and that at least makes the card post but just has an X image for the photo. I'm using Teams Chat mode with 1.4 and new MS Teams. Tried posting as bot and user.

[FraserM]

@CWRRT you need to specify in the url line that the base 64 data is an image

See the image above the code before base64

[CWRRT]

I tried all of that. Updated screenshots of the actual build vs. results and a screenshot of the current error.