Person-Card-Komponente im Microsoft Graph-Toolkit
Eine Person-Card-Komponente ist eine reaktionsfähige Komponente, um weitere Informationen im Zusammenhang mit einer Person anzuzeigen. Es wird als Flyout für die mgt-person Komponente verwendet.
Weitere Informationen zur mgt-person -Komponente finden Sie unter mgt-person.
Beispiel für die Verwendung von mgt-person
Das folgende Beispiel zeigt die Verwendung der mgt-person-card Komponente mit einer mgt-person Komponente. Zeigen Oder klicken Sie auf die Person, um die Personenkarte anzuzeigen.
Beispiel für die Verwendung von mgt-person-card als eigenständige Komponente
Das folgende Beispiel zeigt die Verwendung der mgt-person-card -Komponente. Verwenden Sie den Code-Editor, um zu sehen, wie Eigenschaften das Verhalten der Komponente ändern.
Globale Komponentenkonfiguration
Die MgtPersonCardConfig -Klasse macht statische Konfigurationseigenschaften verfügbar, die alle Personenkartenkomponenten in der Anwendung konfigurieren. Die -Klasse konfiguriert, welche Abschnitte und APIs von der Personenkarte verwendet werden, um Details zu einem Benutzer aus Microsoft Graph abzurufen.
Standardmäßig sind alle Abschnitte und APIs aktiviert. Das folgende Beispiel zeigt, wie Sie die Klasseneigenschaften verwenden, um Abschnitte oder APIs zu deaktivieren.
import { MgtPersonCardConfig } from '@microsoft/mgt-components';
MgtPersonCardConfig.useContactApis = false;
MgtPersonCardConfig.sections.profile = false;
MgtPersonCardConfig.sections.files = false;
Die folgenden Eigenschaften sind verfügbar.
| Eigenschaft | Beschreibung |
|---|---|
| useContactApis |
boolean – Gibt an, ob die Personenkartenkomponente die Microsoft Graph-Kontakt-API verwenden kann, um nach Kontaktdetails und Fotos zu suchen. Der Standardwert ist true. |
| Abschnitte |
object – Konfiguriert, welche Abschnitte auf der Personenkarte angezeigt werden. |
| isSendMessageVisible |
boolean – Gibt an, ob die Schaltfläche Nachricht senden sichtbar ist. Der Standardwert ist true. |
Personenkartenabschnitte
Die Personenkarte enthält mehrere konfigurierbare Abschnitte zum Anzeigen von Personendetails:
- Kontakt: Kontaktinformationen wie E-Mail, Telefon, Position, Standort und vieles mehr.
- Organisation: Organisationsdiagramm mit Managern, direkten Berichten und relevanten Personen.
- Nachrichten: Die relevantesten E-Mail-Nachrichten mit dem aktuell angemeldeten Benutzer.
- Dateien: Relevanteste freigegebene Dateien mit dem aktuell angemeldeten Benutzer.
- Profil: Profilinformationen wie Projekte, Fähigkeiten, Sprachen und mehr.
Abschnitte werden standardmäßig geladen, können aber global über die MgtPersonCardConfig.sections Objekteigenschaft deaktiviert werden. Die folgenden Eigenschaften sind verfügbar.
| Eigenschaft | Beschreibung |
|---|---|
| Organisation |
boolean – Gibt an, ob der Organisationsabschnitt der Personenkarte angezeigt wird. Der Standardwert ist true. |
| mailMessages |
boolean – Gibt an, ob der Abschnitt "Personenkartennachrichten" angezeigt wird. Der Standardwert ist true. |
| files |
boolean – Gibt an, ob der Abschnitt "Personenkartendateien" angezeigt wird. Der Standardwert ist true. |
| profile |
boolean – Gibt an, ob der Abschnitt "Personenkartenprofil" angezeigt wird. Der Standardwert ist true. |
| lock-tab-navigation |
boolean – Ermöglicht das Sperren der Navigation mithilfe von Registerkarten, sodass sie nicht aus dem Kartenabschnitt heraus fließt. Der Standardwert ist false. |
Um einen Abschnitt zu deaktivieren, legen Sie die -Eigenschaft in Ihrem App-Initialisierungscode auf false fest:
import { MgtPersonCardConfig } from '@microsoft/mgt-components';
MgtPersonCardConfig.sections.profile = false;
Setup für Teams-Integrationen
Die Person-Card-Komponente ermöglicht es dem Benutzer, die Zielperson zu kontaktieren, auch über den Teams-Chat. Wenn Sie die -Komponente in einer Teams-Registerkarten-App verwenden, können Sie sicherstellen, dass die Komponente direkt mit einem Chat verknüpft ist, anstatt ein Browserfenster zu öffnen, indem Sie in microsoftTeamsLibTeamsHelperfestlegen.
Wenn die Person-Card Komponente die Teams-Lib nicht erkennen kann, versucht die Komponente stattdessen, den Teams-Webclient zu öffnen.
import * as microsoftTeams from "@microsoft/teams-js";
import { TeamsHelper } from "@microsoft/mgt-element";
TeamsHelper.microsoftTeamsLib = microsoftTeams;
Eigenschaften
Standardmäßig übergibt die mgt-person Komponente die Personendetails an die mgt-person-card Komponente. Sie können diese Attribute jedoch verwenden, um sie zu ändern, wenn Sie die mgt-person Komponente erstellen oder die mgt-person-card Komponente als eigenständige Komponente verwenden.
| Attribut | Typ | Beschreibung |
|---|---|---|
| Person-Details | MicrosoftGraph.User MicrosoftGraph.Person MicrosoftGraph.Contact |
Von Microsoft Graph definiertes Personenobjekt, das Details zum Benutzer enthält. |
| Person-Image | Zeichenfolge | Bild-URI im Zusammenhang mit der person, die auf der Karte angezeigt wird. |
| inherit-details | Keine | Ermöglicht es der Person-Karte, die übergeordnete Struktur mgt-person für die Komponente zu durchlaufen, um die gleichen person-details Daten und person-image zu verwenden. |
| user-id | Zeichenfolge | Ermöglicht Entwicklern das Bereitstellen einer Benutzer-ID zum Abrufen von Daten, die in der Person-Card-Komponente angezeigt werden |
| person-query | Zeichenfolge | Ermöglicht Entwicklern das Bereitstellen von Personenabfragen zum Abrufen von Daten, die in der Person-Card-Komponente angezeigt werden |
| Personenkarte | Zeichenfolge | Gibt an, ob die person-card Komponente als Popupkarte angezeigt werden kann, wenn Sie mit der Maus darauf zeigen oder auf die mgt-person Komponente klicken. Die zulässigen Werte sind hover oder click. |
Benutzerdefinierte CSS-Eigenschaften
Die mgt-person-card Komponente definiert die folgenden benutzerdefinierten CSS-Eigenschaften.
<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;
}
Weitere Informationen finden Sie unter Formatieren von Komponenten.
Vorlagen
Die Person-Card-Komponente verwendet Vorlagen , mit denen Sie Teile der Komponente hinzufügen oder ersetzen können. Um eine Vorlage anzugeben, schließen Sie ein <template> Element innerhalb einer Komponente ein, und legen Sie auf data-type einen der folgenden Werte fest.
| Datentyp | Datenkontext | Beschreibung |
|---|---|---|
| Keine Daten | null | Die Vorlage, die verwendet wird, wenn keine Daten verfügbar sind. |
| Vorgabe |
person: Das Objekt "Personendetails"personImage: Die URL des Bilds |
Die Standardvorlage ersetzt die gesamte Komponente durch Ihre eigene. |
| Person-Details |
person: Das Objekt "Personendetails" |
Die Vorlage, die zum Rendern des oberen Teils der Personenkarte verwendet wird. |
| zusätzliche Details |
person: Das Objekt "Personendetails"personImage: die URL des Bilds |
Die Vorlage, die zum Hinzufügen von benutzerdefiniertem Inhalt zum Zusätzlichen Detailcontainer verwendet wird. |
Sie können beispielsweise eine Vorlage verwenden, um die an die mgt-person Komponente angefügte Komponente anzupassen, und eine Vorlage, um der Karte weitere Details hinzuzufügen.
<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>
Ereignisse
Die folgenden Ereignisse werden von der Komponente ausgelöst.
| Ereignis | Wann wird es ausgegeben? | Benutzerdefinierte Daten | Annullierbar | Blasen | Funktioniert mit benutzerdefinierter Vorlage |
|---|---|---|---|---|---|
expanded |
Der Benutzer hat den erweiterten Detailabschnitt der Karte geöffnet. | Keine | Nein | Ja | Ja, es sei denn, Sie überschreiben die Standardvorlage. |
Weitere Informationen zum Behandeln von Ereignissen finden Sie unter Ereignisse.
Microsoft Graph-Berechtigungen
Das Person-Card-Steuerelement verwendet die folgenden Microsoft Graph-APIs und -Berechtigungen. Für jede aufgerufene API muss der Benutzer mindestens über eine der aufgeführten Berechtigungen verfügen.
| Konfiguration | Berechtigung | API | Abschnitt |
|---|---|---|---|
| In allen Konfigurationen | User.Read, User.ReadWrite | /Ich | Standard |
personDetails festlegen mit dem des id Benutzers, aber ohne E-Mail, oder userId festlegen |
User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All | /users/{id} | Standard |
personDetails festlegen mit dem des id Benutzers, aber ohne E-Mail, oder userId festlegen |
User.ReadBasic.All, User.Read.All, User.ReadWrite.All | /users/{id}/photo/$value | Standard |
personQuery legen Sie auf fest 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 | Standard |
personQuery legen Sie auf fest me |
User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, User.ReadWrite.All | /me/photo/$value | Standard |
personQuery auf einen anderen Wert als festgelegt me |
People.Read, People.Read.All | /me/people/?$search= | Standard |
personQuery auf einen anderen Wert als me und config.useContactApis auf true festgelegt (Standard) |
Contacts.Read, Contacts.ReadWrite | /me/contacts/* | Standard |
personQuery legen Sie auf einen anderen Wert als me und config.useContactApis auf fest. false |
User.ReadBasic.All, User.Read.All, User.ReadWrite.All | /users/{id}/photo/$value | Standard |
showPresence legen Sie auf fest true |
Presence.Read.All | /users/{id}/presence | Standard |
sections.organization aktiviert (Standard) |
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 (Standard) |
People.Read.All | /users/{id}/people | Organisation |
sections.mailMessages aktiviert (Standard) |
Mail.ReadBasic, Mail.Read, Mail.ReadWrite | /me/messages | Nachrichten |
sections.files aktiviert (Standard) |
Sites.Read.All, Sites.ReadWrite.All | /me/insights/shared und /me/insights/used | Dateien |
sections.profile aktiviert (Standard) |
User.Read.All, User.ReadWrite.All | /users/{id}/profile | Profil |
Die getMgtPersonCardScopes() Funktion gibt ein Array von Bereichen zurück, die für die Funktion der Personenkarte erforderlich sind, basierend auf der konfiguration der globalen Personenkarte.
import { getMgtPersonCardScopes } from `@microsoft/mgt-components`;
const neededScopes = getMgtPersonCardScopes();
Unterkomponenten
Die mgt-person-card Komponente besteht aus einem oder mehreren Unterkomponenten, die möglicherweise andere Als die zuvor aufgeführten Berechtigungen erfordern. Weitere Informationen finden Sie in der Dokumentation zu den einzelnen Unterkomponenten:
Authentifizierung
Das Person-Card-Steuerelement verwendet den in der Authentifizierungsdokumentation beschriebenen globalen Authentifizierungsanbieter.
Cache
Wichtig
Die mgt-person-card Komponente ruft die grundlegenden Personendaten aus der übergeordneten mgt-person Komponente ab, ohne Microsoft Graph aufzurufen. Wenn mgt-person-card separat verwendet wird, werden die erforderlichen Daten selbst abgerufen und zwischengespeichert. Die in den Abschnitten der Karte angezeigten Daten werden separat abgerufen und nicht zwischengespeichert.
| Objektspeicher | Zwischengespeicherte Daten | Hinweise |
|---|---|---|
people |
Informationen zur Person | Wird verwendet, wenn personQuery angegeben ist und sein Wert sich von dem unterscheidet. me |
photos |
Foto der Person | |
presence |
Anwesenheit einer Person | Wird verwendet, wenn showPresence auf festgelegt ist true |
users |
Benutzerinformationen der Person | Wird verwendet, wenn userId angegeben oder auf personQuery festgelegt ist. me |
Weitere Informationen zum Konfigurieren des Caches finden Sie unter Zwischenspeichern.
Lokalisierung
Das -Steuerelement macht die folgenden Variablen verfügbar, die lokalisiert werden können. Ausführliche Informationen zum Einrichten der Lokalisierung finden Sie unter Lokalisieren von Komponenten.
| Zeichenfolgenname | Standardwert |
|---|---|
| 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 |
Sie können auch die folgenden Variablen in den Abschnitten person-card lokalisieren.
Kontakt
| Zeichenfolgenname | Standardwert |
|---|---|
| contactSectionTitle | Contact |
| emailTitle | Email |
| chatTitle | Teams |
| businessPhoneTitle | Business Phone |
| cellPhoneTitle | Mobile Phone |
| departmentTitle | Department |
| personTitle | Email |
| officeLocationTitle | Office Location |
| copyToClipboardButton | Copy to clipboard |
Dateien
| Zeichenfolgenname | Standardwert |
|---|---|
| showMoreSubtitle | Show more items |
| filesSectionTitle | Files |
| sharedTextSubtitle | Shared |
Nachrichten
| Zeichenfolgenname | Standardwert |
|---|---|
| emailsSectionTitle | Emails |
Organisation
| Zeichenfolgenname | Standardwert |
|---|---|
| reportsToSectionTitle | Reports to |
| directReportsSectionTitle | Direct reports |
| organizationSectionTitle | Organization |
| youWorkWithSubSectionTitle | You work with |
| userWorksWithSubSectionTitle | works with |
Profil
| Zeichenfolgenname | Standardwert |
|---|---|
| SkillsAndExperienceSectionTitle | Skills & Experience |
| InfoCompactSectionTitle | About |
| SkillsSubSectionTitle | Skills |
| LanguagesSubSectionTitle | Languages |
| WorkExperienceSubSectionTitle | Work Experience |
| EducationSubSectionTitle | Education |
| professionalInterestsSubSectionTitle | Professional Interests |
| personalInterestsSubSectionTitle | Personal Interests |
| birthdaySubSectionTitle | Birthday |
| currentYearSubtitle | Current |
| socialMediaSubSectionTitle | Social Media |