Person-Card composant dans le Kit de ressources Microsoft Graph

Article
11/07/2024

Un composant Person-Card est un composant réactif qui permet d’afficher plus d’informations relatives à une personne. Il est utilisé comme menu volant sur le mgt-person composant.

Pour plus d’informations sur le mgt-person composant, consultez mgt-person.

Exemple utilisant mgt-person

L’exemple suivant montre l’utilisation du mgt-person-card composant avec un mgt-person composant. Pointez ou cliquez sur la personne pour afficher la carte de personne.

HTML
React

Ouvrez cet exemple dans mgt.dev.

Exemple utilisant mgt-person-card comme composant autonome

L’exemple suivant illustre l’utilisation du mgt-person-card composant . Utilisez l’éditeur de code pour voir comment les propriétés modifient le comportement du composant.

HTML
React

Ouvrez cet exemple dans mgt.dev.

Configuration globale des composants

La MgtPersonCardConfig classe expose des propriétés de configuration statiques qui configurent tous les composants de carte de personne dans l’application. La classe configure les sections et les API utilisées par la carte de personne pour extraire des détails sur un utilisateur à partir de Microsoft Graph.

Par défaut, toutes les sections et API sont activées. L’exemple suivant montre comment utiliser les propriétés de classe pour désactiver des sections ou des API.

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

MgtPersonCardConfig.useContactApis = false;
MgtPersonCardConfig.sections.profile = false;
MgtPersonCardConfig.sections.files = false;

Les propriétés suivantes sont disponibles.

Propriété	Description
useContactApis	`boolean` - Indique si le composant de carte de personne peut utiliser l’API de contact Microsoft Graph pour rechercher des coordonnées et des photos. La valeur par défaut est `true`.
sections	`object` - Configure les sections affichées dans la carte de personne.
isSendMessageVisible	`boolean` - Indique si le bouton Envoyer un message est visible. La valeur par défaut est `true`.

Sections de carte de personne

La carte de personne contient plusieurs sections configurables pour afficher les détails de la personne :

Contact : informations de contact telles que la messagerie, le téléphone, la position, l’emplacement, etc.
Organisation : Graphe organisationnel avec des responsables, des rapports directs et des personnes pertinentes.
Messages : messages électroniques les plus pertinents avec l’utilisateur connecté actuel.
Fichiers : fichiers partagés les plus pertinents avec l’utilisateur connecté actuel.
Profil : informations de profil telles que les projets, les compétences, les langues, etc.

Les sections sont chargées par défaut, mais elles peuvent être désactivées globalement via la propriété d’objet MgtPersonCardConfig.sections . Les propriétés suivantes sont disponibles.

Propriété	Description
organisation	`boolean` - Indique si la section organisation de la carte de personne est affichée. La valeur par défaut est `true`.
mailMessages	`boolean` - Indique si la section messages de la carte de personne est affichée. La valeur par défaut est `true`.
fichiers	`boolean` - Indique si la section fichiers de carte de personne est affichée. La valeur par défaut est `true`.
profil	`boolean` - Indique si la section profil de carte de personne est affichée. La valeur par défaut est `true`.
lock-tab-navigation	`boolean` - Autorise le verrouillage de la navigation à l’aide d’onglets afin qu’elle ne sorte pas de la section de la carte. La valeur par défaut est `false`.

Pour désactiver une section, définissez la propriété false sur dans le code d’initialisation de votre application :

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

MgtPersonCardConfig.sections.profile = false;

Configuration des intégrations Teams

Le composant Person-Card permet à l’utilisateur de contacter la personne cible, y compris via la conversation Teams. Si vous utilisez le composant dans une application d’onglet Teams, vous pouvez vous assurer que le composant est lié directement à une conversation au lieu d’ouvrir une fenêtre de navigateur en définissant dans microsoftTeamsLibTeamsHelper.

Si le composant Person-Card n’est pas en mesure de détecter la bibliothèque Teams, le composant tente d’ouvrir le client web Teams à la place.

import * as microsoftTeams from "@microsoft/teams-js";
import { TeamsHelper } from "@microsoft/mgt-element";

TeamsHelper.microsoftTeamsLib = microsoftTeams;

Propriétés

Par défaut, le mgt-person composant transmet les détails de la personne au mgt-person-card composant. Toutefois, vous pouvez utiliser ces attributs pour le modifier lors de la création de modèles du mgt-person composant ou lors de l’utilisation du mgt-person-card composant en tant que composant autonome.

Attribut	Type	Description
détails de la personne	MicrosoftGraph.User MicrosoftGraph.Person MicrosoftGraph.Contact	Objet Person tel que défini par Microsoft Graph, contenant des détails liés à l’utilisateur.
person-image	Chaîne	URI d’image lié à la personne affichée dans la carte.
inherit-details	Aucune	Permet à person-card de parcourir l’arborescence parente pour `mgt-person` que le composant utilise les mêmes `person-details` données et `person-image` .
user-id	Chaîne	Permet aux développeurs de fournir un ID d’utilisateur pour récupérer les données affichées sur le composant carte de personne
person-query	Chaîne	Permet aux développeurs de fournir une requête de personne pour récupérer les données affichées sur le composant de carte de personne
carte de personne	Chaîne	Spécifie si le `person-card` composant peut être affiché sous forme de carte contextuelle lorsque vous pointez ou cliquez sur le `mgt-person` composant. Les valeurs autorisées sont `hover` ou `click`.

