Person-Komponente im Microsoft Graph-Toolkit

Artikel
03/15/2023
8 Minuten Lesedauer

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.

Öffnen dieses Beispiels 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. Dies hilft beim Hinzufügen des richtigen Anwesenheitsbadges zum Avatar. Sie müssen die richtigen 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 einen Namen oder eine 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", "Benutzer", "Kontakte" oder "Gruppe".
Fallbackdetails	fallbackDetails	Wird auf ein Objekt festgelegt, das eine Person darstellt, wenn kein Benutzer/Person/Kontakt im Diagramm 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 fest, das basierend auf dem `personDetails` vom Benutzer bereitgestellten Objekt automatisch aus Microsoft Graph abgerufen wird`personImage`.
disable-image-fetch	disableImageFetch	Legen Sie das Flag fest, um das Abrufen des Personenbilds zu deaktivieren. 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 auf `small`, `large`oder `auto` fest, um die Größe des Avatars zu bestimmen. Dadurch können Sie die richtige Größe für den Anwesenheitsbadge festlegen. Der Standardwert ist auto.
Ansicht	Ansicht	Legen Sie fest, um zu steuern, wie die Person gerendert wird. Standard ist `avatar` `avatar` - Nur Avatar anzeigen `oneline` - Avatar und erste Zeile anzeigen (`displayName` standardmäßig) `twolines` - Avatar und zwei Textzeilen anzeigen (`displayName` und `mail` standardmäßig) `threelines`– Avatar und drei Textzeilen anzeigen (`displayNamemail`und `jobTitle` 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 `mail`.
line3-property	line3Property	Legt die Eigenschaft der personDetails fest, die für die dritte Textzeile verwendet werden soll. Der Standardwert ist `jobTitle`.
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.

Benutzerdefinierte CSS-Eigenschaften

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

mgt-person {
  --avatar-size: 48px;
  --avatar-border: 0;
  --avatar-border-radius: 50%;
  --avatar-cursor: default;
  
  --initials-color: white;
  --initials-background-color: magenta;

  --presence-background-color: #ffffff;
  --presence-icon-color: #ffffff;

  --font-family: 'Segoe UI';
  --font-size: 14px;
  --font-weight: 500;
  --color: black;
  --text-transform: none;

  --line2-font-size: 12px;
  --line2-font-weight: 400;
  --line2-color: black;
  --line2-text-transform: none;

  --line3-font-size: 12px;
  --line3-font-weight: 400;
  --line3-color: black;
  --line3-text-transform: none;

  --details-spacing: 12px;
}

Weitere Informationen finden Sie unter Formatieren von Komponenten.

Veranstaltungen

Die folgenden Ereignisse werden von der Komponente ausgelöst.

Ereignis	Wann wird es ausgegeben?	Benutzerdefinierte Daten	Abbrechbare	Blasen	Funktioniert mit benutzerdefinierter Vorlage
`line1clicked`	Wird ausgelöst, wenn auf zeile1 geklickt wird	Das `person` Objekt, bei dem es sich um einen 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.
`line2clicked`	Wird ausgelöst, wenn auf zeile2 geklickt wird	Das `person` Objekt, bei dem es sich um einen 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.
`line3clicked`	Wird ausgelöst, wenn auf zeile3 geklickt wird	Das `person` Objekt, bei dem es sich um einen 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 zur Behandlung 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 den data-type Wert auf 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.
Standard	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.

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>

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 zum Bestimmen der Benutzeraktion, 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`;

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.

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	/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	/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	/users/{id}/photo/$value
`personDetails` Ohne Bild festlegen, `fetchImage` auf `true`festlegen, `avatarType` auf `photo` festlegen und Kontakt per E-Mail angegeben	Contacts.Read	/me/contacts/*
`userId` Festgelegt	User.ReadBasic.All	/users/{id}
`personQuery` legen Sie auf `me` fest, und `avatarType` legen Sie auf fest. `photo`	User.Read	/me/photo/$value
`personQuery` legen Sie auf `me` fest, und `avatarType` legen Sie auf einen anderen Wert als fest. `photo`	User.Read	/Ich
`personQuery` legen Sie auf einen anderen Wert als `me` und `useContactApis` auf fest. `true`	Personen. Read, User.ReadBasic.All, Contacts.Read	/me/people/?$search=, /users?$search=, /me/contacts/*
`personQuery` legen Sie auf einen anderen Wert als `me` und `useContactApis` auf fest. `false`	Personen. 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
`showPresencetrue` 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

Authentifizierung

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

Cache

Objektspeicher	Zwischengespeicherte Daten	HinwBemerkungeneise
`photos`	Foto der Person	Wird verwendet, wenn `avatarType` auf und `fetchImage` auf `photo` festgelegt ist`true`
`presence`	Anwesenheit einer Person	Wird verwendet, wenn `showPresence` auf festgelegt ist `true`
`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.