Person-Komponente im Microsoft Graph-Toolkit

Artikel
02/14/2024

Die Person-Komponente wird verwendet, um eine Person oder einen Kontakt mithilfe ihres Fotos, Namens, ihrer E-Mail-Adresse oder anderer Personendetails anzuzeigen.

Die Person-Komponente verwendet auch die mgt-person-card , um eine Flyoutkarte mit zusätzlichen Informationen zum Benutzer anzuzeigen. Weitere Informationen finden Sie im Abschnitt Personenkarte .

Beispiel

Im folgenden Beispiel wird eine Person angezeigt, die die mgt-person -Komponente verwendet. Sie können den Code-Editor verwenden, um zu sehen, wie Eigenschaften das Verhalten der Komponente ändern.

HTML
React

Öffnen Sie dieses Beispiel in mgt.dev.

Festlegen der Personendetails

Sie können drei Eigenschaften verwenden, um die Personendetails festzulegen. Verwenden Sie nur eine der folgenden Eigenschaften pro Instanz:

Legen Sie das Attribut oder userId die user-id Eigenschaft fest, um den Benutzer mithilfe seiner ID aus Microsoft Graph abzurufen.
Legen Sie das Attribut oder personQuery die person-query Eigenschaft fest, um Microsoft Graph nach einer bestimmten Person zu durchsuchen. Es wählt die erste verfügbare Person aus und ruft die Details der Person ab. Eine E-Mail funktioniert am besten, um sicherzustellen, dass die richtige Person abgefragt wird, aber auch ein Name funktioniert.
Legen Sie das Attribut oder personPresence die person-presence Eigenschaft fest, um einen Anwesenheitsbadge manuell zum Avatar einer Person hinzuzufügen.
Legen Sie das Attribut oder avatarSize die avatar-size Eigenschaft auf oder large festsmall, um die Größe des Avatars zu bestimmen. Dadurch wird dem Avatar der richtige Anwesenheitsbadge hinzugefügt. Sie müssen die korrekten entsprechenden benutzerdefinierten CSS-Eigenschaften auswählen, die unten gezeigt werden, um die Avatargröße weiter anzupassen. Standardmäßig wird der Wert auf festgelegt, wodurch auto basierend auf der view -Eigenschaft automatisch entschieden wird, wie die Anwesenheit gerendert werden soll. Es wird empfohlen, zu verwenden small , wenn Ihr Avatar kleiner als 32 x 32 Pixel ist.
Verwenden Sie das Attribut oder personDetails die person-details Eigenschaft, um die Personendetails manuell festzulegen, wie im folgenden Beispiel gezeigt.
```
let personControl = document.getElementById('myPersonControl');
personControl.personDetails = {
    displayName: 'Nikola Metulev',
    mail: 'nikola@contoso.com',
    personImage: 'url'
}
```
Wenn kein Image bereitgestellt wird, wird eines abgerufen (falls verfügbar).
Standardmäßig fordert die Personenkomponente nur den Standardmäßigen Microsoft Graph-Benutzersatz an. Um zusätzliche Eigenschaften anzufordern, deklarieren Sie sie als einen beliebigen Teil von line(x)Property.

Eigenschaften

Sie können mehrere Eigenschaften verwenden, um die Komponente anzupassen.

