Share via

SharePoint Online Live Persona Card in Custom WebPart

  • Article

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.

https://2.bp.blogspot.com/-HOTMRPYcnqM/XARLsOjTDEI/AAAAAAAAANU/76cxP4zuY2I_xHlsC5UnJutX6XqKPn5UwCEwYBhgL/s1600/lpccard.JPG