MGT People control in SPFx

Proceeding with the appointments with the MGT (Microsoft Graph Toolkit) controls today I want to talk about the People control.

I will not cover in detail the implementation, it’s not the scope of this post, if you’re wondering how to achieve all the steps to enable you to use MGT inside SPFx you can have a look at my previous post or have a look at the code of this sample here.

The People control is used to display, as the name suggest, people. It displays users avatars and also a card, when hovering or clicking on the avatar, that displays some of the user information and also some buttons to contact the user.

In the sample I created multiple instances of the control:

The minimal usage instance displays the default and minimal configuration to use the control.

The show presence instance is like the minimal one but in addition it displays the presence of the user.

The show max people instance has a configurable limit of displayed users, in the screenshot the users limit is of seven users.

The people of specific group instance displays the users that belong to the group specified in the control properties.

The custom query instance displays the user filtered with the query specified in the control properties, in the first screenshot the query is empty and thus it shows a string that tell the user to configure it.

In the next screenshot is displayed the card that is rendered when hovering an avatar and the available buttons that are included:

The following screenshot displays the control pane of the web part where it’s possible to specify:

• the group id used for the people of specific group instance.
• the number of max people to show in the show max people instance.
• the query to be used to filter the custom query instance.

The code

To use the control first it needs to be imported in your code:

import { People } from '@microsoft/mgt-react';

The minimal usage of the control is simply the control itself without any property:

<People />

To display the presence of the users you can define the showPresence property as true:

<People showPresence={true} />

Is possible to limit the displayed users using the showMax property:

<People showMax={this.props.maxPeople} />

The groupId property is used to display only the users of the group with the specified id:

<People groupId={this.props.groupId} />

The last usage sample is about the peopleQueries property that’s used to filter the users for the specified string:

<People peopleQueries={this.props.queries} />

Conclusions

The People control is a nice, easy and convenient way to display users in an application to allow a more UI integrated approach with the Microsoft ecosystem.

Hope this helps!