cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
GRAEMEJOHNSON
Advocate I
Advocate I

Including a user photo in an Adaptive Card

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?

 

2019-03-22_15h28_44.png

 

56 REPLIES 56

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.

Adarsh2199_0-1603802471595.png

Anonymous
Not applicable

This worked perfectly for me, thank you!

Thwatered
New Member

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'])

Thwatered_0-1639438976952.png

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

Thwatered_1-1639439206068.png

{
"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.

 

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

my pleasure 🙂

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

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&colon;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&colon;image/png;base64,[your expression] ", 
"style": "Person",
"size": "Small"
}   
4. Run the flow and enjoy!!!

McPowerPlatform_1-1702737236138.png

 

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
Advocate V
Advocate V

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.

MichelH_0-1703058035218.png

 





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&colon;image/png;base64,',base64(GetUserofficephoto))

 

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

let me know how this works for you


Sharepoint Get File contentSharepoint Get File contentNew Project (27).png

Flow Condition Update, Has photo is an expression bool(

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

 is equal to true

McPowerPlatform_0-1706979297822.png

 



brandtyl
Frequent Visitor

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 2024-02-08 142505.png

 

 

Screenshot 2

 

Screenshot 2024-02-08 145117.png

 

 

Screenshot 3

 

Screenshot 2024-02-08 143653.png

 

 

Screenshot 4

 

Screenshot 2024-02-08 144459.png

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! 

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

CWRRT
Frequent Visitor

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.2024-05-17_16-52-29.jpg2024-05-17_16-53-01.jpg2024-05-17_16-53-15.jpg

 

2024-05-17_16-49-42.jpg

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

 

FraserM_1-1716039904556.png

See the image above the code before base64

CWRRT
Frequent Visitor

I tried all of that. Updated screenshots of the actual build vs. results and a screenshot of the current error.Day 2 2.jpgDay 2 Error.jpgDay2.jpg

Helpful resources

Announcements

Celebrating the May Super User of the Month: Laurens Martens

  @LaurensM  is an exceptional contributor to the Power Platform Community. Super Users like Laurens inspire others through their example, encouragement, and active participation. We are excited to celebrated Laurens as our Super User of the Month for May 2024.   Consistent Engagement:  He consistently engages with the community by answering forum questions, sharing insights, and providing solutions. Laurens dedication helps other users find answers and overcome challenges.   Community Expertise: As a Super User, Laurens plays a crucial role in maintaining a knowledge sharing environment. Always ensuring a positive experience for everyone.   Leadership: He shares valuable insights on community growth, engagement, and future trends. Their contributions help shape the Power Platform Community.   Congratulations, Laurens Martens, for your outstanding work! Keep inspiring others and making a difference in the community!   Keep up the fantastic work!        

Check out the Copilot Studio Cookbook today!

We are excited to announce our new Copilot Cookbook Gallery in the Copilot Studio Community. We can't wait for you to share your expertise and your experience!    Join us for an amazing opportunity where you'll be one of the first to contribute to the Copilot Cookbook—your ultimate guide to mastering Microsoft Copilot. Whether you're seeking inspiration or grappling with a challenge while crafting apps, you probably already know that Copilot Cookbook is your reliable assistant, offering a wealth of tips and tricks at your fingertips--and we want you to add your expertise. What can you "cook" up?   Click this link to get started: https://aka.ms/CS_Copilot_Cookbook_Gallery   Don't miss out on this exclusive opportunity to be one of the first in the Community to share your app creation journey with Copilot. We'll be announcing a Cookbook Challenge very soon and want to make sure you one of the first "cooks" in the kitchen.   Don't miss your moment--start submitting in the Copilot Cookbook Gallery today!     Thank you,  Engagement Team

Announcing Power Apps Copilot Cookbook Gallery

We are excited to share that the all-new Copilot Cookbook Gallery for Power Apps is now available in the Power Apps Community, full of tips and tricks on how to best use Microsoft Copilot as you develop and create in Power Apps. The new Copilot Cookbook is your go-to resource when you need inspiration--or when you're stuck--and aren't sure how to best partner with Copilot while creating apps.   Whether you're looking for the best prompts or just want to know about responsible AI use, visit Copilot Cookbook for regular updates you can rely on--while also serving up some of your greatest tips and tricks for the Community. Check Out the new Copilot Cookbook for Power Apps today: Copilot Cookbook - Power Platform Community.  We can't wait to see what you "cook" up!    

Welcome to the Power Automate Community

You are now a part of a fast-growing vibrant group of peers and industry experts who are here to network, share knowledge, and even have a little fun.   Now that you are a member, you can enjoy the following resources:   Welcome to the Community   News & Announcements: The is your place to get all the latest news around community events and announcements. This is where we share with the community what is going on and how to participate.  Be sure to subscribe to this board and not miss an announcement.   Get Help with Power Automate Forums: If you're looking for support with any part of Power Automate, our forums are the place to go. From General Power Automate forums to Using Connectors, Building Flows and Using Flows.  You will find thousands of technical professionals, and Super Users with years of experience who are ready and eager to answer your questions. You now have the ability to post, reply and give "kudos" on the Power Automate community forums. Make sure you conduct a quick search before creating a new post because your question may have already been asked and answered. Galleries: The galleries are full of content and can assist you with information on creating a flow in our Webinars and Video Gallery, and the ability to share the flows you have created in the Power Automate Cookbook.  Stay connected with the Community Connections & How-To Videos from the Microsoft Community Team. Check out the awesome content being shared there today.   Power Automate Community Blog: Over the years, more than 700 Power Automate Community Blog articles have been written and published by our thriving community. Our community members have learned some excellent tips and have keen insights on the future of process automation. In the Power Automate Community Blog, you can read the latest Power Automate-related posts from our community blog authors around the world. Let us know if you'd like to become an author and contribute your own writing — everything Power Automate-related is welcome.   Community Support: Check out and learn more about Using the Community for tips & tricks. Let us know in the Community Feedback  board if you have any questions or comments about your community experience. Again, we are so excited to welcome you to the Microsoft Power Automate community family. Whether you are brand new to the world of process automation or you are a seasoned Power Automate veteran - our goal is to shape the community to be your 'go to' for support, networking, education, inspiration and encouragement as we enjoy this adventure together.     Power Automate Community Team

Hear what's next for the Power Up Program

Hear from Principal Program Manager, Dimpi Gandhi, to discover the latest enhancements to the Microsoft #PowerUpProgram, including a new accelerated video-based curriculum crafted with the expertise of Microsoft MVPs, Rory Neary and Charlie Phipps-Bennett. If you’d like to hear what’s coming next, click the link below to sign up today! https://aka.ms/PowerUp  

Tuesday Tip | How to Report Spam in Our Community

It's time for another TUESDAY TIPS, your weekly connection with the most insightful tips and tricks that empower both newcomers and veterans in the Power Platform Community! Every Tuesday, we bring you a curated selection of the finest advice, distilled from the resources and tools in the Community. Whether you’re a seasoned member or just getting started, Tuesday Tips are the perfect compass guiding you across the dynamic landscape of the Power Platform Community.   As our community family expands each week, we revisit our essential tools, tips, and tricks to ensure you’re well-versed in the community’s pulse. Keep an eye on the News & Announcements for your weekly Tuesday Tips—you never know what you may learn!   Today's Tip: How to Report Spam in Our Community We strive to maintain a professional and helpful community, and part of that effort involves keeping our platform free of spam. If you encounter a post that you believe is spam, please follow these steps to report it: Locate the Post: Find the post in question within the community.Kebab Menu: Click on the "Kebab" menu | 3 Dots, on the top right of the post.Report Inappropriate Content: Select "Report Inappropriate Content" from the menu.Submit Report: Fill out any necessary details on the form and submit your report.   Our community team will review the report and take appropriate action to ensure our community remains a valuable resource for everyone.   Thank you for helping us keep the community clean and useful!

Users online (3,715)