Attribut	Eigenschaft	Beschreibung
user-id	userId	Legen Sie auf eine Benutzer-ID fest, um die Details und das Image dieses Benutzers aus Microsoft Graph abzurufen.
person-query	personQuery	Legen Sie auf den Namen oder die E-Mail-Adresse einer Person fest, um in Microsoft Graph nach einer Person zu suchen und die Details und das Bild der ersten Person abzurufen.
Person-Details	personDetails	Wird auf ein Objekt festgelegt, das eine Person darstellt. Funktioniert mit Objekten aus den Ressourcen Personen, Benutzern, Kontakten oder Gruppen.
Fallbackdetails	fallbackDetails	Wird auf ein Objekt festgelegt, das eine Person darstellt, wenn kein Benutzer/Person/Kontakt in Microsoft Graph gefunden wird.
Person-Image	personImage	Legen Sie das Bild fest, das für die Person angezeigt werden soll.
Person-Anwesenheit	personPresence	Legen Sie die Anwesenheit für die Person fest.
fetch-image	fetchImage	Legen Sie das Flag so fest, dass es basierend auf dem vom Benutzer bereitgestellten `personDetails` Objekt automatisch aus Microsoft Graph abgerufen wird`personImage`.
disable-image-fetch	disableImageFetch	Legen Sie das Flag fest, um das Abrufen des Personenbilds zu deaktivieren. Es kann verwendet werden, um unnötige Abrufe aus Microsoft Graph zu vermeiden, wenn Die Eigenschaft angegeben `personImage` wird.
avatar-type	avatarType	Legen Sie auf `initials` oder `photo` fest, um den Anzeigezustand zu rendern. Der Standardwert ist "Foto".
Avatargröße	avatarSize	Legen Sie die Avatargröße auf , `large`oder `auto`fest`small`, um auch die richtige Größe für den Anwesenheitsbadge zu bestimmen. Der Standardwert ist `auto`. Wenn das `view` Attribut auf `threelines` oder `fourlines`festgelegt ist, `avatar-size` wird unabhängig vom tatsächlichen Wert automatisch als `large`behandelt.
Vertikales Layout	verticalLayout	Legen Sie das Komponentenlayout auf vertikal fest.
Ansicht	Ansicht	Legen Sie fest, um zu steuern, wie die Person gerendert wird. Der Standardwert ist `image`. `image` - Nur Avatar anzeigen `oneline` - Avatar und erste Zeile anzeigen (`displayName` standardmäßig) `twolines` - Avatar und zwei Textzeilen anzeigen (`displayName` und `jobTitle` standardmäßig) `threelines`– Avatar und drei Textzeilen anzeigen (`displayNamejobTitle`und `department` standardmäßig) `fourlines` – Avatar und vier Textzeilen (`displayName`, `jobTitle`und `departmentemail` standardmäßig) anzeigen Zeigen `vertical-layout`Sie in Änderungen an. `twolines` - Avatar und zwei Textzeilen anzeigen (`displayName` und `email` standardmäßig) `threelines` – Avatar und drei Textzeilen anzeigen (`displayName` und `emaildepartment` standardmäßig)
line1-property	line1Property	Legt die Eigenschaft der personDetails fest, die für die erste Textzeile verwendet werden soll. Der Standardwert ist `displayName`.
line2-property	line2Property	Legt die Eigenschaft der personDetails fest, die für die zweite Textzeile verwendet werden soll. Der Standardwert ist `jobTitle`.
line3-property	line3Property	Legt die Eigenschaft der personDetails fest, die für die dritte Textzeile verwendet werden soll. Der Standardwert ist `department`.
line4-property	line4Property	Legt die Eigenschaft der personDetails fest, die für die vierte Textzeile verwendet werden soll. Der Standardwert ist `email`.
show-presence	showPresence	Legen Sie das Flag fest, um die Anwesenheit einer Person anzuzeigen. Der Standardwert ist `false`.
Verwendung	Verwendung	Geben Sie an, wo die Komponente verwendet wird, um eine angepasste Personalisierung hinzuzufügen. Derzeit wird nur unterstützt `people` , wie in der People-Komponente verwendet.
Personenkarte	personCardInteraction	Legt das Verhalten fest, um die Personenkarte in der gerenderten Person-Komponente anzuzeigen. Die zulässigen Werte sind `none`, `hover` oder `click`. Der Standardwert ist `none`.

Benutzerdefinierte CSS-Eigenschaften

Die mgt-person Komponente definiert die folgenden benutzerdefinierten CSS-Eigenschaften.

<mgt-person class="person" person-query="me" view="fourlines" id="online" show-presence></mgt-person>

