Widget de barra de herramientas (con temas)
Introducción
 |
• El widget de barra de herramientas está disponible para ThingWorx 9.2 y versiones posteriores.
• El widget está disponible como inclusión estándar en la plataforma y como componente Web que se puede importar desde un SDK.
|
En el widget de barra de herramientas se muestra una barra de herramientas dinámica en el mashup. El widget combina los elementos comunes que se pueden configurar para mostrar las funciones que se utilizan con frecuencia en una forma compacta. Las barras de herramientas se pueden utilizar para crear filtros, activar servicios y modificar la vista al trabajar con widgets que tratan datos, como rejillas, listas y gráficos.
Consulte el siguiente vídeo sobre cómo configurar el widget y enlazar acciones a un widget de rejilla. Para abrir el vídeo en una nueva ficha, pulse en el título en el reproductor.
El widget de barra de herramientas consta de los siguientes elementos:
• Filtro de datos: tiene un cuadro de filtro simple o un filtro de datos basado en chip.
| | El filtro simple se activa por defecto al arrastrar el widget al espacio de trabajo. |
Filtro simple | Filtro de datos basado en chip |
 |  |
• Acciones: se incluyen las acciones definidas por el usuario.
Acciones de la barra de herramientas
El widget de barra de herramientas se puede utilizar para realizar las siguientes acciones, en otros widgets, tales como rejillas, listas y gráficos.
• Botón
• Desplegable
• Vínculo
• Alternar
En la siguiente imagen se muestran las acciones de ejemplo.
Estas acciones, en combinación con el filtro, funcionan como una barra de herramientas efectiva en los datos del mashup. La barra de herramientas puede contener muchos botones, menús desplegables, vínculos o botones de alternar según los requisitos. La barra de herramientas es lo suficientemente dinámica como para mostrar las acciones definidas por el usuario en una lista desplegable si hay un desbordamiento en el espacio ocupado por las acciones. Aparece un icono de control de desbordamiento en el que se puede pulsar para ver la lista desplegable de acciones.
En la siguiente imagen se muestra un ejemplo de widget de barra de herramientas con filtro de datos basado en chip y acciones.
1. Filtro de datos: filtro de datos basado en chip. El filtro se puede definir mediante la propiedad FilterType.
2. Chips: en esta región se muestran los chips de filtro que se han definido mediante el filtro de datos basado en chip.
3. Acciones: esta región contiene los botones, las listas desplegables, los vínculos y los botones de alternar.
4. Icono de control de desbordamiento
El filtro de datos se puede configurar mediante las propiedades que se describen en la siguiente tabla de propiedades. Para obtener información sobre la configuración de las acciones, consulte Definición de las acciones de la barra de herramientas mediante una infotable.
Formato de los datos
• FilterData:
Cuando se utiliza un filtro de datos basado en chip en lugar de un cuadro de filtro simple en la barra de herramientas, se debe crear un valor de Definición de datos con los valores de Definiciones de campo que se utilizan como categorías de filtro para los datos del mashup. Estas definiciones de campo se deben asignar y cada campo representa una categoría que aparece en la lista desplegable de filtros.
En la siguiente imagen se muestra un ejemplo de definiciones de campo en la definición de datos.
En la siguiente imagen se muestra una lista desplegable de categorías de filtros de ejemplo en el widget basada en las definiciones de campo.
• ActionsData:
Para crear las acciones en la barra de herramientas, se debe utilizar la definición de datos ToolbarAction que está disponible como entidad del sistema en la plataforma. Utilice esta definición de datos predefinida al crear un servicio para dar formato a la salida de la infotable y enlazar el servicio en el mashup para crear acciones en la barra de herramientas. Para obtener más información, consulte Definición de las acciones de la barra de herramientas mediante una infotable.
Enlace de un origen de datos
• Filtro de datos: para enlazar el widget de barra de herramientas a un origen de filtro de datos, realice los pasos que se indican a continuación.
a. En el panel Datos, añada un servicio de datos que devuelva una infotable con el formato de datos correcto para el filtro de datos.
b. Enlace la propiedad All Data del servicio de datos a la propiedad FilterData del widget.
c. Seleccione el widget de barra de herramientas y, a continuación, en el panel Propiedades, utilice las propiedades para configurar el filtro de datos.
d. Pulse en Guardar y, a continuación, en Ver mashup.
• Acciones: para enlazar el widget de barra de herramientas al origen de datos de acciones, realice los pasos que se indican a continuación.
a. En el panel Datos, añada un servicio de datos que devuelva una infotable con el formato de datos correcto para las acciones.
b. Enlace la propiedad All Data del servicio de datos a la propiedad ActionsData del widget.
c. Cuando se enlaza el origen de datos, aparece un conjunto nuevo de propiedades y eventos en el panel Propiedades para cada acción que se defina en el servicio.
d. Seleccione el widget de barra de herramientas y, a continuación, en el panel Propiedades, utilice las siguientes propiedades para configurar las acciones en otros widgets, como rejillas, listas y gráficos del mashup.
| | El nombre de la propiedad aparece en función del valor de actionId en el servicio. |
Acción | Nombre de propiedad/evento | Descripción | Ejemplo |
|---|---|---|---|
Botón | <actionId>_Clicked | Permite activar un evento enlazable al pulsar en el botón. | Button1_Clicked |
<actionId>_Disabled | Permite desactivar la acción del botón en la barra de herramientas. | Button1_Disabled | |
<actionId>_Visible | Permite controlar la visibilidad de la acción en la barra de herramientas. | Button1_Visible | |
Desplegable | <actionId>_Disabled | Permite desactivar la acción de lista desplegable en la barra de herramientas. | Dropdown1_Disabled |
<actionId>_SelectedText | Esta propiedad enlazable permite definir y recuperar el valor del texto seleccionado en la acción de lista desplegable. | Dropdown1_SelectedText | |
<actionId>_SelectedTextChanged | Permite activar un evento enlazable cuando se cambia el texto seleccionado en la lista desplegable. | Dropdown1_SelectedTextChanged | |
<actionId>_Visible | Permite controlar la visibilidad de la acción de lista desplegable en la barra de herramientas. | Dropdown1_Visible | |
Vínculo | <actionId>_Disabled | Permite desactivar la acción de vínculo en la barra de herramientas. | Link1_Disabled |
<actionId>_Visible | Permite controlar la visibilidad de la acción de vínculo en la barra de herramientas. | Link1_Visible | |
Alternar | <actionId>_Disabled | Permite desactivar la acción de alternancia en la barra de herramientas. | Toggle1_Disabled |
<actionId>_State | Esta propiedad enlazable permite definir y recuperar el estado de la acción del botón de alternar. | Toggle1_State | |
<actionId>_StateChanged | Permite activar un evento enlazable cuando se cambia el estado de la acción de alternancia. | Toggle1_StateChanged | |
<actionId>_Visible | Permite controlar la visibilidad de la acción de botón de alternar en la barra de herramientas. | Toggle1_Visible |
f. Pulse en Guardar y, a continuación, en Ver mashup.
Tabla de propiedades
A continuación, se indican las propiedades del widget de barra de herramientas.
Nombre de la propiedad | Descripción | Tipo base | Valor por defecto | ¿Es enlazable? (Sí/No) | ¿Es localizable? (Sí/No) | ||
|---|---|---|---|---|---|---|---|
ActionsData | El origen de datos de la infotable al que se da formato mediante la definición de datos ToolbarAction para mostrar y configurar los elementos de acción de la barra de herramientas. | INFOTABLE | n/d | S | N | ||
CategoryLabel | El texto que se muestra encima de la lista desplegable para las categorías de filtro. | STRING | Filtrar por | N | S | ||
ConditionLabel | El texto que se muestra encima de la lista desplegable de condiciones de filtro. | STRING | Condición | N | S | ||
CustomClass | Clase CSS definida por el usuario que se aplicará al elemento div superior del widget. Pueden introducirse varias clases, separadas por un espacio. | STRING | n/d | S | N | ||
Disabled | Permite desactivar el widget en el mashup. El widget se muestra en el mashup, pero no se puede pulsar en él ni seleccionarse. | BOOLEAN | Falso | S | N | ||
FilterChipPosition | Permite definir la posición del contenedor de chips para el filtro de datos. Los chips se pueden mostrar en la parte superior o inferior del widget. | STRING | Abajo | N | N | ||
FilterData | El origen de la infotable que contiene los datos de los elementos que se deben mostrar en la lista desplegable de filtro de chip. | INFOTABLE | n/d | S | N | ||
FilterDateOrder | Permite definir el orden del día, el mes y el año para las fechas que se muestran en el filtro de chip. Las opciones son Automático, Día-Mes-Año, Mes-Día-Año y Año-Mes-Día. | STRING | Automático | N | N | ||
FilterDisclosureType | Permite definir el tipo de elemento que se utiliza para mostrar y ocultar los chips de filtro como Mostrar enlace o Botón. | STRING | Mostrar vínculo | N | N | ||
FilterFormatToken | Permite dar formato a las fechas de filtro de chip utilizando el patrón “DD-MM-YY”. El formato distingue entre mayúsculas y minúsculas, y sustituye a la propiedad FilterDateOrder. Esta sintaxis sigue el formato ISO. | STRING | n/d | N | S | ||
FilterType | Permite definir el tipo de filtro. Se puede mostrar un cuadro de filtro simple o utilizar el widget de filtro de datos basado en chip. Seleccione Ninguno para ocultar el filtro.
| STRING | Cuadro de filtro | N | N | ||
HideFilterSeparator | Permite ocultar la línea vertical que se utiliza para separar el filtro de datos en la barra de herramientas.
| BOOLEAN | Falso | N | N | ||
LatitudeLabel | El texto que se muestra encima del cuadro de entrada para la latitud cuando se filtra por ubicación mediante el filtro de chip. | STRING | Latitud | N | S | ||
LongitudeLabel | El texto que se muestra encima del cuadro de entrada para la longitud cuando se filtra por ubicación mediante el filtro de chip. | STRING | Longitude | N | S | ||
Query | La consulta JSON que se utiliza para recuperar el conjunto de datos filtrado. | QUERY | n/d | S | N | ||
QueryChanged | Permite activar un evento cuando se cambia la consulta de widget de filtro. | n/d | n/d | S | N | ||
RangeEndValueLabel | El texto que se muestra encima del segundo cuadro de entrada cuando se filtra un rango de valores mediante el filtro de chip. | STRING | Valor 2 | N | S | ||
RangeStartValueLabel | El texto que se muestra encima del primer cuadro de entrada cuando se filtra un rango de valores mediante el filtro de chip. | STRING | Valor 1 | N | S | ||
ResetToDefaultValue | Permite restaurar los valores por defecto de las entradas de este widget. | n/d | n/d | S | N | ||
ShowCategoryListFilter | Permite añadir un cuadro de filtro a la lista desplegable de las categorías de filtros. | BOOLEAN | Falso | S | N | ||
ShowHideFilters | Permite ocultar los controles de divulgación y expandir el contenedor de chips para el widget de filtro de datos. | BOOLEAN | Verdadero | N | N | ||
SortFilter | Permite clasificar la lista de opciones para las categorías de filtros de datos en orden alfabético. | BOOLEAN | Verdadero | N | N | ||
SimpleFilterChanged | Permite activar un evento cuando se modifica la cadena en el cuadro de filtro. | n/d | n/d | S | N | ||
SimpleFilterHintText | Permite definir el texto de la sugerencia para el cuadro de filtro. | STRING | Filtro | N | S | ||
SimpleFilterLabel | Permite definir el rótulo del cuadro de filtro. | STRING | n/d | S | S | ||
SimpleFilterPosition | Permite definir la posición del cuadro de filtro en la barra de herramientas. El cuadro se puede colocar en las regiones Izquierda, Derecha o Centro. Cuando la posición se define en Centro, aparece una propiedad SimpleFilterAlignment en la lista. | STRING | Izquierda | N | N | ||
SimpleFilterAlignment | Permite definir la alineación del cuadro de filtro cuando se coloca en la región de centro de la barra de herramientas. El cuadro se puede alinear a la Izquierda, Derecha o Centro. | STRING | Izquierda | S | N | ||
SimpleFilterString | Permite definir o recuperar la cadena en el cuadro de filtro simple. | STRING | n/d | S | N | ||
SimpleFilterWidth | Permite definir el ancho del cuadro de filtro. | NUMBER | 273 | S | N | ||
TabSequence | Permite definir el número de secuencia del widget al pulsar el tabulador. | NUMBER | 0 | N | N | ||
UnitsLabel | El texto que se muestra encima de la lista desplegable para definir las unidades al filtrar por ubicación o por fecha mediante el filtro de chip. | STRING | Unidades | N | S | ||
ValueLabel | El texto que se muestra encima del cuadro de entrada que contiene el valor de la condición en el filtro de chip. | STRING | Valor | N | S |