Propriétés personnalisées CSS

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

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

.person-card {
  --person-card-nav-back-arrow-hover-color: green;
  --person-card-icon-color: red;
  --person-card-line1-font-size: 30px;
  --person-card-line1-font-weight: 800;
  --person-card-line1-line-height: 38px;
  --person-card-line2-font-size: 24px;
  --person-card-line2-font-weight: 600;
  --person-card-line2-line-height: 30px;
  --person-card-line3-font-size: 24px;
  --person-card-line3-font-weight: 300;
  --person-card-line3-line-height: 29px;
  --person-card-avatar-size: 85px;
  --person-card-details-left-spacing: 25px;
  --person-card-avatar-top-spacing: 25px;
  --person-card-details-bottom-spacing: 20px;
  --person-card-background-color: pink;
  --person-card-expanded-background-color-hover: blue;
  --person-card-icon-hover-color: magenta;
  --person-card-show-more-color: blue;
  --person-card-show-more-hover-color: green;
  --person-card-fluent-background-color: yellow;
  --person-card-line1-text-color: purple;
  --person-card-line2-text-color: blue;
  --person-card-line3-text-color: green;
  --person-card-fluent-background-color-hover: orange;
  --person-card-base-icons-left-spacing: 110px;

  /** person-card sections tokens */

  /** Organization */
  --organization-active-org-member-target-background-color: blue;
  --organization-title-color: green;
  --organization-sub-title-color: yellow;
  --organization-hover-color: grey;
  --organization-coworker-hover-color: grey;
  --organization-coworker-border-color: purple;
  --organization-active-org-member-border-color: red;
  --organization-coworker-person-avatar-size: 50px;
  --organization-member-person-avatar-size: 60px;
  --organization-direct-report-person-avatar-size: 80px;

  /** Style for the avatar-size in the person-card sections */
  --organization-member-person-avatar-size: 60px;
  --coworker-person-avatar-size: 50px;
  --direct-report-person-avatar-size: 40px;

  /** Files: Uses custom css properties for mgt-file-list and mgt-file */

  /** Messages */

  --message-subject-color: purple;
  --message-from-color: blue;
  --message-color: black;
  --message-hover-color: grey;
  --message-subject-font-size: 18px;
  --message-subject-font-weight: 600;
  --message-subject-line-height: 25px;
  --message-from-font-size: 40px;
  --message-from-font-weight: 800;
  --message-date-color: purple;
  --message-from-line-height: 25px;

  /** Contact */

  --contact-title-color: blue;
  --contact-value-color: green;
  --contact-link-color: red;
  --contact-link-hover-color: purple;
  --contact-background-color: grey;
  --contact-copy-icon-color: yellow;

  /** Profile */

  --profile-title-color: blue;
  --profile-background-color: grey;
  --profile-token-item-color: blue;
  --profile-token-overflow-color: purple;
  --profile-section-title-color: black;
  --profile-token-item-background-color: yellow;
}

Pour en savoir plus, consultez composants de style.

Modèles

Le composant Person-Card utilise des modèles qui vous permettent d’ajouter ou de remplacer des 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
no-data	null	Modèle utilisé lorsqu’aucune donnée n’est disponible.
Valeur par défaut.	`person`: objet de détails de la personne `personImage`: URL de l’image	Le modèle par défaut remplace l’intégralité du composant par le vôtre.
détails de la personne	`person`: objet de détails de la personne	Modèle utilisé pour afficher la partie supérieure de la carte de personne.
détails supplémentaires	`person`: objet de détails de la personne `personImage`: URL de l’image	Modèle utilisé pour ajouter du contenu personnalisé au conteneur de détails supplémentaires.

Par exemple, vous pouvez utiliser un modèle pour personnaliser le composant attaché au mgt-person composant et un modèle pour ajouter des détails supplémentaires à la carte.

<mgt-person person-query="me" view="twolines" person-card="hover">
  <template data-type="person-card">
    <mgt-person-card inherit-details>
      <template data-type="additional-details">
        <h3>Stuffed Animal Friends:</h3>
        <ul>
          <li>Giraffe</li>
          <li>lion</li>
          <li>Rabbit</li>
        </ul>
      </template>
    </mgt-person-card>
  </template>
</mgt-person>

É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é
`expanded`	L’utilisateur a ouvert la section des détails développés de la carte	Aucune	Non	Oui	Oui, sauf si vous remplacez le modèle par défaut

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

Autorisations de Microsoft Graph

