Render peoplecard when hover user in DetailList?

Regular Contributor

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: 

Capture.PNG

 

And this what I want to achieve: 

Capture2.PNG

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

 

0 Replies