Composant sélecteur de taxonomie dans le Kit de ressources Microsoft Graph
Le sélecteur de taxonomie est un composant qui peut interroger microsoft API Graph de taxonomie et afficher un contrôle de liste déroulante avec des termes, ce qui permet de sélectionner un seul terme en fonction de l’ensemble id de termes spécifié ou d’une combinaison de l’ensemble id de termes spécifié et du terme idspécifié.
Le composant récupère les termes de premier niveau présents sous un ensemble de termes ou un terme spécifié. Si seul l’ID d’ensemble de termes est fourni, il retourne les termes de premier niveau sous cet ensemble de termes. Si l’ID d’ensemble de termes et l’ID de terme sont fournis, ils retournent les termes de premier niveau sous le terme spécifié.
Note Cette fonctionnalité prend actuellement en charge une seule sélection de termes provenant du magasin de termes.
Exemple
L’exemple suivant montre l’utilisation du mgt-taxonomy-picker composant pour sélectionner un terme à partir d’un ensemble de termes.
Propriétés et attributs
Vous pouvez utiliser plusieurs attributs pour modifier le comportement du composant. L’attribut requis est term-set-id.
| Attribut | Propriété | Description | Type |
|---|---|---|---|
| term-set-id | termsetId | Obligatoire. ID de l’ensemble de termes à partir duquel récupérer les termes de premier niveau. | Chaîne |
| term-id | termId | Optional. ID du terme à partir duquel récupérer les termes de premier niveau. Si elle n’est pas fournie, la fonction récupère les termes de premier niveau sous le jeu de termes spécifié par term-set-id. Notez que ce terme doit être l’un des termes sous l’ensemble de termes avec l’ID term-set-id. |
Chaîne |
| site-id | siteId | Optional. ID du site où l’ensemble de termes est présent. S’il n’est pas spécifié, l’ensemble de termes est supposé être au niveau du locataire. | Chaîne |
| version | version | Optional. Version de l’API à utiliser lors de la requête GET. La valeur par défaut est beta. |
Chaîne |
| Espace réservé | Espace réservé | Optional. Espace réservé à utiliser dans la zone de liste déroulante. La valeur par défaut est Select a term. |
string |
| local | local | Optional. Paramètres régionaux des termes qui doivent être affichés. Cela n’est utile que lorsque les termes ont plusieurs étiquettes dans différentes langues. | Chaîne |
| default-selected-term-id | defaultSelectedTermId | Optional. ID du terme qui doit être sélectionné par défaut. | Chaîne |
| position | position | Optional. Position de la liste déroulante. Peut être « supérieur » ou « inférieur ». La valeur par défaut est below. |
Chaîne |
| désactivé | désactivé | Optional. Définit si le sélecteur de taxonomie est désactivé. Lorsqu’il est désactivé, l’utilisateur ne peut pas rechercher ou sélectionner des termes. | N/A |
| activé pour le cache | cacheEnabled | Optional. Lorsqu’elle est définie, elle indique que la réponse de la ressource sera mise en cache. La valeur par défaut est false. |
Boolean |
| cache-invalidation-period | cacheInvalidationPeriod | Optional. (Nombre 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 est modifié par cette valeur. La valeur par défaut est 0 et utilise la période d’invalidation par défaut. |
Nombre |
L’exemple suivant modifie le comportement du composant pour extraire les termes enfants de premier niveau de l’ensemble de termes spécifié.
<mgt-taxonomy-picker
term-set-id="138a652e-7f23-46f6-b480-13da2308c235"
></mgt-taxonomy-picker>
L’exemple suivant modifie le comportement du composant pour extraire les termes enfants de premier niveau du terme spécifié.
<mgt-taxonomy-picker
term-set-id="138a652e-7f23-46f6-b480-13da2308c235"
term-id="a56caeb7-3b7d-4d22-93a9-0232e12905f6"
></mgt-taxonomy-picker>
L’exemple suivant modifie le comportement du composant pour extraire les étiquettes Français des termes enfants de premier niveau du terme spécifié.
<mgt-taxonomy-picker
term-set-id="138a652e-7f23-46f6-b480-13da2308c235"
term-id="a56caeb7-3b7d-4d22-93a9-0232e12905f6"
locale="fr-FR"
></mgt-taxonomy-picker>
L’exemple suivant modifie le comportement du composant pour extraire les termes enfants de premier niveau du jeu de termes spécifié qui est présent dans un site spécifié.
<mgt-taxonomy-picker
term-set-id="7889007a-fb0e-449f-b629-dedf63ae53de"
site-id="contoso.sharepoint.com,0962bcef-48f1-4460-baa8-b7286dcb249b,ba412b3c-951a-4322-ac37-0fe6307b5987"
></mgt-taxonomy-picker>
L’exemple suivant modifie le comportement du composant pour extraire les termes enfants de premier niveau de l’ensemble de termes spécifié et définit un terme spécifié à sélectionner par défaut.
<mgt-taxonomy-picker
term-set-id="138a652e-7f23-46f6-b480-13da2308c235"
default-selected-term-id="7ab1d163-f691-4676-88b3-c2d8921b73eb"
></mgt-taxonomy-picker>
Propriétés personnalisées CSS
Le mgt-taxonomy-picker composant définit les propriétés personnalisées CSS suivantes pour vous permettre de fournir des remplacements.
<mgt-taxonomy-picker
class="taxonomy-picker"
term-set-id="138a652e-7f23-46f6-b480-13da2308c235"
></mgt-taxonomy-picker>
.taxonomy-picker {
--taxonomy-picker-background-color: grey;
--taxonomy-picker-list-max-height: 200px;
--taxonomy-picker-background-color: black;
--taxonomy-picker-placeholder-color: white;
}
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é lorsque l’utilisateur apporte une modification à la sélection dans la liste déroulante. | Terme sélectionné qui sera du type TermStore.Term |
Non | Oui | Oui |
Pour plus d’informations sur la gestion des événements, consultez événements.
Modèles
Le mgt-taxonomy-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-taxonomy-picker term-set-id="138a652e-7f23-46f6-b480-13da2308c235">
<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-taxonomy-picker>
Autorisations de Microsoft Graph
Ce composant utilise les API et autorisations Microsoft Graph suivantes. Pour chaque API appelée, l’utilisateur doit disposer d’au moins l’une des autorisations répertoriées.
| Configuration | Autorisation | API |
|---|---|---|
| Valeur par défaut. | TermStore.Read.All, TermStore.ReadWrite.All | /termStore/sets/{setId}/children |
| Valeur par défaut. | TermStore.Read.All, TermStore.ReadWrite.All | /termStore/sets/{setId}/terms/{termId}/children |
site-id est défini |
TermStore.Read.All, TermStore.ReadWrite.All | /sites/{site-id}/termStore/sets/{set-id}/children |
site-id est défini |
TermStore.Read.All, TermStore.ReadWrite.All | /sites/{site-id}/termStore/sets/{set-id}/terms/{term-id}/children |
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-taxonomy-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 les conditions. |
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 a term |
| loadingMessage | Loading... |
| noTermsFound | No terms found |
| termsetIdRequired | The termsetId property or termset-id attribute is required |