Partager via

Composant sélecteur dans le Kit de ressources Microsoft Graph

Attention

Le Kit de ressources Microsoft Graph est déconseillé. La période de retraite commence le 1er septembre 2025 et la retraite complète est prévue le 28 août 2026. Les développeurs doivent migrer vers l’utilisation des Kits de développement logiciel (SDK) Microsoft Graph ou d’autres outils Microsoft Graph pris en charge pour créer des expériences web. Pour plus d’informations, consultez l’annonce de dépréciation.

Le composant Sélecteur utilise mgt-get pour interroger microsoft API Graph, puis affiche un contrôle de liste déroulante permettant la sélection d’une ressource unique à partir d’un tableau de ressources.

Exemple

L’exemple suivant illustre l’utilisation du mgt-picker composant pour sélectionner une liste de tâches dans les listes de tâches d’un utilisateur. Vous pouvez utiliser l’éditeur de code pour voir comment les propriétés et les attributs modifient le comportement du composant.

Propriétés et attributs

Vous pouvez utiliser plusieurs attributs pour modifier le comportement du composant. Le composant a des attributs obligatoires, tels que resource , par exemple, /users et key-name , par exemple, displayName.

key-name prend également en charge les valeurs imbriquées. Par exemple, dans la réponse suivante :

{
    "@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
        }
    }
}

votre key-name valeur d’attribut peut être web.homePageUrl ou verifiedPublisher.displayName.

Attribut Propriété Description
ressource ressource Ressource à obtenir à partir de Microsoft Graph (par exemple, /me ou /users).
Espace réservé Espace réservé Espace réservé affiché dans le sélecteur (par exemple, Select a user ou Select a task list).
key-name keyName Clé à afficher dans le sélecteur (par exemple, displayName).
selected-value selectedValue Facultatif. Valeur à définir comme option actuellement sélectionnée dans le sélecteur. Doit être présent dans les options fournies à partir de la requête Microsoft Graph.
scopes scopes Tableau facultatif de chaînes si vous utilisez la propriété ou une étendue délimitée par des virgules si vous utilisez l’attribut . Le composant et un fournisseur pris en charge garantissent que l’utilisateur a consenti à au moins l’une des autorisations fournies.
version version Version d’API facultative à utiliser lors de la GET requête. La valeur par défaut est v1.0.
max-pages maxPages Nombre de pages facultatif (pour les ressources qui prennent en charge la pagination). La valeur par défaut est 3. La définition de cette valeur sur 0 permet de récupérer toutes les pages.
activé pour le cache cacheEnabled Facultatif Boolean. Lorsqu’il est défini, il indique que la réponse de la ressource est mise en cache. Remplacez si refresh() est appelé ou si pollingRate est en cours d’utilisation. La valeur par défaut est false.
cache-invalidation-period cacheInvalidationPeriod Nombre facultatif de millisecondes. Lorsqu’il est défini en combinaison avec cacheEnabled, le délai avant que le cache n’atteigne sa période d’invalidation modifie cette valeur. La valeur par défaut est 0 et utilise la période d’invalidation par défaut.
S/O réponse Réponse en lecture seule de Microsoft Graph si la demande a réussi.
S/O error Erreur en lecture seule de Microsoft Graph si la demande n’a pas réussi.

Propriétés personnalisées CSS

Le mgt-picker composant définit les propriétés personnalisées CSS suivantes pour vous permettre de fournir des remplacements.

<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;
}

Pour en savoir plus, consultez composants de style.

Méthodes

Méthode Description
refresh(force ?: boolean) Appelez la méthode pour actualiser les données. Par défaut, l’interface utilisateur est mise à jour uniquement si les données changent. true Passez pour forcer la mise à jour du composant.

Événements

Événement Quand est-il émis Données personnalisées Annulable Bulles Fonctionne avec un modèle personnalisé
selectionChanged Déclenché en cas de modification de la ressource sélectionnée dans la liste déroulante. { response: any, error: any }. La response propriété contient la réponse récupérée à partir de Microsoft Graph. La error propriété contient des informations sur l’erreur si une erreur s’est produite Non Oui Oui

Conseil

Pour plus d’informations sur les données retournées dans la response propriété, consultez la référence d’API de l’API que vous avez utilisée dans la resource propriété du composant Sélecteur.

Pour plus d’informations sur la gestion des événements, consultez événements.

Modèles

Le mgt-picker composant prend en charge plusieurs modèles que vous pouvez utiliser pour définir l’apparence. Pour spécifier un modèle, incluez un <template> élément à l’intérieur d’un composant et définissez sur l’une data-type des valeurs suivantes.

Type de données Contexte de données Description
error Erreur de Microsoft Graph. Ce modèle est utilisé en cas d’erreur lors de la demande.
chargement S/O Ce modèle est utilisé pendant que la demande est effectuée.
no-data S/O Ce modèle est utilisé lorsque la requête n’a retourné aucune donnée.

Exemple d’utilisation de modèle

<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>

Autorisations de Microsoft Graph

Les autorisations requises par ce composant dépendent des données que vous souhaitez récupérer avec lui à partir de Microsoft Graph. Microsoft Graph Toolkit vérifie que l’utilisateur actuel a consenti à au moins l’un des éléments fournis scopes. Pour plus d’informations sur les autorisations, consultez les informations de référence sur les autorisations Microsoft Graph.

Authentification

Le contrôle utilise le fournisseur d’authentification global décrit dans la documentation sur l’authentification pour extraire les données requises.

Cache

Pour activer et configurer le cache, utilisez les cacheEnabled propriétés et cacheInvalidationPeriod . Par défaut, le mgt-picker composant ne met pas en cache les réponses.

Magasin d’objets Données mises en cache Remarques
response Réponse complète récupérée à partir de Microsoft Graph pour la requête spécifiée dans la resource propriété de mgt-picker

Pour plus d’informations, consultez Mise en cache.

Localisation

Le contrôle expose les variables suivantes qui peuvent être localisées. Pour plus d’informations sur la configuration de la localisation, consultez Localisation des composants.

Nom de la chaîne Valeur par défaut
comboboxPlaceholder Select an item
  • Last updated on