Personnes composant dans le Kit de ressources Microsoft Graph

Article
11/07/2024

Vous pouvez utiliser le mgt-people composant web pour afficher un groupe de personnes ou de contacts à l’aide de leurs photos ou initiales. Par défaut, il affiche les contacts les plus fréquents pour l’utilisateur connecté.

Ce composant utilise plusieurs contrôles mgt-person , mais il peut être lié à un ensemble de descripteurs de personnes. S’il y a plus de personnes à afficher que la show-max valeur, un nombre est ajouté pour indiquer le nombre d’autres contacts.

Exemple

L’exemple suivant montre un groupe de personnes affiché à l’aide du mgt-people composant . Vous pouvez utiliser l’éditeur de code pour voir comment les propriétés modifient le comportement du composant.

HTML
React

Ouvrez cet exemple dans mgt.dev.

Propriétés

Par défaut, le mgt-people composant extrait les événements du /me/people point de terminaison avec le personType/class eq 'Person' filtre pour afficher les utilisateurs fréquemment contactés. Vous pouvez utiliser plusieurs propriétés pour modifier ce comportement.

Attribut	Propriété	Description
show-max	showMax	Indique le nombre maximal de personnes à afficher. La valeur par défaut est 3.
contacts	contacts	Tableau d’objets de personne Microsoft Graph. Utilisez cette propriété pour accéder aux personnes chargées par le composant. Définissez cette valeur pour charger vos propres personnes sur le composant.
group-id	groupId	ID d’un groupe Microsoft Entra ID. Cette propriété est utilisée pour récupérer les membres directs du groupe. Cette propriété est facultative.
user-ids	userIds	Tableau d’ID utilisateur à afficher. Cette propriété est facultative.
people-requêtes	peopleQueries	Requêtes Microsoft Graph pour personnaliser la réponse aux requêtes de personnes.
carte personne	personCardInteraction	Définit le comportement pour afficher la personne carte sur une personne rendue. La valeur par défaut est définie pour afficher la personne carte au pointage (PersonCardInteraction.hover).
show-presence	showPresence	Détermine si un composant de personne doit afficher le badge de présence. La valeur par défaut est false.
ressource	ressource	URL de ressource à obtenir à partir de Microsoft Graph (par exemple, `/me/people`).
scopes	scopes	Chaîne délimitée par des virgules avec des autorisations à accorder au composant. Cette propriété est facultative.
version	version	Version de l’API à utiliser lors de la requête. La valeur par défaut est `v1.0`.
détails de secours	fallbackDetails	Tableau d’objets de personne Microsoft Graph représentant une ou plusieurs personnes lorsqu’aucun utilisateur/personne/contact n’est trouvé dans le graphique.

L’exemple suivant définit le nombre maximal de personnes à afficher.

<mgt-people show-max="4"> </mgt-people>

Propriétés personnalisées CSS

Le mgt-people composant définit les propriétés personnalisées CSS suivantes.

<mgt-people class="people"></mgt-people>

.people {
  --people-list-margin: 12px;
  --people-avatar-gap: 8px;
  --people-overflow-font-color: orange;
  --people-overflow-font-size: 16px;
  --people-overflow-font-weight: 600;
  --people-person-avatar-size: 70px;
}

Pour en savoir plus, consultez composants de style.

Modèles

Prend mgt-people en charge plusieurs modèles que vous pouvez utiliser pour remplacer certaines parties du composant. Pour spécifier un modèle, incluez un <template> élément à l’intérieur d’un composant et définissez sur l’une data-type des valeurs suivantes.

Type de données	Contexte de données	Description
`default`	`people`: liste des objets person	Le modèle par défaut remplace l’intégralité du composant par le vôtre.
`person`	`person`: objet person	Modèle utilisé pour afficher chaque personne.
`overflow`	`people`: liste des objets person `max`: nombre de personnes affichées `extra`: nombre de personnes supplémentaires	Modèle utilisé pour afficher le nombre au-delà du nombre maximal à droite de la liste de personnes.
`no-data`	Aucun contexte de données n’est passé	Modèle utilisé lorsqu’aucune donnée n’est disponible.
`loading`	Aucun contexte de données n’est passé	Modèle utilisé pendant que le composant charge l’état.

Les exemples suivants montrent comment utiliser le person modèle.

<mgt-people>
  <template>
    <ul>
      <li data-for="person in people">
        <mgt-person person-query="{{ person.userPrincipalName }}"></mgt-person>
        <h3>{{ person.displayName }}</h3>
        <p>{{ person.jobTitle }}</p>
        <p>{{ person.department }}</p>
      </li>
    </ul>
  </template>
</mgt-people>

Autorisations de Microsoft Graph

Ce composant utilise les API et autorisations Microsoft Graph suivantes. Pour chaque API appelée, l’utilisateur doit disposer d’au moins l’une des autorisations répertoriées.

Configuration	Autorisation	API
configuration par défaut	People.Read, People.Read.All	/me/people
`group-id` Ensemble	GroupMember.Read.All, Group.Read.All, Directory.Read.All, GroupMember.ReadWrite.All, Group.ReadWrite.All	/groups/${groupId}/members/microsoft.graph.user
`user-ids` Ensemble	User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All	/users/$({userId}
`people-queries` Ensemble	People.Read, People.Read.All	/me/people
`resource` Ensemble	Autorisations spécifiées dans `scopes`	Spécifié dans `resource`
`show-presence` Ensemble	Presence.Read.All	/communications/getPresencesByUserId

Sous-composants

Le mgt-people composant se compose d’un ou plusieurs sous-composants qui peuvent nécessiter d’autres autorisations que celles répertoriées précédemment. Pour plus d’informations, consultez la documentation de chaque sous-composant : mgt-person.

Authentification

Le contrôle utilise le fournisseur d’authentification global décrit dans la documentation sur l’authentification.

Cache

Magasin d’objets	Données mises en cache	Remarques
`people`	Informations sur les personnes correspondant à la requête	Utilisé lorsqu’il `resource` est spécifié
`users`	Informations sur les utilisateurs correspondant à la requête	Utilisé quand `groupId`, `userIds`ou `peopleQueries` aucune propriété spécifiée
`presence`	Présence de l’ensemble de personnes spécifié	Utilisé quand la `showPresence` valeur est définie sur `true`

Remarque

Par défaut, le mgt-people composant utilise le mgt-person composant pour afficher des informations sur les personnes. Le mgt-person composant télécharge et met automatiquement en cache la photo pour chaque personne.

Pour plus d’informations sur la configuration du cache, consultez Mise en cache.

Étendre pour plus de contrôle

Pour les scénarios plus complexes ou une expérience utilisateur vraiment personnalisée, ce composant expose plusieurs protected render* méthodes de remplacement dans les extensions de composant.

Méthode	Description
renderLoading	Affiche l’état de chargement.
renderNoData	Restitue l’état des données vides.
renderPeople	Affiche une liste de personnes, jusqu’à la `show-max` valeur .
renderPerson	Affiche une personne individuelle.
renderOverflow	Affiche une représentation des personnes restantes au-delà de la `show-max` valeur.

Localisation

Le contrôle n’expose aucune variable de localisation.

Partager via