.person {
  --person-background-color: #616161;
  --person-background-border-radius: 30%;
  --person-avatar-size: 40px;
  --person-avatar-border: 3px solid yellow;
  --person-avatar-border-radius: 54%;
  --person-initials-text-color: white;
  --person-initials-background-color: blue;
  --person-line1-font-size: 32px;
  --person-line1-font-weight: 600;
  --person-line1-text-color: red;
  --person-line1-text-transform: capitalize;
  --person-line1-text-line-height: 20px;
  --person-line2-font-size: 28px;
  --person-line2-font-weight: 500;
  --person-line2-text-color: orange;
  --person-line2-text-transform: full-width;
  --person-line2-text-line-height: 16px;
  --person-line3-font-size: 24px;
  --person-line3-font-weight: 400;
  --person-line3-text-color: blue;
  --person-line3-text-transform: uppercase;
  --person-line3-text-line-height: 12px;
  --person-line4-font-size: 20px;
  --person-line4-font-weight: 300;
  --person-line4-text-color: green;
  --person-line4-text-transform: lowercase;
  --person-line4-text-line-height: 12px;
  --person-details-spacing: 30px;
}

Weitere Informationen finden Sie unter Formatieren von Komponenten.

Ereignisse

Die folgenden Ereignisse werden von der Komponente ausgelöst.

Ereignis	Wann wird es ausgegeben?	Benutzerdefinierte Daten	Annullierbar	Blasen	Funktioniert mit benutzerdefinierter Vorlage
`line1clicked`	Wird ausgelöst, wenn auf zeile1 geklickt wird	Das `person` Objekt, das ein Microsoft Graph-Benutzer, eine Person oder ein Kontakt mit einer zusätzlichen `personImage` Eigenschaft sein kann, die die URL des Fotos des Benutzers enthält.	Nein	Nein	Ja, es sei denn, Sie überschreiben die Standardvorlage.
`line2clicked`	Wird ausgelöst, wenn auf zeile2 geklickt wird	Das `person` Objekt, das ein Microsoft Graph-Benutzer, eine Person oder ein Kontakt mit einer zusätzlichen `personImage` Eigenschaft sein kann, die die URL des Fotos des Benutzers enthält.	Nein	Nein	Ja, es sei denn, Sie überschreiben die Standardvorlage.
`line3clicked`	Wird ausgelöst, wenn auf zeile3 geklickt wird	Das `person` Objekt, bei dem es sich um einen Microsoft Graph-Benutzer, eine Person oder einen Kontakt mit einer zusätzlichen `personImage` Eigenschaft handeln kann, die die URL des Fotos des Benutzers enthält.	Nein	Nein	Ja, es sei denn, Sie überschreiben die Standardvorlage.
`line4clicked`	Wird ausgelöst, wenn auf zeile4 geklickt wird	Das `person` Objekt, bei dem es sich um einen Microsoft Graph-Benutzer, eine Person oder einen Kontakt mit einer zusätzlichen `personImage` Eigenschaft handeln kann, die die URL des Fotos des Benutzers enthält.	Nein	Nein	Ja, es sei denn, Sie überschreiben die Standardvorlage.

Weitere Informationen zum Behandeln von Ereignissen finden Sie unter Ereignisse.

Vorlagen

Die mgt-person Komponente unterstützt mehrere Vorlagen , mit denen Sie bestimmte Teile der Komponente ersetzen können. Um eine Vorlage anzugeben, schließen Sie ein <template> Element in eine Komponente ein, und legen Sie auf data-type einen der folgenden Werte fest:

Datentyp	Datenkontext	Beschreibung
Laden	keine	Die Vorlage, die gerendert werden soll, während sich die Komponente im Ladezustand befindet.
Keine Daten	keine	Die Vorlage, die gerendert werden soll, wenn kein Personenbild oder keine Daten verfügbar sind.
Vorgabe	person: Das Objekt mit den Personendetails `personImage`: Die URL des Bilds `personPresence`: Das Anwesenheitsdetails-Objekt für person.	Die Standardvorlage ersetzt die gesamte Komponente durch Ihre eigene.
Personenkarte	person: Das Objekt mit den Personendetails `personImage`: Die URL des Bilds.	Die Vorlage zum Aktualisieren der mgt-person-card, die beim Zeigen oder Klicken angezeigt wird.
zeile1	person: Das Objekt mit den Personendetails	Die Vorlage für die erste Zeile von Personenmetadaten.
zeile2	person: Das Objekt mit den Personendetails	Die Vorlage für die zweite Zeile der Personenmetadaten.
zeile3	person: Das Objekt mit den Personendetails	Die Vorlage für die dritte Zeile von Personenmetadaten.
Zeile 4	person: Das Objekt mit den Personendetails	Die Vorlage für die vierte Zeile der Personenmetadaten.

