Personen-Komponente im Microsoft Graph-Toolkit

Artikel
02/08/2024

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.

HTML
React

Öffnen Sie dieses Beispiel in mgt.dev.

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`, `userIds`oder `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.

Freigeben über