Composant Person dans le Kit de ressources Microsoft Graph

  • Article

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-carte pour afficher un carte volant 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.

Attribut Propriété Description
user-id userId Définissez sur un ID utilisateur pour extraire les détails et l’image de cet utilisateur à partir de Microsoft Graph.
person-query personQuery Définissez sur le nom ou l’adresse e-mail d’une personne pour rechercher une personne dans Microsoft Graph et récupérer les détails et l’image de la première personne.
détails de la personne personDetails Définissez sur un objet représentant une personne. Fonctionne avec l’objet des personnes, utilisateurs, contacts ou groupe, ressources.
détails de secours fallbackDetails Définissez sur un objet représentant une personne lorsqu’aucun utilisateur/personne/contact n’est trouvé dans Microsoft Graph.
person-image personImage Définissez l’image à afficher pour la personne.
person-presence personPresence Définissez la présence de la personne.
fetch-image fetchImage Définissez l’indicateur pour récupérer personImage automatiquement à partir de Microsoft Graph en fonction de l’objet personDetails fourni par l’utilisateur.
disable-image-fetch disableImageFetch Définissez l’indicateur pour désactiver l’extraction de l’image de personne. Peut être utilisé pour éviter l’extraction inutile de Microsoft Graph lors de la spécification de la personImage propriété.
type d’avatar avatarType Définissez sur initials ou photo pour afficher l’état d’affichage ( la valeur par défaut est photo).
taille de l’avatar avatarSize Définissez la taille de l’avatar smallsur , largeou auto, ce qui permet également de déterminer la taille correcte pour le badge de présence. La valeur par défaut est auto. Si l’attribut a la threelinesview valeur ou fourlines, avatar-size est traité automatiquement comme , quelle que largesoit sa valeur réelle.
disposition verticale verticalLayout Définissez la disposition du composant sur verticale.
view view Définissez pour contrôler le rendu de la personne. La valeur par défaut est image.
image - afficher uniquement l’avatar
oneline - afficher l’avatar et la première ligne (displayName par défaut)
twolines - afficher l’avatar et deux lignes de texte (displayName et jobTitle par défaut)
threelines- afficher l’avatar et trois lignes de texte (displayNamejobTitleet department par défaut)
fourlines - afficher l’avatar et quatre lignes de texte (displayName, jobTitleet departmentemail par défaut)
Dans vertical-layout, affichez les modifications.
twolines - afficher l’avatar et deux lignes de texte (displayName et email par défaut)
threelines - afficher l’avatar et trois lignes de texte (displayName , email et department par défaut)
line1-property line1Property Définit la propriété de personDetails à utiliser pour la première ligne de texte. La valeur par défaut est displayName.
line2-property line2Property Définit la propriété du personDetails à utiliser pour la deuxième ligne de texte. La valeur par défaut est jobTitle.
line3-property line3Property Définit la propriété de personDetails à utiliser pour la troisième ligne de texte. La valeur par défaut est department.
line4-property line4Property Définit la propriété de personDetails à utiliser pour la quatrième ligne de texte. La valeur par défaut est email.
show-presence showPresence Définissez l’indicateur pour afficher la présence de la personne : la valeur par défaut est false.
Utilisation Utilisation Spécifiez où le composant est utilisé afin d’ajouter une personnalisation personnalisée pour celui-ci. Actuellement, prend uniquement en charge people tel qu’utilisé dans le composant people.
carte personne personCardInteraction Définit le comportement pour afficher la personne carte sur le composant person rendu. Les valeurs autorisées sont none, hover ou click. La valeur par défaut est none.

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 .

Événement Quand est-il émis Données personnalisées Annulable Bulles Fonctionne avec un modèle personnalisé
line1clicked Déclenché lorsque l’utilisateur clique sur line1 Objet person qui peut être un utilisateur, une personne ou un contact Microsoft Graph avec une propriété supplémentaire personImage qui contient l’URL de la photo de l’utilisateur. Non Non Oui, sauf si vous remplacez le modèle par défaut.
line2clicked Déclenché lorsque l’utilisateur clique sur line2 Objet person qui peut être un utilisateur, une personne ou un contact Microsoft Graph avec une propriété supplémentaire personImage qui contient l’URL de la photo de l’utilisateur. Non Non Oui, sauf si vous remplacez le modèle par défaut.
line3clicked Déclenché lorsque l’utilisateur clique sur line3 L’objet person , qui peut être un utilisateur, une personne ou un contact Microsoft Graph avec une propriété supplémentaire personImage qui contient l’URL de la photo de l’utilisateur. Non Non Oui, sauf si vous remplacez le modèle par défaut.
line4clicked Déclenché lorsque l’utilisateur clique sur line4 L’objet person , qui peut être un utilisateur, une personne ou un contact Microsoft Graph avec une propriété supplémentaire personImage qui contient l’URL de la photo de l’utilisateur. Non Non Oui, sauf si vous remplacez le modèle par défaut.

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 :

