Freigeben über


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.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, displayNameder 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