Widget de selector de árboles (con temas)
 |
El selector de árboles está disponible como widget en Mashup Builder y como componente Web en la biblioteca de Web Component SDK.
|
El widget de selector de árboles permite proporcionar una navegación de datos jerárquica y la selección de un único elemento almacenado en una propiedad de infotable. Por ejemplo, se puede utilizar el widget para permitir a los usuarios seleccionar productos de diferentes familias y categorías, máquinas remotas que se implementan en diferentes sitios o piezas de inventario que se almacenan en un almacén de mantenimiento. Se puede enlazar el elemento seleccionado a otros widgets, como de cuadrícula o visualización de propiedades, para mostrar más información sobre un objeto específico. El widget se divide en dos áreas:
• Vista en árbol en la que se muestra la ruta al elemento seleccionado y que permite navegar por la estructura de árbol.
• Vista de selección en la que se enumeran todos los hijos del elemento actual.
Además, un botón de búsqueda permite a los usuarios buscar en toda la jerarquía del selector de árboles. Cuando el selector de árboles se carga en tiempo de ejecución, se muestran los elementos de nivel superior en el área de selección. Cuando se selecciona un elemento, se muestran sus hijos y el árbol se actualiza para realzar la ruta del elemento. El árbol se puede utilizar para navegar a niveles superiores en la jerarquía de datos. Para ver los hijos de un elemento, se debe seleccionar en el área de selección. Cuando un elemento no tiene hijos, se muestra un mensaje. Este mensaje se puede personalizar mediante la propiedad de widget NoChildrenMessage.
Anatomía
El selector de árboles se divide en dos vistas. Una vista en árbol en la que se muestra la ruta al elemento actual y una vista de selección en la que se enumeran los hijos disponibles para el elemento seleccionado.
1. Despejar selección. Al pulsar este botón, se redefine el selector del árbol en el elemento de nivel superior.
2. Elemento de nivel superior
3. Elemento hijo de Factories y un padre de Painting Line.
4. Botón de búsqueda de elementos
5. Elemento
6. Color de realzado de elementos
Formato de los datos
Para configurar los elementos de lista del widget de selector de árboles, se debe crear un servicio que devuelva una infotable con las siguientes definiciones de campo:
Campo ID | Campo ID padre | Campo Nombre | Campo Color | |
|---|---|---|---|---|
Tipo base | STRING | STRING | STRING | STRING |
Descripción | Un identificador único para cada elemento del selector de árboles. | El ID del elemento padre en el selector de árboles. | El rótulo que se debe mostrar para el elemento en el selector de árboles. | Campo opcional en el que se especifica el color que se utiliza para realzar el elemento. Formatos soportados: nombres de color CSS 'red', valores RGB 'rgb(255, 0, 0)', o valores hexadecimales '#ff0000". |
Ejemplo de fila | #2 | #1 | Factory | Red |
En cada fila de la infotable se define un elemento del selector de árboles. El servicio de datos se puede configurar para generar elementos estáticamente o de forma dinámica en función de la entrada de otros widgets o servicios.
Creación de un servicio de datos para el selector de árboles
1. En Composer, abra una cosa, una plantilla de cosa o cualquier otro tipo de entidad y, a continuación, abra la ficha Servicios.
2. Pulse en Añadir para crear un nuevo servicio para el selector de árboles.
3. En Información de servicio, escriba un nombre para el servicio y, a continuación, pulse en Guardar y continuar.
4. En el editor de código, defina una nueva infotable mediante el formato de datos del selector de árboles.
5. Defina los elementos del árbol mediante la adición de filas con valores para cada campo de la infotable mediante la definición de datos. La sintaxis para definir una fila es la siguiente:
<infotable_name>.AddRow(<Row_Object>);
6. Cuando termine de definir el servicio, pulse en Terminado y, a continuación, en Guardar para guardar los cambios en la entidad.
 | Pulse en Ejecutar para obtener una vista previa de la infotable de salida devuelta desde el servicio de datos. |
