Auswahlkomponente im Microsoft Graph-Toolkit

Artikel
02/08/2024

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.

HTML
React

Öffnen Sie dieses Beispiel in mgt.dev.

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.displayNameseinweb.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 scopeszugestimmt 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`

Freigeben über