Auswahlkomponente im Microsoft Graph-Toolkit
Die Auswahlkomponente verwendet mgt-get
zum Abfragen des Microsoft-Graph-API rendert dann ein Dropdown-Steuerelement, das die Auswahl einer einzelnen Ressource aus einem Array von Ressourcen ermöglicht.
Beispiel
Das folgende Beispiel zeigt die Verwendung der mgt-picker
-Komponente zum Auswählen einer Aufgabenliste aus den Aufgabenlisten eines Benutzers. Sie können den Code-Editor verwenden, um zu sehen, wie Eigenschaften und Attribute das Verhalten der Komponente ändern.
Eigenschaften und Attribute
Sie können mehrere Attribute verwenden, um das Verhalten der Komponente zu ändern. Die Komponente verfügt über erforderliche Attribute, z resource
. B /users
. und key-name
, z. B displayName
. .
key-name
unterstützt auch geschachtelte Werte. Beispiel: In der folgenden Antwort:
{
"@odata.context": "https://graph.microsoft.com/v1.0/$metadata#applications/$entity",
"id": "03ef14b0-ca33-4840-8f4f-d6e91916010e",
"verifiedPublisher": {
"displayName": "publisher_contoso",
"verifiedPublisherId": "9999999",
"addedDateTime": "2021-04-24T17:49:44Z"
},
"certification": {
"isPublisherAttested": true,
"isCertifiedByMicrosoft": true,
"lastCertificationDateTime": "2021-05-11T23:26:20Z",
"certificationExpirationDateTime": "2022-05-11T23:26:20Z",
"certificationDetailsUrl": "https://learn.microsoft.com/microsoft-365-app-certification/forward/azure/631a96bc-a705-4eda-9f99-fdaf9f54f6a2"
},
"tags": [],
"tokenEncryptionKeyId": null,
"api": {
"requestedAccessTokenVersion": 2,
"acceptMappedClaims": null,
"knownClientApplications": [],
"oauth2PermissionScopes": [],
"preAuthorizedApplications": []
},
"appRoles": [],
"web": {
"redirectUris": [],
"homePageUrl": null,
"logoutUrl": null,
"implicitGrantSettings": {
"enableIdTokenIssuance": false,
"enableAccessTokenIssuance": false
}
}
}
Ihr key-name
Attributwert könnte oder verifiedPublisher.displayName
seinweb.homePageUrl
.
Attribut | Eigenschaft | Beschreibung |
---|---|---|
resource | resource | Die Ressource, /me die von Microsoft Graph abgerufen werden soll (z. B. oder /users ). |
Platzhalter | Platzhalter | Der in der Auswahl gerenderte Platzhalter (z. B Select a user . oder Select a task list ). |
Schlüsselname | Keyname | Der Schlüssel, displayName der in der Auswahl gerendert werden soll (z. B. ). |
selected-value | Selectedvalue | Optional. Der Wert, der als aktuell ausgewählte Option in der Auswahl festgelegt werden soll. Muss in den in der Microsoft Graph-Abfrage bereitgestellten Optionen vorhanden sein. |
Bereiche | Bereiche | Optionales Array von Zeichenfolgen bei Verwendung der -Eigenschaft oder eines durch Kommas getrennten Bereichs bei Verwendung des -Attributs. Die Komponente und ein unterstützter Anbieter stellen sicher, dass der Benutzer mindestens einer der bereitgestellten Berechtigungen zugestimmt hat. |
Version | Version | Optionale API-Version, die bei der GET Anforderung verwendet werden soll. Der Standardwert ist v1.0 . |
max-pages | maxPages | Optionale Anzahl von Seiten (für Ressourcen, die Paging unterstützen). Der Standardwert ist 3. Wenn Sie diesen Wert auf 0 festlegen, werden alle Seiten abgerufen. |
Cache aktiviert | cacheEnabled | Optionaler Boolean-Wert. Wenn festgelegt, gibt dies an, dass die Antwort von der Ressource zwischengespeichert wird. Überschreiben Sie, wenn refresh() aufgerufen wird oder verwendet pollingRate wird. Der Standardwert ist false . |
Cache-Invalidation-Zeitraum | cacheInvalidationPeriod | Optionale Anzahl von Millisekunden. Bei Festlegung in Kombination mit cacheEnabled ändert die Verzögerung, bevor der Cache seinen Ungültigkeitszeitraum erreicht hat, diesen Wert. Der Standardwert ist 0 und verwendet den Standardvalidierungszeitraum. |
Nicht zutreffend | Antwort | Schreibgeschützte Antwort von Microsoft Graph, wenn die Anforderung erfolgreich war. |
Nicht zutreffend | error | Schreibgeschützter Fehler von Microsoft Graph, wenn die Anforderung nicht erfolgreich war. |
Benutzerdefinierte CSS-Eigenschaften
Die mgt-picker
Komponente definiert die folgenden benutzerdefinierten CSS-Eigenschaften, mit denen Sie Außerkraftsetzungen bereitstellen können.
<mgt-picker
class="picker"
resource="me/todo/lists"
scopes="tasks.read, tasks.readwrite"
key-name="displayName"
></mgt-picker>
.picker {
--picker-background-color: grey;
--picker-list-max-height: 200px;
}
Weitere Informationen finden Sie unter Formatieren von Komponenten.
Methoden
Methode | Beschreibung |
---|---|
refresh(force?: boolean) | Rufen Sie die -Methode auf, um die Daten zu aktualisieren. Standardmäßig wird die Benutzeroberfläche nur aktualisiert, wenn sich die Daten ändern. Übergeben, true um die Aktualisierung der Komponente zu erzwingen. |
Ereignisse
Ereignis | Wann wird es ausgegeben? | Benutzerdefinierte Daten | Abbrechbare | Blasen | Funktioniert mit benutzerdefinierter Vorlage |
---|---|---|---|---|---|
selectionChanged |
Wird ausgelöst, wenn eine Änderung an der ausgewählten Ressource in der Dropdownliste vorliegt. |
{ response: any, error: any } . Die response -Eigenschaft enthält die antwort, die von Microsoft Graph abgerufen wurde. Die error -Eigenschaft enthält Informationen zum Fehler, falls ein Fehler aufgetreten ist. |
Nein | Ja | Ja |
Tipp
Weitere Informationen zu den in der response
Eigenschaft zurückgegebenen Daten finden Sie in der API-Referenz der API, die Sie in der resource
-Eigenschaft der Picker-Komponente verwendet haben.
Weitere Informationen zum Behandeln von Ereignissen finden Sie unter Ereignisse.
Vorlagen
Die mgt-picker
Komponente unterstützt mehrere Vorlagen , mit denen Sie das Aussehen und Verhalten definieren 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 |
---|---|---|
error | Der Fehler von Microsoft Graph. | Diese Vorlage wird verwendet, wenn bei der Anforderung ein Fehler auftritt. |
Laden | Nicht zutreffend | Diese Vorlage wird während der Anforderung verwendet. |
Keine Daten | Nicht zutreffend | Diese Vorlage wird verwendet, wenn die Anforderung keine Daten zurückgibt. |
Beispiel für die Verwendung von Vorlagen
<mgt-picker resource="me/todo/lists" scopes="tasks.read, tasks.readwrite" key-name="displayName">
<div>Loading template</div>
<template data-type="loading">
Loading
</template>
<template data-type="no-data">
<div>No data</div>
</template>
<template data-type="error">
<div>Error</div>
</template>
</div>
</mgt-picker>
Microsoft Graph-Berechtigungen
Die für diese Komponente erforderlichen Berechtigungen hängen von den Daten ab, die Sie mit ihr aus Microsoft Graph abrufen möchten. Das Microsoft Graph-Toolkit überprüft, ob der aktuelle Benutzer mindestens einem der bereitgestellten scopes
zugestimmt hat. Weitere Informationen zu Berechtigungen finden Sie in der Referenz zu Microsoft Graph-Berechtigungen.
Authentifizierung
Das Steuerelement verwendet den in der Authentifizierungsdokumentation beschriebenen globalen Authentifizierungsanbieter, um die erforderlichen Daten abzurufen.
Cache
Verwenden Sie zum Aktivieren und Konfigurieren des Caches die cacheEnabled
Eigenschaften und cacheInvalidationPeriod
. Standardmäßig speichert die mgt-picker
Komponente keine Antworten zwischen.
Objektspeicher | Zwischengespeicherte Daten | Bemerkungen |
---|---|---|
response |
Vollständige Antwort, die von Microsoft Graph für die in der resource -Eigenschaft von angegebene Abfrage abgerufen wurde mgt-picker |
Weitere Informationen 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 |
---|---|
comboboxPlaceholder | Select an item |