Forum Discussion
Render peoplecard when hover user in DetailList?
Hi,
I am creating a Web part that is using the DetailList component to render the Title column and a people column.
I get the values of all columns and now I would like to show information about the user when the pointer is over his/her name.
I wonder if there is peopleCard component or a combination of components that can do that.
This is how the lis looks like:
And this what I want to achieve:
I doesn't need to be so complete, I mean, I don't need the Files part or the "update your profile".
This is my code until now:
export default class PersonaApp extends React.Component<IPersonaAppProps, IPersonaAppState> {
constructor(props: IPersonaAppProps) {
super(props);
this.state = {
users: [],
name: '',
email: '',
phone: '',
image: null
}
}
public componentDidMount(): void {
this.props.provider.getAllUser().then((users: IUsers[]) => {
this.setState({
users: users
});
});
}
private columns: IColumn[] = [
{
key: 'Title',
name: 'Title',
fieldName: 'Title',
minWidth: 100,
maxWidth: 100
},
{
key: 'UserTitle',
name: 'User Name',
fieldName: 'UserTitle',
minWidth: 100,
maxWidth: 100
},
]
public render(): React.ReactElement<IPersonaAppProps> {
console.log(this.state.users)
return (
<div className={ styles.personaApp }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
<DetailsList
items={this.state.users}
columns={this.columns}
setKey="set"
layoutMode={DetailsListLayoutMode.justified}
isHeaderVisible={true}
selectionPreservedOnEmptyClick={true}
enterModalSelectionOnTouch={true}
ariaLabelForSelectionColumn="Toggle selection"
ariaLabelForSelectAllCheckbox="Toggle selection for all items"
/>
</div>
</div>
</div>
</div>
);
}
}
I am suspecting that I will need to use MSGraph to get the info of the user and here is my second question:
I am using pnp to get the context of the web part like this:
public onInit(): Promise<void> {
return super.onInit().then(_ => {
pnpSetup({
spfxContext: this.context
});
return Promise.resolve();
});
}
Bu I am not sure how to add MS graph in the onInit.
Other alternative I found was to use the @pnp/graph but I don't know how to fetch the data of the user that has the mouse over event handler.
As you can note, I don't have idea how to do all of this.
Is there a guide to implement this peopleCard in DetailList? or is there som github sample code that do that?
Best regards
Americo
