Personnes composant dans le Kit de ressources Microsoft Graph

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 de contacts supplémentaires.

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.

Ouvrir 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 de personnes pour obtenir ou définir la liste des personnes rendue par le composant. Utilisez cette propriété pour accéder aux personnes chargées par le composant. Définissez cette valeur pour charger vos propres personnes.
group-id	groupId	Récupère des personnes d’un Microsoft Graph spécifique à partir de l’ID respectif.
user-ids	userIds	Étant donné un tableau d’utilisateurs idsMicrosoft Graph , le composant affiche ces utilisateurs.
people-requêtes	peopleQueries	À partir d’un tableau de requêtes de personne (noms, upns, e-mails), le composant affiche ces utilisateurs.
carte de personne	personCard	Énumération pour déterminer l’action de l’utilisateur nécessaire pour activer le panneau volant - hover, clickou none. La valeur par défaut est hover.
show-presence	showPresence	Valeur booléenne pour déterminer s’il faut afficher le badge de présence d’une personne sur l’image de la personne.
ressource	ressource	Ressource à obtenir à partir de Microsoft Graph (par exemple, /me/people).
scopes	scopes	Tableau facultatif de chaînes si vous utilisez la propriété ou une étendue délimitée par des virgules si vous utilisez l’attribut . Le composant utilise ces étendues (avec un fournisseur pris en charge) pour s’assurer que l’utilisateur a consenti à l’autorisation appropriée.
version	version	Version d’API facultative à utiliser lors de la requête GET. La valeur par défaut est v1.0.
détails de secours	fallbackDetails	Tableau d’objets IDynamicPerson représentant une ou plusieurs personnes quand 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 {
  --list-margin: 8px 4px 8px 8px; /* Margin for component */
  --avatar-margin: 0 4px 0 0; /* Margin for each person */
  --color: #000000 /* Text color */
}

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 la data-type valeur sur l’une des valeurs suivantes.

Type de données	Contexte de données	Description
default	people: liste d’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 d’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 :

Configuration	Autorisation	API
groupId Ensemble	GroupMember.Read.All	/groups/${groupId}/members
userIds Ensemble	User.ReadBasic.All	/users/${userId}
peopleQueries Ensemble	People.Read	/me/people
resource Ensemble	Autorisations spécifiées dans scopes	Spécifié dans resource
configuration par défaut	People.Read	/me/people
showPresence Ensemble	Presence.Read.All	/communications/getPresencesByUserId

Lorsque vous utilisez les modèles par défaut, des API et des autorisations supplémentaires sont requises. Le modèle par défaut de ce composant utilise un composant mgt-person . Consultez sa documentation pour obtenir la liste des autorisations requises.

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, userIdsou 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.