SharePoint Online Live Persona Card in Custom WebPart
How to display HoverCard like SharePoint Online People WebPart in Custom WebPart.
I have created sample solution and explained the implementation below.
SPFxLivePersonaCard - https://github.com/Anil-Lakhagoudar/SPFxLivePersonaCard
I was trying to display the People HoverCard like SharePoint SPFx People WebPart in Custom WebPart where people data can be read from list or WebPart Property.
After spending some time found that there is React component module created for Live Persona card like Hover card of Office UI Fabric Components. And SharePoint SPFx framework provides client side API to load components by Id.
SharePoint SPFx Live Persona card module can be configured run-time in the custom WebPart to display Persona card.
Use the SPFx SPComponentLoader module to load the component by Id. Find the component Id of the Live Persona Card module and use the method "loadComponentById" to load the LPC component run-time.
Example - SPComponentLoader.loadComponentById(componentId).
Once the component library loaded then find the component by name "LivePersonaCard" to configure run-time for displaying Persona Card on hover of custom react component.
The LivePersonaCard component expects few properties to be passed in order to work properly like People webpart works.
Properties
className - 'People' // custom class can be used here
clientScenario - 'PeopleWebPart' // use this value as it is
hostAppPersonaInfo - { PersonaType : 'User' } // User type
serviceScope - WebPart Service scope where the component is used
upn - User email id for which Hover card will be displayed.
Below is the example image how it display on hover of custom component where LivePersonaCard is configured.
I have created sample solution and explained the implementation below.
SPFxLivePersonaCard - https://github.com/Anil-Lakhagoudar/SPFxLivePersonaCard
I was trying to display the People HoverCard like SharePoint SPFx People WebPart in Custom WebPart where people data can be read from list or WebPart Property.
After spending some time found that there is React component module created for Live Persona card like Hover card of Office UI Fabric Components. And SharePoint SPFx framework provides client side API to load components by Id.
Use the SPFx SPComponentLoader module to load the component by Id. Find the component Id of the Live Persona Card module and use the method "loadComponentById" to load the LPC component run-time.
Example - SPComponentLoader.loadComponentById(componentId).
Once the component library loaded then find the component by name "LivePersonaCard" to configure run-time for displaying Persona Card on hover of custom react component.
The LivePersonaCard component expects few properties to be passed in order to work properly like People webpart works.
Properties
className - 'People' // custom class can be used here
clientScenario - 'PeopleWebPart' // use this value as it is
hostAppPersonaInfo - { PersonaType : 'User' } // User type
serviceScope - WebPart Service scope where the component is used
upn - User email id for which Hover card will be displayed.
Below is the example image how it display on hover of custom component where LivePersonaCard is configured.
Hi! Great solution. Question, have you got this working with an SPFx Employee Directory where there are multiple profiles in a page?
ReplyDeleteHi, We've found this really used and were just wondering if there is a way to force the close button to appear on the live card regardless of display width (this is for tablet touch support, at the moment people are tapping elsewhere on page to close the card).
ReplyDeleteThis is really good, any idea how to make this work for Groups (Office365 or mail enabled security groups)
ReplyDeleteHi ,
ReplyDeleteI tried to integrate this web part. But i having some error. It is showing a user icon only. Can you please help me out? Please let about serviceScope.
Hi,
ReplyDeleteThanks for the solution, it works perfectly. In my case I have multiple profiles, I take the email from the status instead of the webpart properties, it works without problems.