Componente selector de taxonomía en el kit de herramientas de Microsoft Graph

Artículo
02/14/2024

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.

HTML
React

Abra este ejemplo en mgt.dev.

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`

Compartir vía