cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Ryan109
Frequent Visitor

PCF Component getting user profile pictures

Hi all, 

I have been working on PCF using react and fluent UI persona's. My aim is to have something I can put into a canvas app gallery and use the values from that to fill in the component. 


However, I am struggling to get anything useful from Office365Users.UserPhotoV2() as it seems to return an "appres" resource link. Does anyone have any suggestions for working with this? or if its not possible just let me know.

 

Thanks, 

Ryan 

1 ACCEPTED SOLUTION

Accepted Solutions

Yeah, my guess is that the documentation omitting this call from the PowerApps specific page was not accidental and it is not yet intended for use there. But we can still recover. Have you tried the Graph API yet? it requires specific permissions, but you should be able to make simple GET calls to retrieve the binary of a photo and that URL might work inside your fluent UI component

 

Get photo - Microsoft Graph v1.0 | Microsoft Docs

 

The request would look something like: 
https://graph.microsoft.com/v1.0/users/{id | userPrincipalName}/photo

View solution in original post

5 REPLIES 5
cchannon
Super User
Super User

According to the documentation, the UserPhotoV2 should be returning you a binary for the image file content. BUT, I should also point out that the same documentation when addressing PowerApps specifically does not list this method, so it is not completely clear but possible that UserPhotoV2 is not yet intended for consumption from PowerApps.

 

That said, if you're able to hit it, maybe we can make it work anyway. The Fluent UI component is expecting a URI rather than the actual binary, so maybe your appres link is actually as designed. Have you tried just passing the resource link to fluent ui to see if it knows how to render it?

cchannon
Super User
Super User

<Edit: this post was a duplicate of the above>

Ryan109
Frequent Visitor

Thanks for getting back to me so quick.

It is a bit  confusing because in the documentation it does say that it should be returning a binary of the image. However if you place it in a label in a gallery the actual response is something like the following:
Formula:

Ryan109_1-1615564380066.png

Response:

Ryan109_0-1615564348250.png

Unfortunately when I pass this to my PCF it comes up with the following error: 

Ryan109_2-1615564667595.png

So it seems that the my PCF cannot understand the URL scheme and is not able to actually get the image. 


It looks like something else is going on in the background to retrieve the actual blob URI. If you inspect a working user profile image in a gallery you will see a url like this: "blob:https://eu.create.powerapps.com/<unique id>". Unfortunately I am not sure how that's generated. 

Hope this makes sense if you have any questions just let me know. It may be that what I am trying to do just is not supported at the moment. 

Yeah, my guess is that the documentation omitting this call from the PowerApps specific page was not accidental and it is not yet intended for use there. But we can still recover. Have you tried the Graph API yet? it requires specific permissions, but you should be able to make simple GET calls to retrieve the binary of a photo and that URL might work inside your fluent UI component

 

Get photo - Microsoft Graph v1.0 | Microsoft Docs

 

The request would look something like: 
https://graph.microsoft.com/v1.0/users/{id | userPrincipalName}/photo

Ryan109
Frequent Visitor

Yeah that's a great idea I think ill have a go at implementing the Graph api method instead. This will also give me user presence which is a bonus. 

Thanks a lot for your help! 

Helpful resources

Announcements
PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

Microsoft Build 768x460.png

Microsoft Build is May 24-26. Have you registered yet?

Come together to explore latest innovations in code and application development—and gain insights from experts from around the world.

May UG Leader Call Carousel 768x460.png

What difference can a User Group make for you?

At the monthly call, connect with other leaders and find out how community makes your experience even better.

Users online (1,664)