Composant contacts dans la boîte à outils Microsoft GraphPeople component in the Microsoft Graph Toolkit

Vous pouvez utiliser le mgt-people composant Web pour afficher un groupe de personnes ou de contacts à l’aide de leurs photos ou initiales.You can use the mgt-people web component to display a group of people or contacts by using their photos or initials. Par défaut, elle affiche les contacts les plus fréquents pour l’utilisateur connecté.By default, it will display the most frequent contacts for the signed in user.

Ce composant utilise plusieurs contrôles de gestion des personnes, mais il peut être lié à un ensemble de descripteurs de personnes.This component uses multiple mgt-person controls, but it can be bound to a set of people descriptors. 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.If there are more people to display than the show-max value, a number will be added to indicate the number of additional contacts.

ExempleExample

L’exemple suivant montre un groupe de personnes affiché à l’aide du mgt-people composant.The following example shows a group of people displayed using the mgt-people component. Vous pouvez utiliser l’éditeur de code pour voir comment les Propriétés modifient le comportement du composant.You can use the code editor to see how properties change the behavior of the component.

Ouvrez cet exemple dans gestion. devOpen this example in mgt.dev

PropriétésProperties

Par défaut, le mgt-people composant récupère les événements à partir du /me/people point de terminaison avec le personType/class eq 'Person' filtre pour afficher les utilisateurs fréquemment contactés.By default, the mgt-people component fetches events from the /me/people endpoint with the personType/class eq 'Person' filter to display frequently contacted users. Vous pouvez utiliser plusieurs propriétés pour modifier ce comportement.You can use several properties to change this behavior.

AttributAttribute PropriétéProperty DescriptionDescription
Show-Maxshow-max showMaxshowMax Indique le nombre maximal de personnes à afficher.Indicates the maximum number of people to show. La valeur par défaut est 3.Default value is 3.
contactspeople contactspeople Un tableau de personnes pour obtenir ou définir la liste des personnes affichées par le composant.An array of people to get or set the list of people rendered by the component. Utilisez cette propriété pour accéder aux personnes chargées par le composant.Use this property to access the people loaded by the component. Définissez cette valeur pour charger vos propres personnes.Set this value to load your own people.
ID de groupegroup-id groupIdgroupId Récupère des personnes d’un Microsoft Graph spécifique à partir de l’ID respectif.Retrieves people from a specific Microsoft Graph from the respective ID.
ID utilisateuruser-ids userIdsuserIds Étant donné un tableau de l’utilisateur Microsoft Graph ids , le composant affiche ces utilisateurs.Given an array of Microsoft Graph user ids, the component will render these users.
contacts-requêtespeople-queries peopleQueriespeopleQueries Étant donné un tableau de requêtes person (Names, UPN, emails), le composant affiche ces utilisateurs.Given an array of person queries (names, upns, emails), the component will render these users.
carte de personneperson-card personCardpersonCard Une énumération permettant de déterminer l’action de l’utilisateur nécessaire pour activer le panneau flyout- hover ou click .An enumeration to determine user action necessary to activate flyout panel - hover or click. La valeur par défaut est none.Default value is none.
Show-présenceshow-presence showPresenceshowPresence Valeur booléenne permettant de déterminer s’il faut afficher le badge de présence de la personne sur l’image de la personne.A boolean to determine whether to show person presence badge on person image.

L’exemple suivant définit le nombre maximal de personnes à afficher.The following example sets the maximum number of people to show.

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

Propriétés personnalisées CSSCSS custom properties

Le mgt-people composant définit les propriétés personnalisées CSS suivantes.The mgt-people component defines the following CSS custom properties.

mgt-people {
  --list-margin: 8px 4px 8px 8px; /* Margin for component */
  --avatar-margin: 0 4px 0 0; /* Margin for each person */
}

ModèlesTemplates

L' mgt-people prend en charge plusieurs modèles que vous pouvez utiliser pour remplacer certaines parties du composant.The mgt-people supports several templates that you can use to replace certain parts of the component. 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’un des éléments suivants.To specify a template, include a <template> element inside a component and set the data-type value to one of the following.

Type de donnéesData type Contexte de donnéesData context DescriptionDescription
default people: liste des objets personpeople: list of person objects Le modèle par défaut remplace tout le composant par les vôtres.The default template replaces the entire component with your own.
person person: Person, objetperson: person object Modèle utilisé pour le rendu de chaque personne.The template used to render each person.
overflow people: liste des objets personpeople: list of person objects
max: nombre de personnes affichéesmax: number of shown people
extra: nombre de personnes supplémentairesextra: number of extra people
Modèle utilisé pour afficher le nombre au-delà du maximum à droite de la liste des personnes.The template used to render the number beyond the max to the right of the list of people.
no-data Aucun contexte de données n’est transmisNo data context is passed Modèle utilisé lorsqu’aucune donnée n’est disponible.The template used when no data is available.
loading Aucun contexte de données n’est transmisNo data context is passed Modèle utilisé pendant que le composant charge l’État.The template used while the component loads state.

Les exemples suivants montrent comment utiliser le person modèle.The following examples shows how to use the person template.

<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 Microsoft GraphMicrosoft Graph permissions

Ce composant utilise les autorisations et les API Microsoft Graph suivantes :This component uses the following Microsoft Graph APIs and permissions:

RessourceResource AutorisationPermission
/me/people/me/people People.Read

Lors de l’utilisation des modèles par défaut, des API et des autorisations supplémentaires sont requises.When using the default templates, additional APIs and permissions are required. Le modèle par défaut de ce composant utilise un composant de gestion de personne , qui requiert ce qui suit.The default template for this component uses a mgt-person component, which requires the following.

RessourceResource AutorisationPermission
/Users/users User.ReadBasic.AllUser.ReadBasic.All

AuthentificationAuthentication

Le contrôle utilise le fournisseur d’authentification global décrit dans la documentation d’authentification.The control uses the global authentication provider described in the authentication documentation.

Prolonger le contrôleExtend for more control

Pour les scénarios plus complexes ou une expérience utilisateur véritablement personnalisée, ce composant expose plusieurs protected render* méthodes de remplacement dans les extensions de composants.For more complex scenarios or a truly custom UX, this component exposes several protected render* methods for override in component extensions.

MéthodeMethod DescriptionDescription
renderLoadingrenderLoading Affiche l’état de chargement.Renders the loading state.
renderNoDatarenderNoData Affiche l’état de données vide.Renders the empty data state.
renderPeoplerenderPeople Affiche une liste de personnes, jusqu’à la show-max valeur.Renders a list of people, up to the show-max value.
renderPersonrenderPerson Affiche une personne individuelle.Renders an individual person.
renderOverflowrenderOverflow Affiche une représentation des personnes restantes au-delà de la show-max valeur.Renders a representation of remaining people beyond the show-max value.