Freigeben über

Person-Card-Komponente im Microsoft Graph-Toolkit

Achtung

Das Microsoft Graph-Toolkit ist veraltet. Die Ausmusterungsphase beginnt am 1. September 2025, die vollständige Einstellung ist für den 28. August 2026 geplant. Entwickler sollten zur Verwendung der Microsoft Graph SDKs oder anderer unterstützter Microsoft Graph-Tools zum Erstellen von Weboberflächen migrieren. Weitere Informationen finden Sie in der Ankündigung zur Einstellung.

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-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 MgtPersonCardConfig -Klasse macht statische Konfigurationseigenschaften verfügbar, die alle Komponenten Karte Person in der Anwendung konfigurieren. Die -Klasse 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 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 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.
isSendMessageVisible boolean – Gibt an, ob die Schaltfläche Nachricht senden sichtbar ist. Der Standardwert ist true.

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 MgtPersonCardConfig.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 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 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 Zeichenfolge Ermöglicht Entwicklern das Bereitstellen einer Benutzer-ID zum Abrufen von Daten, die in der Komponente "Person-Karte" angezeigt werden
person-query Zeichenfolge Ermöglicht Entwicklern das Bereitstellen von Personenabfragen zum Abrufen von Daten, die in einer Person-Karte-Komponente angezeigt werden.
person-Karte Zeichenfolge Gibt an, ob die person-card Komponente als Popup-Karte angezeigt werden kann, wenn Sie 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, 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.

Beispielsweise können Sie eine Vorlage verwenden, um die an die mgt-person Komponente angefügte Komponente anzupassen, und eine Vorlage, um dem 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 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 Permission API Abschnitt
In allen Konfigurationen User.Read, User.ReadWrite /Ich Default
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} Default
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 Default
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 Default
personQuery legen Sie auf fest me User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, User.ReadWrite.All /me/photo/$value Default
personQuery auf einen anderen Wert als festgelegt me People.Read, People.Read.All /me/people/?$search= Default
personQuery auf einen anderen Wert als me und config.useContactApis auf true festgelegt (Standard) Contacts.Read, Contacts.ReadWrite /me/contacts/* Default
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 Default
showPresence legen Sie auf fest true Presence.Read.All /users/{id}/presence Default
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, 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-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
  • Last updated on