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 in der Regel als Flyout für die mgt-person Komponente verwendet.
Weitere Informationen zur mgt-person -Komponente finden Sie unter mgt-person.
Beispiel
Das folgende Beispiel zeigt die Verwendung der mgt-person-card Komponente mit einer mgt-person Komponente. Zeigen Sie auf die Person, um die Personenkarte anzuzeigen, und verwenden Sie den Code-Editor, um zu sehen, wie Eigenschaften das Verhalten der Komponente ändern.
Öffnen dieses Beispiels in mgt.dev
Globale Komponentenkonfiguration
Die MgtPersonCard -Klasse macht ein statisches config -Objekt verfügbar, das alle Personenkartenkomponenten in der Anwendung konfiguriert. Das config-Objekt 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 das config-Objekt verwenden, um Abschnitte oder APIs zu deaktivieren.
import { MgtPersonCard } from `@microsoft/mgt`;
MgtPersonCard.config.useContactApis = false;
MgtPersonCard.config.sections.profile = false;
Die folgenden Eigenschaften sind für das Config-Objekt 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. |
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 MgtPersonCard.config.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. |
| Profil | 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 einfach die -Eigenschaft in Ihrem App-Initialisierungscode auf false fest:
import { MgtPersonCard } from `@microsoft/mgt`;
MgtPersonCard.config.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 microsoftTeamsLibTeamsProviderfestlegen.
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';
TeamsHelper.microsoftTeamsLib = microsoftTeams;
Weitere Informationen zum TeamsProvider Anbieter finden Sie unter Microsoft Teams-Anbieter.
Eigenschaften
Standardmäßig übergibt die mgt-person Komponente die Personendetails an die mgt-person-card Komponente. Sie können diese Attribute jedoch verwenden, um dies 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 | string | 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 | string | Ermöglicht Entwicklern das Angeben der Benutzer-ID zum Abrufen von Daten, die in der Person-Card-Komponente angezeigt werden |
| person-query | string | Ermöglicht Entwicklern die Bereitstellung von Personenabfragen zum Abrufen von Daten, die in der Person-Card-Komponente angezeigt werden |
| Personenkarte | string | Gibt an, ob die person-card Komponente als Popupkarte angezeigt werden kann, wenn Sie mit dem Mauszeiger auf die Komponente zeigen oder auf die mgt-person Komponente klicken. Die zulässigen Werte sind hover oder click. |
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 den data-type Wert auf einen der folgenden Werte fest.
| Datentyp | Datenkontext | Beschreibung |
|---|---|---|
| Keine Daten | null | Die Vorlage, die verwendet wird, wenn keine Daten verfügbar sind. |
| Standard | 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 zusätzliche 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>
Veranstaltungen
Die folgenden Ereignisse werden von der Komponente ausgelöst.
| Ereignis | Wann wird es ausgegeben? | Benutzerdefinierte Daten | Abbrechbare | 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 zur Behandlung von Ereignissen finden Sie unter Ereignisse.
Benutzerdefinierte CSS-Eigenschaften
Die mgt-person-card Komponente definiert die folgenden benutzerdefinierten CSS-Eigenschaften.
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;
}
Weitere Informationen finden Sie unter Formatieren von Komponenten.
Microsoft Graph-Berechtigungen
Das Person-Card-Steuerelement verwendet die folgenden Microsoft Graph-APIs und -Berechtigungen.
| Konfiguration | Berechtigung | API | Abschnitt |
|---|---|---|---|
personDetails legen Sie mit dem des id Benutzers, aber ohne E-Mail fest, oder userId legen Sie auf fest, oder personQuery legen Sie auf fest. me |
User.ReadBasic.All | /users/{id}, /users/{id}/photo/$value | Default |
personQuery auf einen anderen Wert als festgelegt me |
People.Read | /me/people/?$search= | Default |
personQuery auf einen anderen Wert als me und config.useContactApis auf true festgelegt (Standard) |
Contacts.Read | /me/contacts/* | Default |
showPresence legen Sie auf fest true |
Presence.Read.All | /users/{id}/presence | Default |
sections.organization aktiviert (Standard) |
User.Read.All | /users/{id}/manager | Organisation |
sections.organization.showWorksWith set (Standard) |
People.Read.All | /users/{id}/people | Organisation |
sections.mailMessages aktiviert (Standard) |
Mail.ReadBasic | /me/messages | Nachrichten |
sections.files aktiviert (Standard) |
Sites.Read.All | /me/insights/shared und /me/insights/used | Dateien |
sections.profile aktiviert (Standard) |
User.Read.All | /users/{id}/profile | Profil |
Die MgtPersonCard -Klasse macht auch eine getScopes statische Methode verfügbar, die ein Array von Bereichen zurückgibt, die erforderlich sind, damit die Personenkarte basierend auf der globalen Personenkartenkonfiguration funktioniert.
import { MgtPersonCard } from `@microsoft/mgt`;
const neededScopes = MgtPersonCard.getScopes();
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 | HinwBemerkungeneise |
|---|---|---|
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 .