MGT People control in SPFx
Tags: development, mgt, spfx
Published: 2024-05-08 12:23:18

---
title: MGT People control in SPFx
published: true
date: 2024-05-08 09:00:00 UTC
tags: Development,MGT,SPFx
canonical_url: https://iamguidozam.blog/2024/05/08/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](https://iamguidozam.blog/2023/12/20/use-microsoft-graph-toolkit-with-spfx-and-react/) or have a look at the code of this [sample here](https://github.com/GuidoZam/blog-samples/tree/main/MGT/mgt-people-spfx)._

* * *

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:

![](https://iamguidozamcode.files.wordpress.com/2024/03/image-41.png?w=581)

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:

![](https://iamguidozamcode.files.wordpress.com/2024/03/image-16.png?w=571)

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.

![](https://iamguidozamcode.files.wordpress.com/2024/03/image-43.png?w=1024)

#### 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!