Im folgenden Beispiel wird eine Vorlage für die Personenkomponente definiert.

<!-- Retemplate the entire person component -->
<mgt-person>
  <template>
    <div data-if="personImage">
      <img src="{{personImage}}" />
    </div>
    <div data-else>
      {{person.displayName}}
    </div>
  </template>
</mgt-person>

<!-- Retemplate the line properties -->
<mgt-person view="threeLines">
  <template data-type="line1">
    <div>
      Hello, my name is: {{person.displayName}}
    </div>
  </template>
  <template data-type="line2">
    <div>
      Super cool
    </div>
  </template>
  <template data-type="line3">
    <div>
      Loves MGT
    </div>
  </template>
</mgt-person>

<mgt-person view="fourLines">
  <template data-type="line1">
    <div>
      Hello, my name is: {{person.displayName}}
    </div>
  </template>
  <template data-type="line2">
    <div>
      Musician
    </div>
  </template>
  <template data-type="line3">
    <div>
      Calif records
    </div>
  </template>
  <template data-type="line4">
    <div>
      {{person.mail}}
    </div>
  </template>
</mgt-person>

<!-- Person-card template -->
<mgt-person person-query="me" view="twolines" person-card="hover">
	<template data-type="person-card">
		My custom person card experience
	</template>
</mgt-person>

Personenkarte

Die mgt-person Komponente kann entweder beim Zeigen oder Klicken ein mgt-person-card -Element anzeigen.

Hinzufügen des Steuerelements zur HTML-Seite

<mgt-person person-query="me" person-card="hover"></mgt-person>

Attribut	Eigenschaft	Beschreibung
Personenkarte	personCardInteraction	Eine Enumeration, um die Benutzeraktion zu bestimmen, die zum Aktivieren des Flyoutbereichs erforderlich ist – `hover` oder `click`. Der Standardwert ist `none`.

Weitere Informationen zu Vorlagen, Formatvorlagen und Attributen finden Sie unter Personenkartenkomponente.

Globale Komponentenkonfiguration

Die MgtPerson -Klasse macht ein statisches config Objekt verfügbar, das alle Personenkomponenten in der Anwendung konfiguriert.

Das folgende Beispiel zeigt die Verwendung des config-Objekts.

import { MgtPerson } from '@microsoft/mgt-components';

MgtPerson.config.useContactApis = false;

Die folgenden Eigenschaften sind für das Config-Objekt verfügbar.

Eigenschaft	Beschreibung
useContactApis	`boolean` – Gibt an, ob die Personenkomponente die Microsoft Graph-API für persönliche Kontakte verwenden kann, um nach Kontaktdetails und Fotos zu suchen. Der Standardwert ist `true`.

Microsoft Graph-Berechtigungen

Dieses 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. Einige Konfigurationen können zu mehreren Aufrufen von Microsoft Graph führen. Wenn diese Aufrufe unterschiedliche Berechtigungen verwenden können, befindet sich jede API und jeder Berechtigungssatz in einer separaten Zeile.