Type de données Contexte de données Description
Chargement none Modèle à afficher lorsque le composant est dans un état de chargement.
no-data none Modèle à afficher quand aucune image ou donnée de personne n’est disponible.
Valeur par défaut. person : objet de détails de la personne
personImage: URL de l’image
personPresence: objet de détails de présence pour person.		 Le modèle par défaut remplace l’intégralité du composant par le vôtre.
carte personne person : objet de détails de la personne
personImage: URL de l’image.		 Modèle permettant de mettre à jour le mgt-person-carte affiché lors du pointage ou du clic.
Line1 person : objet de détails de la personne Modèle pour la première ligne de métadonnées de personne.
Line2 person : objet de détails de la personne Modèle pour la deuxième ligne de métadonnées de personne.
line3 person : objet de détails de la personne Modèle pour la troisième ligne de métadonnées de personne.
ligne4 person : objet de détails de la personne Modèle pour la quatrième ligne de métadonnées de personne.

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>
Attribut Propriété Description
carte personne personCardInteraction Énumération pour déterminer l’action de l’utilisateur nécessaire à l’activation du panneau volant - hover ou click. La valeur par défaut est none.

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`;

MgtPerson.config.useContactApis = false;

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

Propriété Description
useContactApis boolean - Indique si le composant de personne peut utiliser l’API de contacts personnels Microsoft Graph pour rechercher des coordonnées et des photos. La valeur par défaut est true.

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.

Configuration Autorisation API
personDetails set without image, fetchImage set to true, avatarType set to photo, retrieved person is a contact and useContactApis set to true Contacts.Read, Contacts.ReadWrite /me/contacts/*
personDetails défini sans image, fetchImage défini sur true, avatarType défini sur photo et personne n’est pas un contact ou useContactApis est défini sur false User.ReadBasic.All, User.Read.All, User.ReadWrite.All /users/{id}/photo/$value
personDetails défini sans image, fetchImage défini sur true, avatarType défini sur photo et utilisateur spécifié par e-mail User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All /users ?$search=
personDetails défini sans image, fetchImage défini sur true, avatarType défini sur photo et utilisateur spécifié par e-mail User.ReadBasic.All, User.Read.All, User.ReadWrite.All /users/{id}/photo/$value
personDetails définir sans image, fetchImage définir sur true, avatarType définir photo sur et contact spécifiés par e-mail et useContactApis définir sur true Contacts.Read, Contacts.ReadWrite /me/contacts/*
personDetails définir sans image sur un groupe, fetchImage définir sur true, avatarType définir sur photo Group.Read.All, Group.ReadWrite.All' /groups/${groupId}/photo/$value
userId Ensemble User.ReadBasic.All /users/{id}
userId définir ou personQuery définir sur me et avatarType sur photo et disableImageFetch est false User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All /users/{id}
userId définir ou personQuery définir sur me et avatarType sur photo et disableImageFetch est false User.ReadBasic.All, User.Read.All, User.ReadWrite.All users/${userId}/photo/*
userId défini sur me et avatarType défini sur photo et disableImageFetch est false User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All /Moi
userId défini sur me et avatarType défini sur photo et disableImageFetch est false User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, User.ReadWrite.All /me/photo/$value
personQuery définir sur me et avatarType définir sur quelque chose d’autre que photo User.Read, User.ReadWrite /Moi
personQuery définir sur une valeur autre que me et avatarType définir sur quelque chose d’autre que photo People.Read, People.Read.All /me/people
personQuery définissez sur une valeur autre que me et avatarType définissez sur quelque chose d’autre que photo et /me/people n’ont retourné aucune donnée correspondant au fourni personQuery User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All /user ?$search=
personQuery définir sur une valeur autre que me et useContactApis définir sur false Personnes. Read, User.ReadBasic.All /me/people/ ?$search=, /users ?$search=
showPresence définir sur true et personQuery définir sur me Presence.Read /me/presence
showPresence définir sur true et personQuery définir sur une valeur autre que me Presence.Read.All /users/{id}/presence
personCardInteraction définir sur une valeur autre que PersonCardInteraction.none Afficher les autorisations carte personne Voir les appels d’API carte personne

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

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

Magasin d’objets Données mises en cache Remarques
photos Photo de la personne Utilisé lorsque avatarType est défini sur photo et fetchImage que a la valeur true.
presence Présence de la personne Utilisé lorsque showPresence a la valeur true.
users Informations utilisateur de la 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 S’affiche lorsqu’aucune image ou donnée de personne n’est disponible.
renderAvatar Affiche l’avatar.
renderDetails Restitue le composant détails de la personne.

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.

Nom de la chaîne Valeur par défaut
photoFor Photo for
emailAddress Email address