En la siguiente imagen se muestra la salida de la infotable después de que se ejecute el servicio de datos:
Enlace de datos al selector de árboles
Para enlazar datos al widget de selector de árboles, realice los siguientes pasos:
1. En Mashup Builder, añada una cosa que contenga un servicio de datos para los elementos del selector de árboles mediante el panel Datos.
2. Enlace la propiedad All Data de un servicio a la propiedad de widget Data.
3. Enlace el servicio al evento mashup Loaded.
4. En el panel Propiedades, especifique las columnas de infotable que se deben utilizar para configurar los elementos del selector de árboles.
◦ IDField: la columna del identificador único de los elementos.
◦ NameField: el rótulo de columna que se debe mostrar para el elemento.
◦ ParentIDField: la columna que se utiliza para especificar el ID padre de los elementos.
◦ ColorField: la columna en la que se incluye el color utilizado para realzar cada elemento.
5. Pulse en Guardar y, a continuación, en Ver mashup.
En tiempo de ejecución, el elemento de nivel superior se muestra al abrir el selector de árboles.
Búsqueda de elementos
La búsqueda permite mostrar una lista de los elementos coincidentes de todos los datos del árbol. Los elementos que están más cerca de la selección actual aparecen en una posición más alta en los resultados de la búsqueda. Cada nombre de elemento va seguido de la ruta completa en la estructura de árbol. Además, se muestran colores de realzado para facilitar la identificación de elementos relacionados. Para desactivar la búsqueda, defina la propiedad HideSearchButton en falso.
Transmisión de los elementos seleccionados a otros widgets o servicios
El elemento seleccionado se puede transferir mediante una de las siguientes propiedades:
• SelectedData
• SelectedItem: contiene el nombre del elemento seleccionado.
Utilice la propiedad SelectedData. La propiedad SelectedItem no proporciona un valor único.
La INFOTABLE, una estructura de datos, contiene una única fila que corresponde a SelectedItem de la INFOTABLE de entrada original. Esta elección de diseño se ha realizado para solucionar un problema específico: la imposibilidad de distinguir entre elementos con nombres idénticos basados únicamente en el elemento SelectedItem.
Por ejemplo, considere el ejemplo que se proporciona en la especificación Figma. El término "Apple" aparece en tres secciones distintas: "Computer companies", "Record company" y "Fruit". Cada instancia de "Apple" es un elemento independiente. Si se basase únicamente en SelectedItem, sería imposible determinar cuál de las tres instancias de "Apple" ha seleccionado el usuario.
Sin embargo, mediante el uso de SelectedData, se puede superar esta limitación. SelectedData proporciona información completa sobre el elemento seleccionado, lo que permite identificar el elemento exacto que se ha seleccionado, independientemente de si otros elementos comparten el mismo nombre. De este modo, se garantiza una selección precisa de elementos, lo que mejora la funcionalidad y la experiencia de usuario del sistema.
Propiedades de los widgets
Nombre de la propiedad | Descripción | Tipo base | Valor por defecto | Enlazable (<-, ->) | Localizable (Sí/No) |
|---|---|---|---|---|---|
Data | El origen de los datos de infotable utilizado para definir los elementos que se mostrarán en el widget. | INFOTABLE | S | N | |
IDField | La columna de la infotable en los datos que contienen el ID de cada elemento. | Campo de infotable | N | N | |
ParentIDField | La columna de la infotable en los datos que contienen el ID del padre de cada elemento. | Campo de infotable | N | N | |
NameField | La columna de la infotable en los datos que contienen el nombre mostrado de cada elemento. | Campo de infotable | N | N | |
ColorField | La columna de la infotable en los datos que contienen el color de cada elemento. Formatos soportados: nombres de color CSS 'red', valores RGB 'rgb(255, 0, 0)', o valores hexadecimales '#ff0000". | Campo de infotable | N | N | |
SelectedData | Una infotable en la que se incluyen los datos de fila con un identificador único para el elemento seleccionado. Esta propiedad se utiliza cuando la propiedad SelectedItem no proporciona un valor único. Por ejemplo, cuando un elemento con el mismo nombre se muestra bajo múltiples padres. | INFOTABLE | S | N | |
SelectedItem | El nombre del elemento seleccionado. Especificar el elemento seleccionado en el selector de árboles. | STRING | Vacío | S | N |
SelectedItemChanged | Un evento enlazable que se activa al cambiar el elemento seleccionado. | Evento | S | N | |
HideSearchButton | Permite ocultar el botón de búsqueda. Al utilizar la búsqueda, los elementos más cercanos al elemento seleccionado se muestran primero, seguido por el resto de los resultados de la búsqueda. | BOOLEAN | Falso | S | N |
NoSelectionMessage | Mensaje que se debe mostrar en el lado derecho del widget cuando no se haya realizado ninguna selección en el selector de estructura de árbol. | STRING | Widgets.NoSelectionMessage | S | S |
EndOfSelectionMessage | El mensaje que se debe mostrar en el lado derecho del widget cuando el elemento seleccionado no tiene hijos. | STRING | Widgets.EndOfSelectionMessage | S | S |
NoSearchResultsMessage | El mensaje que se debe mostrar en el lado derecho del widget cuando no hay resultados de búsqueda. | STRING | Widgets.NoResultsMessage | S | S |
Label | Especificar el texto del rótulo del selector de árboles. | STRING | Vacío | S | S |
SelectionLabel | Especificar el rótulo que se debe mostrar por encima de la sección de selección del lado derecho. | STRING | Widgets.ChooseBelowMessage | S | S |
ClearSelectionLabel | Definir el texto del rótulo para el botón Despejar selección. | STRING | Widgets.ClearSelectionMessage | S | S |
Disabled | Utilizar esta propiedad para desactivar el widget en el mashup. | BOOLEAN | Falso | S | N |