PersonaCard in SPFx Webparts

Occasional Contributor

Hi all, 


we and our users are quite happy with the display of persona information on modern SPO sites! As we also develop custom SPFx Webparts which display people information, we would like to know if there is any documented way to display the same persona callout dialog?? (perhaps Graph Adaptive Cards)


2018-09-21 09_54_07-Seite ohne Titel - OneNote.png


And another "unpopular" question. We also use our SPFx Webparts on classic websites. As all the modern stuff is not available there, I think there is no chance to display this on classic pages ??





9 Replies

Hi Björn,


I would recommend you take a look at the Office UI Fabric. More specifically the FacePile example.


Regarding your other question you can use SPFX on classic. Refer to

Hi Frank, thanks for your answer.


Actually we are allready using UI Fabric components to ensure a native look and feel of our webparts (on modern and classic pages)


But as long as I understand UI Fabric is just for layout, not for content. Means, of course I am able to render a persona card layout with this, but I have to keep care of all the contents (from graph, azure ad, outlook) by myself. Best way to get around this is to call some kind of standard SPO function which accepts a userId and renders the default persona card with all its content ?!


Did you find a solution for this? I'm stuck on the same problem. 

best response confirmed by Björn Nettingsmeier (Occasional Contributor)
Hi ,
Can you try my blog, I have created workaround solution.
Thanks Anil, this one works for us!!
Thank you



Hi Anil,

thank you for your Workaround !

in your Persona Callout Hover is the Same as the People Web Part ?

does in your Solution the Persona card have the "Show Org" Properties - for showing the Organization Hierarchy of the Employee ?


if no - can you instruct us how to add this property ?





@Nati Papirovitch  Yes it shows the organization tab when you click on show more from callout menu and the callout menu is same as People webpart.




Can someone confirm if i need to provide any Graph API permission while using Live person card control. The reason i ask is following the code i see people results but nothing happens when i hover and i see a 400 error related to oauth token. Appreciate response