Composant Person dans le Kit de ressources Microsoft Graph

Le composant de personne est utilisé pour afficher une personne ou un contact à l’aide de sa photo, son nom, son adresse e-mail ou toute autre personne.

Le composant person utilise également mgt-person-card pour afficher une carte volante avec des informations supplémentaires sur l’utilisateur. Pour plus d’informations, consultez la section Carte de personne .

Exemple

L’exemple suivant montre comment afficher une personne utilisant le mgt-person composant . Vous pouvez utiliser l’éditeur de code pour voir comment les propriétés modifient le comportement du composant.

Définition des détails de la personne

Vous pouvez utiliser trois propriétés pour définir les détails de la personne. Utilisez une seule des propriétés suivantes par instance :

• Définissez l’attribut user-id ou userId la propriété pour extraire l’utilisateur de Microsoft Graph à l’aide de son ID.

• Définissez l’attribut ou personQuery la person-query propriété pour rechercher une personne donnée dans Microsoft Graph. Il choisit la première personne disponible et récupère les détails de la personne. Un e-mail fonctionne mieux pour s’assurer que la bonne personne est interrogée, mais un nom fonctionne aussi bien.

• Définissez l’attribut ou personPresence la person-presence propriété pour ajouter manuellement un badge de présence à l’avatar de personne.

• Définissez l’attribut ou avatarSize la avatar-size propriété sur small ou large pour déterminer la taille de l’avatar. Cela permet d’ajouter le badge de présence correct à l’avatar. Vous devez choisir les propriétés css personnalisées correspondantes indiquées ci-dessous pour personnaliser davantage la taille de l’avatar. Par défaut, la valeur est définie sur auto laquelle décidera automatiquement comment afficher la présence en fonction de la view propriété . Nous vous recommandons d’utiliser small si votre avatar est inférieur à 32 px par 32 px.

• Utilisez l’attribut ou personDetails la person-details propriété pour définir manuellement les détails de la personne, comme illustré dans l’exemple suivant.

  let personControl = document.getElementById('myPersonControl');
  personControl.personDetails = {
      displayName: 'Nikola Metulev',
      mail: 'nikola@contoso.com',
      personImage: 'url'
  }
  

  Si aucune image n’est fournie, une image est récupérée (si disponible).

• Par défaut, le composant personne demande uniquement le jeu de propriétés utilisateur Microsoft Graph standard. Pour demander des propriétés supplémentaires, déclarez-les comme n’importe quelle partie du line(x)Property.

Propriétés

Vous pouvez utiliser plusieurs propriétés pour personnaliser le composant.

Propriétés personnalisées CSS

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

<mgt-person class="person" person-query="me" view="fourlines" id="online" show-presence></mgt-person>

.person {
  --person-background-color: #616161;
  --person-background-border-radius: 30%;
  --person-avatar-size: 40px;
  --person-avatar-border: 3px solid yellow;
  --person-avatar-border-radius: 54%;
  --person-initials-text-color: white;
  --person-initials-background-color: blue;
  --person-line1-font-size: 32px;
  --person-line1-font-weight: 600;
  --person-line1-text-color: red;
  --person-line1-text-transform: capitalize;
  --person-line1-text-line-height: 20px;
  --person-line2-font-size: 28px;
  --person-line2-font-weight: 500;
  --person-line2-text-color: orange;
  --person-line2-text-transform: full-width;
  --person-line2-text-line-height: 16px;
  --person-line3-font-size: 24px;
  --person-line3-font-weight: 400;
  --person-line3-text-color: blue;
  --person-line3-text-transform: uppercase;
  --person-line3-text-line-height: 12px;
  --person-line4-font-size: 20px;
  --person-line4-font-weight: 300;
  --person-line4-text-color: green;
  --person-line4-text-transform: lowercase;
  --person-line4-text-line-height: 12px;
  --person-details-spacing: 30px;
}

Pour en savoir plus, consultez composants de style.

Événements

Les événements suivants sont déclenchés à partir du composant .

Pour plus d’informations sur la gestion des événements, consultez événements.

Modèles

Le mgt-person composant prend en charge plusieurs modèles qui vous permettent de 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 :

L’exemple suivant définit un modèle pour le composant person.

<!-- Retemplate the entire person component -->
<mgt-person>
  <template>
    <div data-if="personImage">
      <img src="{{personImage}}" />
    </div>
    <div data-else>
      {{person.displayName}}
    </div>
  </template>
</mgt-person>

<!-- Retemplate the line properties -->
<mgt-person view="threeLines">
  <template data-type="line1">
    <div>
      Hello, my name is: {{person.displayName}}
    </div>
  </template>
  <template data-type="line2">
    <div>
      Super cool
    </div>
  </template>
  <template data-type="line3">
    <div>
      Loves MGT
    </div>
  </template>
</mgt-person>

<mgt-person view="fourLines">
  <template data-type="line1">
    <div>
      Hello, my name is: {{person.displayName}}
    </div>
  </template>
  <template data-type="line2">
    <div>
      Musician
    </div>
  </template>
  <template data-type="line3">
    <div>
      Calif records
    </div>
  </template>
  <template data-type="line4">
    <div>
      {{person.mail}}
    </div>
  </template>
</mgt-person>

<!-- Person-card template -->
<mgt-person person-query="me" view="twolines" person-card="hover">
	<template data-type="person-card">
		My custom person card experience
	</template>
</mgt-person>

Carte Personne

Le mgt-person composant peut afficher un mgt-person-card en pointant ou en cliquant.

Ajouter le contrôle à la page HTML

<mgt-person person-query="me" person-card="hover"></mgt-person>

Pour plus d’informations sur la création de modèles, le style et les attributs, consultez Composant Carte de personne.

Configuration globale des composants

La MgtPerson classe expose un objet statique config qui configure tous les composants de personne dans l’application.

L’exemple suivant montre comment utiliser l’objet config.

import { MgtPerson } from '@microsoft/mgt-components';

MgtPerson.config.useContactApis = false;

Les propriétés suivantes sont disponibles sur l’objet config.

Autorisations de Microsoft Graph

Ce contrôle 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. Certaines configurations peuvent entraîner plusieurs appels à Microsoft Graph. Lorsque ces appels peuvent utiliser des autorisations différentes, chaque API et jeu d’autorisations se trouve dans une ligne distincte.

Sous-composants

Le mgt-person 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-card.

Authentification

Le contrôle utilise le fournisseur d’authentification global décrit dans la documentation sur l’authentification pour extraire les données requises.

Cache

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.

Localisation

Le contrôle expose les variables suivantes qui peuvent être localisées. Pour plus d’informations sur la configuration de la localisation, consultez Localisation des composants.