Person-Card-Komponente im Microsoft Graph-Toolkit

Artikel
07/03/2024

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.

HTML
React

Öffnen Sie dieses Beispiel in mgt.dev.

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.

HTML
React

Öffnen Sie dieses Beispiel in mgt.dev.

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`

Freigeben über