Person-Card composant dans le Kit de ressources Microsoft Graph
Un composant Person-Card est un composant réactif qui permet d’afficher plus d’informations relatives à une personne. Il est généralement utilisé comme menu volant sur le mgt-person composant.
Pour plus d’informations sur le mgt-person composant, consultez mgt-person.
Exemple
L’exemple suivant montre l’utilisation du mgt-person-card composant avec un mgt-person composant. Pointez sur la personne pour voir la carte de personne et utilisez l’éditeur de code pour voir comment les propriétés modifient le comportement du composant.
Ouvrir cet exemple dans mgt.dev
Configuration globale des composants
La MgtPersonCard classe expose un objet statique config qui configure tous les composants de carte de personne dans l’application. L’objet config 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 l’objet config pour désactiver des sections ou des API.
import { MgtPersonCard } from `@microsoft/mgt`;
MgtPersonCard.config.useContactApis = false;
MgtPersonCard.config.sections.profile = false;
Les propriétés suivantes sont disponibles sur l’objet config.
| 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. |
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 MgtPersonCard.config.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 simplement la propriété false sur dans le code d’initialisation de votre application :
import { MgtPersonCard } from `@microsoft/mgt`;
MgtPersonCard.config.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 microsoftTeamsLibTeamsProvider.
Si le composant Person-Card ne parvient pas à 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';
TeamsHelper.microsoftTeamsLib = microsoftTeams;
Pour plus d’informations sur le TeamsProvider fournisseur, consultez Fournisseur Microsoft Teams.
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 modifier cela 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 | string | URI d’image lié à la personne affichée dans la carte. |
| inherit-details | Aucun. | 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 | string | Permet aux développeurs de fournir un id utilisateur pour récupérer les données affichées sur le composant carte de personne |
| person-query | string | 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 que 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. |
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 la data-type valeur sur l’une 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 personnepersonImage: 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 personnepersonImage: 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 dans 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 | Aucun | 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.
Propriétés personnalisées CSS
Le mgt-person-card composant définit les propriétés personnalisées CSS suivantes.
mgt-person {
--person-card-display-name-font-size: 40px;
--person-card-display-name-color: #ffffff;
--person-card-title-font-size: 20px;
--person-card-title-color: #ffffff;
--person-card-subtitle-font-size: 10px;
--person-card-subtitle-color: #ffffff;
--person-card-details-title-font-size: 10px;
--person-card-details-title-color: #b3bf0a;
--person-card-details-item-font-size: 20px;
--person-card-details-item-color: #3abf0a;
--person-card-background-color: #000000;
--person-card-contact-link-color: #ff0000;
--person-card-contact-link-hover-color: #00ff00;
--person-card-show-more-color: #ff0000;
--person-card-show-more-hover-color: #00ff00;
--person-card-base-links-color: #ff0000;
--person-card-base-links-hover-color: #00ff00;
--person-card-tab-nav-color: #ff0000;
--person-card-active-org-member-color: #ff0000;
--person-card-nav-back-arrow-hover-color: #00ff00;
--person-card-nav-back-arrow-color: #ff0000;
}
Pour en savoir plus, consultez composants de style.
Autorisations de Microsoft Graph
Le contrôle Person-Card utilise les API et autorisations Microsoft Graph suivantes.
| Configuration | Autorisation | API | Section |
|---|---|---|---|
personDetails défini avec le de l’utilisateur id , mais sans courrier électronique, ou userId défini, ou personQuery défini sur me |
User.ReadBasic.All | /users/{id}, /users/{id}/photo/$value | Valeur par défaut |
personQuery définir sur une valeur différente de me |
People.Read | /me/people/?$search= | Valeur 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 | /me/contacts/* | Valeur par défaut |
showPresence définir sur true |
Presence.Read.All | /users/{id}/presence | Valeur par défaut |
sections.organization enabled (valeur par défaut) |
User.Read.All | /users/{id}/manager | Organisation |
sections.organization.showWorksWith set (par défaut) |
People.Read.All | /users/{id}/people | Organisation |
sections.mailMessages enabled (valeur par défaut) |
Mail.ReadBasic | /me/messages | Messages |
sections.files enabled (valeur par défaut) |
Sites.Read.All | /me/insights/shared et /me/insights/used | Fichiers |
sections.profile enabled (valeur par défaut) |
User.Read.All | /users/{id}/profile | Profil |
La MgtPersonCard classe expose également une getScopes méthode statique qui retourne un tableau d’étendues requis pour que la carte de personne fonctionne en fonction de la configuration globale de la carte de personne.
import { MgtPersonCard } from `@microsoft/mgt`;
const neededScopes = MgtPersonCard.getScopes();
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. Lorsque 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 .