Personen-Komponente im Microsoft Graph-Toolkit

  • Artikel

Sie können die mgt-people Webkomponente verwenden, um eine Gruppe von Personen oder Kontakten mithilfe ihrer Fotos oder Initialen anzuzeigen. Standardmäßig werden die häufigsten Kontakte für den angemeldeten Benutzer angezeigt.

Diese Komponente verwendet mehrere mgt-person-Steuerelemente , kann aber an eine Reihe von Personendeskriptoren gebunden werden. Wenn mehr Personen als der show-max Wert angezeigt werden sollen, wird eine Zahl hinzugefügt, um die Anzahl der anderen Kontakte anzugeben.

Beispiel

Das folgende Beispiel zeigt eine Gruppe von Personen, die mithilfe der mgt-people -Komponente angezeigt werden. Sie können den Code-Editor verwenden, um zu sehen, wie Eigenschaften das Verhalten der Komponente ändern.

Eigenschaften

Standardmäßig ruft die mgt-people Komponente Ereignisse vom Endpunkt mit dem personType/class eq 'Person' Filter ab/me/people, um häufig kontaktierte Benutzer anzuzeigen. Sie können mehrere Eigenschaften verwenden, um dieses Verhalten zu ändern.

Attribut Eigenschaft Beschreibung
show-max showMax Gibt die maximale Anzahl von Personen an, die angezeigt werden sollen. Der Standardwert ist 3.
Kontakte Kontakte Ein Array von Microsoft Graph-Personenobjekten. Verwenden Sie diese Eigenschaft, um auf die von der Komponente geladenen Personen zuzugreifen. Legen Sie diesen Wert fest, um Ihre eigenen Personen in die Komponente zu laden.
group-id groupId Die ID einer Microsoft Entra ID Gruppe. Diese Eigenschaft wird verwendet, um die direkten Mitglieder der Gruppe abzurufen. Diese Eigenschaft ist optional.
Benutzer-IDs UserIds Ein Array von anzuzeigenden Benutzer-IDs. Diese Eigenschaft ist optional.
Personenabfragen PeopleQueries Microsoft Graph-Abfragen zum Anpassen der Personenabfrageantwort.
person-Karte personCardInteraction Legt das Verhalten fest, um die Person Karte einer gerenderten Person anzuzeigen. Der Standardwert ist so festgelegt, dass die Person Karte beim Zeigen angezeigt wird(PersonCardInteraction.hover).
show-presence showPresence Bestimmt, ob eine Personenkomponente den Anwesenheitsbadge rendern soll. Standardwert ist "false".
resource resource Die Ressourcen-URL, die von Microsoft Graph abgerufen werden soll (z. B /me/people. ).
Bereiche Bereiche Eine durch Kommas getrennte Zeichenfolge mit Berechtigungen, die der Komponente gewährt werden sollen. Diese Eigenschaft ist optional.
Version Version Die API-Version, die bei der Anforderung verwendet werden soll. Der Standardwert ist v1.0.
Fallbackdetails fallbackDetails Array von Microsoft Graph-Personenobjekten, die eine Person oder mehrere Personen darstellen, wenn kein Benutzer/Person/Kontakt im Diagramm gefunden wird.

Im folgenden Beispiel wird die maximale Anzahl von Personen festgelegt, die angezeigt werden sollen.

<mgt-people show-max="4"> </mgt-people>

Benutzerdefinierte CSS-Eigenschaften

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

<mgt-people class="people"></mgt-people>

.people {
  --people-list-margin: 12px;
  --people-avatar-gap: 8px;
  --people-overflow-font-color: orange;
  --people-overflow-font-size: 16px;
  --people-overflow-font-weight: 600;
  --people-person-avatar-size: 70px;
}

Weitere Informationen finden Sie unter Formatieren von Komponenten.

Vorlagen

Unterstützt mgt-people mehrere Vorlagen , die Sie verwenden können, um bestimmte Teile der Komponente zu ersetzen. 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
default people: Liste der Personenobjekte Die Standardvorlage ersetzt die gesamte Komponente durch Ihre eigene.
person person: person-Objekt Die Vorlage, die zum Rendern der einzelnen Personen verwendet wird.
overflow people: Liste der Personenobjekte
max: Anzahl der angezeigten Personen
extra: Anzahl zusätzlicher Personen		 Die Vorlage, die verwendet wird, um die Zahl rechts neben der Liste der Personen zu rendern.
no-data Es wird kein Datenkontext übergeben. Die Vorlage, die verwendet wird, wenn keine Daten verfügbar sind.
loading Es wird kein Datenkontext übergeben. Die Vorlage, die beim Laden des Zustands der Komponente verwendet wird.

In den folgenden Beispielen wird die Verwendung der person Vorlage veranschaulicht.

<mgt-people>
  <template>
    <ul>
      <li data-for="person in people">
        <mgt-person person-query="{{ person.userPrincipalName }}"></mgt-person>
        <h3>{{ person.displayName }}</h3>
        <p>{{ person.jobTitle }}</p>
        <p>{{ person.department }}</p>
      </li>
    </ul>
  </template>
</mgt-people>

Microsoft Graph-Berechtigungen

Diese Komponente 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
Standardkonfiguration People.Read, People.Read.All /me/people
group-id Festgelegt GroupMember.Read.All, Group.Read.All, Directory.Read.All, GroupMember.ReadWrite.All, Group.ReadWrite.All /groups/${groupId}/members/microsoft.graph.user
user-ids Festgelegt User.ReadBasic.All, User.Read.All, Directory.Read.All, User.ReadWrite.All, Directory.ReadWrite.All /users/$({userId}
people-queries Festgelegt People.Read, People.Read.All /me/people
resource Festgelegt In angegebene Berechtigungen scopes Angegeben in resource
show-presence Festgelegt Presence.Read.All /communications/getPresencesByUserId

Unterkomponenten

Die mgt-people 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.

Authentifizierung

Das Steuerelement verwendet den in der Authentifizierungsdokumentation beschriebenen globalen Authentifizierungsanbieter.

Cache

Objektspeicher Zwischengespeicherte Daten Bemerkungen
people Informationen zu Personen, die der Abfrage entsprechen Wird verwendet, wenn resource angegeben
users Informationen zu Benutzern, die der Abfrage entsprechen Wird verwendet, wenn groupId, userIdsoder peopleQueries keine Eigenschaften angegeben sind
presence Anwesenheit für die angegebene Gruppe von Personen Wird verwendet, wenn showPresence auf festgelegt ist true

Hinweis

Standardmäßig verwendet die mgt-people Komponente die mgt-person -Komponente, um Informationen zu Personen anzuzeigen. Die mgt-person Komponente lädt das Foto für jede Person automatisch herunter und speichert es zwischen.

Ausführliche 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 Rendert den leeren Datenzustand.
renderPeople Rendert eine Liste von Personen bis zum show-max Wert.
renderPerson Rendert eine einzelne Person.
renderOverflow Rendert eine Darstellung der verbleibenden Personen über den show-max Wert hinaus.

Lokalisierung

Das Steuerelement macht keine Lokalisierungsvariablen verfügbar.