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 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-Karte 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 MgtPersonCard -Klasse macht ein statisches config Objekt verfügbar, das alle Personen Karte Komponenten in der Anwendung konfiguriert. Das config-Objekt konfiguriert, welche Abschnitte und APIs von der Person Karte 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 Person Karte Komponente die Microsoft Graph-Kontakt-API verwenden kann, um nach Kontaktdetails und Fotos zu suchen. Der Standardwert ist true. |
| Abschnitte | object– Konfiguriert, welche Abschnitte in der Person Karte angezeigt werden. |
Personen Karte Abschnitte
Die Person Karte 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 die Person Karte organization Abschnitt angezeigt wird. Der Standardwert ist true. |
| mailMessages | boolean– Gibt an, ob die Person Karte Nachrichtenabschnitt angezeigt wird. Der Standardwert ist true. |
| files | boolean– Gibt an, ob die Person Karte Dateiabschnitt angezeigt wird. Der Standardwert ist true. |
| profile | boolean– Gibt an, ob die Person Karte Profilabschnitt angezeigt wird. Der Standardwert ist true. |
| lock-tab-navigation | boolean– Ermöglicht das Sperren der Navigation mithilfe von Registerkarten, damit sie nicht aus dem Karte Abschnitt 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 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 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 im Karte angezeigt wird. |
| inherit-details | Keine | Ermöglicht es personen-Karte, die übergeordnete Struktur für mgt-person die Komponente zu durchlaufen, um die gleichen person-details Daten und person-image zu verwenden. |
| user-id | String | Ermöglicht Entwicklern das Bereitstellen der Benutzer-ID zum Abrufen von Daten, die in der Person-Karte-Komponente angezeigt werden. |
| person-query | String | Ermöglicht Entwicklern das Bereitstellen von Personenabfragen zum Abrufen von Daten, die in einer Person-Karte-Komponente angezeigt werden. |
| person-Karte | String | Gibt an, ob die person-card Komponente als Popup-Karte 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. |
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. |
| 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, mit der der obere Teil der Person Karte gerendert 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 zusätzliche Details in der Karte 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 | Abbrechbare | Blasen | Funktioniert mit benutzerdefinierter Vorlage |
|---|---|---|---|---|---|
expanded |
Der Benutzer hat den erweiterten Detailabschnitt des Karte | 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 erforderlich sind, damit die Person Karte funktioniert, basierend auf der globalen Person Karte Konfiguration.
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, ruft sie die erforderlichen Daten selbst ab und speichert sie zwischen. Die in den Abschnitten Karte angezeigten Daten werden separat abgerufen und nicht zwischengespeichert.
| Objektspeicher | Zwischengespeicherte Daten | Bemerkungen |
|---|---|---|
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-Karte 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 |
Feedback
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Issues stufenweise als Feedbackmechanismus für Inhalte abbauen und durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter https://aka.ms/ContentUserFeedback.
Feedback senden und anzeigen für