Le contrôle Person-Card 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	Section
Dans toutes les configurations	User.Read, User.ReadWrite	/me	Par défaut
`personDetails` défini avec le de l’utilisateur `id` , mais sans e-mail, ou `userId` défini	User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All	/users/{id}	Par défaut
`personDetails` défini avec le de l’utilisateur `id` , mais sans e-mail, ou `userId` défini	User.ReadBasic.All, User.Read.All, User.ReadWrite.All	/users/{id}/photo/$value	Par défaut
`personQuery` se mettre à `me`	User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All	/me, /users/{id}/photo/$value	Par défaut
`personQuery` se mettre à `me`	User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, User.ReadWrite.All	/me/photo/$value	Par défaut
`personQuery` définir sur une valeur différente de `me`	People.Read, People.Read.All	/me/people/ ?$search=	Par défaut
`personQuery` définir sur une valeur différente de `me` et `config.useContactApis` définir sur `true` (par défaut)	Contacts.Read, Contacts.ReadWrite	/me/contacts/*	Par défaut
`personQuery` définir sur une valeur différente de `me` et `config.useContactApis` définir sur `false`	User.ReadBasic.All, User.Read.All, User.ReadWrite.All	/users/{id}/photo/$value	Par défaut
`showPresence` se mettre à `true`	Presence.Read.All	/users/{id}/presence	Par défaut
`sections.organization` enabled (valeur par défaut)	User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All	/users/{id} ?$expand=manager($levels=max), /users/${id}/directReports	Organisation
`sections.organization.showWorksWith` set (par défaut)	People.Read.All	/users/{id}/people	Organisation
`sections.mailMessages` enabled (valeur par défaut)	Mail.ReadBasic, Mail.Read, Mail.ReadWrite	/me/messages	Messages
`sections.files` enabled (valeur par défaut)	Sites.Read.All, Sites.ReadWrite.All	/me/insights/shared et /me/insights/used	Fichiers
`sections.profile` enabled (valeur par défaut)	User.Read.All, User.ReadWrite.All	/users/{id}/profile	Profil

La getMgtPersonCardScopes() fonction retourne un tableau d’étendues requises pour que la carte de personne fonctionne en fonction de la configuration globale de la carte de personne.

import { getMgtPersonCardScopes } from `@microsoft/mgt-components`;

const neededScopes = getMgtPersonCardScopes();

Sous-composants

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

Authentification

Le contrôle Person-Card utilise le fournisseur d’authentification global décrit dans la documentation sur l’authentification.

Cache

Importante

Le mgt-person-card composant récupère les données de la personne de base du composant parent mgt-person sans appeler Microsoft Graph. Quand mgt-person-card est utilisé séparément, il récupère les données nécessaires et les met en cache. Les données affichées dans les sections de la carte sont récupérées séparément et ne sont pas mises en cache.

Magasin d’objets	Données mises en cache	Remarques
`people`	Informations de la personne	Utilisé lorsque `personQuery` est spécifié et que sa valeur est différente de `me`
`photos`	Photo de la personne
`presence`	Présence de la personne	Utilisé, quand `showPresence` est défini sur `true`
`users`	Informations utilisateur de la personne	Utilisé lorsque `userId` est spécifié ou que est `personQuery` défini sur `me`

Pour plus d’informations sur la configuration du cache, consultez Mise en cache.

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
endOfCard	`End of the card`
quickMessage	`Send a quick message`
expandDetailsLabel	`Expand details`
renderOverviewSectionLabel	`Render overview section`
sendMessageLabel	`Send message`
emailButtonLabel	`Email`
callButtonLabel	`Call`
chatButtonLabel	`Chat`
videoButtonLabel	`Video`
closeCardLabel	`Close card`

Vous pouvez également localiser les variables suivantes dans les sections de carte de personne.

Contact

Nom de la chaîne	Valeur par défaut
contactSectionTitle	`Contact`
emailTitle	`Email`
chatTitle	`Teams`
businessPhoneTitle	`Business Phone`
cellPhoneTitle	`Mobile Phone`
departmentTitle	`Department`
personTitle	`Email`
officeLocationTitle	`Office Location`
copyToClipboardButton	`Copy to clipboard`

Fichiers

Nom de la chaîne	Valeur par défaut
showMoreSubtitle	`Show more items`
filesSectionTitle	`Files`
sharedTextSubtitle	`Shared`

Messages

Nom de la chaîne	Valeur par défaut
emailSectionTitle	`Emails`

Organisation

Nom de la chaîne	Valeur par défaut
reportsToSectionTitle	`Reports to`
directReportsSectionTitle	`Direct reports`
organizationSectionTitle	`Organization`
youWorkWithSubSectionTitle	`You work with`
userWorksWithSubSectionTitle	`works with`

Profil

Nom de la chaîne	Valeur par défaut
SkillsAndExperienceSectionTitle	`Skills & Experience`
AboutCompactSectionTitle	`About`
SkillsSubSectionTitle	`Skills`
LanguagesSubSectionTitle	`Languages`
WorkExperienceSubSectionTitle	`Work Experience`
EducationSubSectionTitle	`Education`
professionalInterestsSubSectionTitle	`Professional Interests`
personalInterestsSubSectionTitle	`Personal Interests`
birthdaySubSectionTitle	`Birthday`
currentYearSubtitle	`Current`
socialMediaSubSectionTitle	`Social Media`

Partager via