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 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.
Exemple utilisant mgt-person-carte 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.
Configuration globale des composants
La MgtPersonCard classe expose un objet statique config qui configure tous les composants carte personne dans l’application. L’objet config configure les sections et les API utilisées par la personne carte 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 la personne carte composant 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 personne carte. |
Sections carte personnes
Le 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 personne carte organization section est affichée. La valeur par défaut est true. |
| mailMessages | boolean- Indique si la personne carte section messages est affichée. La valeur par défaut est true. |
| fichiers | boolean- Indique si la personne carte section fichiers est affichée. La valeur par défaut est true. |
| profil | boolean- Indique si la personne carte section profil 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 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 microsoftTeamsLibTeamsHelper.
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-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 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 | Chaîne | URI d’image lié à la personne affichée dans le carte. |
| inherit-details | Aucune | Permet à carte personne 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 utilisateur pour récupérer les données affichées sur le composant carte personne |
| person-query | Chaîne | Permet aux développeurs de fournir une requête-personne pour récupérer les données affichées sur le composant carte personne |
| carte personne | Chaîne | Spécifie que le person-card composant peut être affiché sous la forme d’une fenêtre contextuelle carte 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 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 personne carte. |
| 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 le 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 du 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 | /Moi | 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 définir sur 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 définir sur 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 définir sur 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 personne carte fonctionner en fonction de la configuration globale de la personne carte.
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. 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 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 carte 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 |
Commentaires
Bientôt disponible : Tout au long de 2024, nous allons supprimer progressivement GitHub Issues comme mécanisme de commentaires pour le contenu et le remplacer par un nouveau système de commentaires. Pour plus d’informations, consultez https://aka.ms/ContentUserFeedback.
Envoyer et afficher des commentaires pour