How to display custom data in Mgt Person in SPFX - spfx

Question

I want to display custom data which is coming from an API which will have data in 4 lines in Person Mgt,
I don't want to use default data from personquery, so how can I pass list of people's data in the Person Mgt also by default it shows data in just three lines but I want to display 4 details of an individual in 4 different lines in SPFX.
I've provided sample implementation of the code,
public render(): React.ReactElement<IMgtComponentsProps> {
return (
<Person
personQuery="me"
//personDetails={personDetails}
view={ViewType.threelines}
fetchImage={true}
avatarType={avatarType.photo}
personCardInteraction={PersonCardInteraction.hover} />
);
}
I'll be having similar type of custom data as shown below so I want to show these details as per user.
const personDetails = {
displayName: 'Bill Gates',
mail: 'nikola#contoso.com',
role:'Developer',
community:'Software Enginnering'
}
I tried passing this object inside personDetails property of Person but it's not working.

Answer 1

Currently a fourth line of data is only support via a custom rendering template
Here's an example of that using the raw web component as opposed to the React Wrapper.
<mgt-person class="my-person" person-query="me">
<template>
<div>
Hello, my name is: {{person.displayName}} <br>
{{person.role}} <br>
{{person.community}} <br>
{{person.mail}}
</div>
</template>
<template data-type="loading">
Loading
</template>
</mgt-person>
const person = document.querySelector('.my-person');
person.personDetails = {
displayName: 'Bill Gates',
mail: 'nikola#contoso.com',
role: 'Developer',
community: 'Software Enginnering'
};
With the existing three line view you can map each of the lines to your custom properties, assuming you have the above custom data being passed correctly you can have the component render the chosen properties on each line.
<mgt-person
class="my-person"
view="threeLines"
line2-property="role"
line2-property="community"
person-card="hover"
fetch-image>
</mgt-person>
The good news for the four-line case is that we are adding that to the library as part of our v3 release which is currently being worked on.