Konfiguration	Berechtigung	API
`personDetails` ohne Bild festlegen, `fetchImage` auf `true`festlegen, `avatarType` auf `photo`festlegen, abgerufene Person ist ein Kontakt und `useContactApis` auf festgelegt `true`	Contacts.Read, Contacts.ReadWrite	/me/contacts/*
`personDetails`legen Sie ohne Bild fest, `fetchImage` legen Sie auf `true`fest`photo`, `avatarType` und Person ist kein Kontakt oder `useContactApis` ist auf festgelegt.`false`	User.ReadBasic.All, User.Read.All, User.ReadWrite.All	/users/{id}/photo/$value
`personDetails` ohne Bild festlegen, `fetchImage` auf `true`festlegen, `avatarType` auf `photo` festlegen und benutzerseitig per E-Mail angegeben	User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All	/users?$search=
`personDetails` ohne Bild festlegen, `fetchImage` auf `true`festlegen, `avatarType` auf `photo` festlegen und benutzerseitig per E-Mail angegeben	User.ReadBasic.All, User.Read.All, User.ReadWrite.All	/users/{id}/photo/$value
`personDetails` ohne Bild festlegen, `fetchImage` auf `true`festlegen, `avatarType` auf festlegen und `photo` kontakt per E-Mail angegeben und `useContactApis` auf TRUE festgelegt	Contacts.Read, Contacts.ReadWrite	/me/contacts/*
`personDetails` ohne Bild auf eine Gruppe festlegen, `fetchImage` auf `true`festlegen, `avatarType` auf festlegen `photo`	Group.Read.All, Group.ReadWrite.All'	/groups/${groupId}/photo/$value
`userId` Garnitur	User.ReadBasic.All	/users/{id}
`userId` festlegen oder `personQuery` auf `me` und `avatarType` auf `photo` und `disableImageFetch` ist `false`	User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All	/users/{id}
`userId` festlegen oder `personQuery` auf `me` und `avatarType` auf `photo` und `disableImageFetch` ist `false`	User.ReadBasic.All, User.Read.All, User.ReadWrite.All	users/${userId}/photo/*
`userId` auf `me` und `avatarType` auf `photo` und `disableImageFetch` ist `false`	User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All	/Ich
`userId` auf `me` und `avatarType` auf `photo` und `disableImageFetch` ist `false`	User.Read, User.ReadWrite, User.ReadBasic.All, User.Read.All, User.ReadWrite.All	/me/photo/$value
`personQuery` legen Sie auf `me` fest, und `avatarType` legen Sie auf einen anderen Wert als fest. `photo`	User.Read, User.ReadWrite	/Ich
`personQuery` legen Sie auf einen anderen Wert als `me` und `avatarType` auf einen anderen Wert als fest. `photo`	People.Read, People.Read.All	/me/people
`personQuery` auf einen anderen Wert als `me` festgelegt und `avatarType` auf einen anderen Wert als `photo` festgelegt, und `/me/people` es wurden keine Daten zurückgegeben, die mit dem angegebenen übereinstimmen. `personQuery`	User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All	/user?$search=
`personQuery` legen Sie auf einen anderen Wert als `me` und `useContactApis` auf fest. `false`	People.Read, User.ReadBasic.All	/me/people/?$search=, /users?$search=
`showPresence` legen Sie auf `true` fest, und `personQuery` legen Sie auf fest. `me`	Presence.Read	/me/presence
`showPresence` `true` auf und `personQuery` auf einen anderen Wert als`me`	Presence.Read.All	/users/{id}/presence
`personCardInteraction` auf einen anderen Wert als festgelegt `PersonCardInteraction.none`	Anzeigen von Personenkartenberechtigungen	Anzeigen von Api-Aufrufen für Personenkarten

Unterkomponenten

Die mgt-person 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: mgt-person-card.

Authentifizierung

Das Steuerelement verwendet den in der Authentifizierungsdokumentation beschriebenen globalen Authentifizierungsanbieter, um die erforderlichen Daten abzurufen.

Cache

Objektspeicher	Zwischengespeicherte Daten	Hinweise
`photos`	Foto der Person	Wird verwendet, wenn `avatarType` auf `photo` und `fetchImage` auf `true`festgelegt ist.
`presence`	Anwesenheit einer Person	Wird verwendet, wenn `showPresence` auf `true`festgelegt ist.
`users`	Benutzerinformationen der Person.

Weitere Informationen zum Konfigurieren des Caches finden Sie unter Zwischenspeichern .

Erweitern für mehr Kontrolle

Für komplexere Szenarien oder eine wirklich benutzerdefinierte Benutzeroberfläche macht diese Komponente mehrere protected render* Methoden zum Überschreiben in Komponentenerweiterungen verfügbar.

Methode	Beschreibung
renderLoading	Rendert den Ladezustand.
renderNoData	Wird gerendert, wenn keine Bild- oder Personendaten verfügbar sind.
renderAvatar	Rendert den Avatar.
renderDetails	Rendert den Teil der Personendetails.

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
photoFor	`Photo for`
emailAddress	`Email address`

Freigeben über