Personnes composant dans le Kit de ressources Microsoft Graph

  • Article

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.

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

Localisation

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