Composant sélecteur dans le Kit de ressources Microsoft Graph

Article
11/07/2024

Le composant Sélecteur utilise mgt-get pour interroger l’API Graph Microsoft, puis affiche un contrôle de liste déroulante autorisant 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.

HTML
React

Ouvrez cet exemple dans mgt.dev.

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	Optional. 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`

Partager via