Componente selector de taxonomía en el kit de herramientas de Microsoft Graph
El selector de taxonomía es un componente que puede consultar la Graph API de Microsoft para taxonomía y representar un control desplegable con términos, lo que permite seleccionar un único término basado en el conjunto id de términos especificado o una combinación del conjunto id de términos especificado y el término idespecificado.
El componente recupera los términos de primer nivel que están presentes en un conjunto de términos especificado o un término. Si solo se proporciona el identificador del conjunto de términos, devuelve los términos de primer nivel de ese conjunto de términos. Si se proporcionan el identificador de conjunto de términos y el identificador de término, devuelve los términos de primer nivel en el término especificado.
Nota Esta funcionalidad admite actualmente una única selección de términos procedentes del almacén de términos.
Ejemplo
En el ejemplo siguiente se muestra el uso del mgt-taxonomy-picker componente para seleccionar un término de un conjunto de términos.
Propiedades y atributos
Puede usar varios atributos para cambiar el comportamiento del componente. El atributo necesario es term-set-id.
| Atributo | Propiedad | Descripción | Tipo |
|---|---|---|---|
| term-set-id | termsetId | Obligatorio. Identificador del conjunto de términos del que se van a recuperar los términos de primer nivel. | Cadena |
| term-id | termId | Opcional. Identificador del término del que se van a recuperar los términos de primer nivel. Si no se proporciona, la función recupera los términos de primer nivel del conjunto de términos especificado por term-set-id. Tenga en cuenta que este término debe ser uno de los términos del conjunto de términos con id term-set-id. . |
Cadena |
| site-id | siteId | Opcional. Identificador del sitio donde está presente el conjunto de términos. Si no se especifica, se supone que el conjunto de términos está en el nivel de inquilino. | Cadena |
| version | version | Opcional. Versión de API que se va a usar al realizar la solicitud GET. El valor predeterminado es beta. |
Cadena |
| Marcador | Marcador | Opcional. Marcador de posición que se va a usar en el cuadro combinado. El valor predeterminado es Select a term. |
string |
| configuración regional | configuración regional | Opcional. Configuración regional de los términos que se deben mostrar. Esto solo resulta útil cuando los términos tienen varias etiquetas en diferentes idiomas. | Cadena |
| default-selected-term-id | defaultSelectedTermId | Opcional. Identificador del término que se debe seleccionar de forma predeterminada. | Cadena |
| position | position | Opcional. Posición de la lista desplegable. Puede ser "por encima" o "por debajo". El valor predeterminado es below |
Cadena |
| deshabilitado | deshabilitado | Opcional. Establece si el selector de taxonomía está deshabilitado. Cuando está deshabilitado, el usuario no puede buscar ni seleccionar términos. | ND |
| habilitado para caché | cacheEnabled | Opcional. Cuando se establece, indica que la respuesta del recurso se almacenará en caché. El valor predeterminado es false. |
Booleano |
| cache-invalidation-period | cacheInvalidationPeriod | Opcional. (Número de milisegundos) Cuando se establece en combinación con cacheEnabled, este valor modificará el retraso antes de que la memoria caché alcance su período de invalidación. El valor predeterminado es 0 y usará el período de invalidación predeterminado. |
Número |
En el ejemplo siguiente se cambia el comportamiento del componente para capturar los términos secundarios de primer nivel del conjunto de términos especificado.
<mgt-taxonomy-picker
term-set-id="138a652e-7f23-46f6-b480-13da2308c235"
></mgt-taxonomy-picker>
En el ejemplo siguiente se cambia el comportamiento del componente para capturar los términos secundarios de primer nivel del término especificado.
<mgt-taxonomy-picker
term-set-id="138a652e-7f23-46f6-b480-13da2308c235"
term-id="a56caeb7-3b7d-4d22-93a9-0232e12905f6"
></mgt-taxonomy-picker>
En el ejemplo siguiente se cambia el comportamiento del componente para capturar las etiquetas en francés de los términos secundarios de primer nivel del término especificado.
<mgt-taxonomy-picker
term-set-id="138a652e-7f23-46f6-b480-13da2308c235"
term-id="a56caeb7-3b7d-4d22-93a9-0232e12905f6"
locale="fr-FR"
></mgt-taxonomy-picker>
En el ejemplo siguiente se cambia el comportamiento del componente para capturar los términos secundarios de primer nivel del conjunto de términos especificado que está presente en un sitio especificado.
<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>
En el ejemplo siguiente se cambia el comportamiento del componente para capturar los términos secundarios de primer nivel del conjunto de términos especificado y se establece un término especificado que se va a seleccionar de forma predeterminada.
<mgt-taxonomy-picker
term-set-id="138a652e-7f23-46f6-b480-13da2308c235"
default-selected-term-id="7ab1d163-f691-4676-88b3-c2d8921b73eb"
></mgt-taxonomy-picker>
Propiedades personalizadas css
El mgt-taxonomy-picker componente define las siguientes propiedades personalizadas CSS con las que puede proporcionar invalidaciones.
<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;
}
Para obtener más información, consulte Componentes de estilo.
Métodos
| Método | Descripción |
|---|---|
| refresh(force?:boolean) | Llame al método para actualizar los datos. De forma predeterminada, la interfaz de usuario solo se actualizará si cambian los datos. Pase true para forzar la actualización del componente. |
Eventos
| Evento | Cuándo se emite | Datos personalizados | Cancelable | Burbujas | Funciona con una plantilla personalizada |
|---|---|---|---|---|---|
selectionChanged |
Se desencadena cuando el usuario realiza un cambio en la selección en la lista desplegable. | El término seleccionado que será del tipo TermStore.Term |
No | Sí | Sí |
Para obtener más información sobre el control de eventos, vea eventos.
Plantillas
El mgt-taxonomy-picker componente admite varias plantillas que puede usar para definir la apariencia. Para especificar una plantilla, incluya un <template> elemento dentro de un componente y establezca en data-type uno de los siguientes valores.
| Tipo de datos | Contexto de datos | Descripción |
|---|---|---|
| error | Error de Microsoft Graph. | Esta plantilla se usa si se produce un error al realizar la solicitud. |
| Carga | N/D | Esta plantilla se usa mientras se realiza la solicitud. |
| sin datos | N/D | Esta plantilla se usa cuando la solicitud no devuelve datos. |
Uso de plantilla de ejemplo
<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>
Permisos de Microsoft Graph
Este componente usa las siguientes API y permisos de Microsoft Graph. Para cada API llamada, el usuario debe tener al menos uno de los permisos enumerados.
| Configuración | Permiso | API |
|---|---|---|
| Es el valor predeterminado. | TermStore.Read.All, TermStore.ReadWrite.All | /termStore/sets/{setId}/children |
| Es el valor predeterminado. | TermStore.Read.All, TermStore.ReadWrite.All | /termStore/sets/{setId}/terms/{termId}/children |
site-id está establecido |
TermStore.Read.All, TermStore.ReadWrite.All | /sites/{site-id}/termStore/sets/{set-id}/children |
site-id está establecido |
TermStore.Read.All, TermStore.ReadWrite.All | /sites/{site-id}/termStore/sets/{set-id}/terms/{term-id}/children |
Para obtener más información sobre los permisos, consulte la referencia de permisos de Microsoft Graph.
Autenticación
El control usa el proveedor de autenticación global descrito en la documentación de autenticación para capturar los datos necesarios.
Caché
Para habilitar y configurar la memoria caché, use las cacheEnabled propiedades y cacheInvalidationPeriod . De forma predeterminada, el mgt-taxonomy-picker componente no almacena en caché ninguna respuesta.
| Almacén de objetos | Datos almacenados en caché | Comentarios |
|---|---|---|
response |
Complete la respuesta recuperada de Microsoft Graph para los términos. |
Para obtener más información, consulte Almacenamiento en caché.
Localización
El control expone las siguientes variables que se pueden localizar. Para obtener más información sobre cómo configurar la localización, consulte Localización de componentes.
| Nombre de cadena | Valor predeterminado |
|---|---|
| comboboxPlaceholder | Select a term |
| loadingMessage | Loading... |
| noTermsFound | No terms found |
| termsetIdRequired | The termsetId property or termset-id attribute is required |