Ejemplo de dashboard de gestión de flotas
Ejemplo de dashboard de gestión de flotas
Este ejemplo muestra un dashboard con dos vistas:
- un Root-State con un resumen de dispositivos en forma de tabla
- un Details-State con una vista de detalle del dispositivo seleccionado
Esta estructura es adecuada para flotas, grupos de dispositivos o listas de instalaciones en las que primero se desea mostrar varios dispositivos conjuntamente y después examinar en detalle cada uno de ellos.
El ejemplo puede ampliarse del mismo modo a cualquier número de dispositivos/aliases/states/actions.
Paso 1: Crear el dashboard
En primer lugar se crea un dashboard nuevo, aquí con el nombre Fleet Management Dashboard.
Paso 2: Crear un alias para la flota
Lo primero es crear un alias para todos los dispositivos de la flota. En el ejemplo, este alias se llama Fleet.
Propiedades importantes:
- Nombre del alias: Fleet
- Resolve as multiple entities está activado
- Tipo de grupo: Entity list
- Dispositivos seleccionados: DemoDevice_1 y DemoDevice_2
Más adelante, este alias servirá como fuente de datos de la tabla resumen.
Paso 3: Crear un alias para la vista de detalle
A continuación se crea un segundo alias con el nombre Details.
Propiedades importantes:
- Nombre del alias: Details
- Tipo de grupo: Entity from dashboard state
- Dispositivo de reserva en el ejemplo: DemoDevice_1
Este alias resuelve siempre el dispositivo que se ha transmitido en ese momento a través del estado del dashboard. De este modo, el mismo Details-State puede reutilizarse después para distintos dispositivos.
Paso 4: Crear el Details-State
Para que el dashboard pueda cambiar entre el resumen y la vista de detalle, se crea un segundo estado. En el ejemplo se llama DetailsState.
Después hay dos estados:
- el Root-State como vista inicial
- el DetailsState como destino de la navegación al detalle
Mediante el selector de estado de la parte superior izquierda (junto al selector de la ventana temporal) se puede cambiar al Details-State recién creado. Justo después de crearlo, el Details-State todavía está vacío.
Paso 5: Añadir una tabla en el Root-State
Ahora se inserta en el Root-State un widget de tabla, en el ejemplo una Entities Table.
Como fuente de datos se utiliza el alias Fleet.
Así, la tabla muestra todos los dispositivos incluidos en el alias Fleet.
Paso 6: Configurar la acción de fila para la navegación
Para que un clic en una fila de la tabla cambie a la vista de detalle, se crea una acción en el widget de tabla, en Actions.
La acción se configura de la siguiente manera:
- Action source: On row click
- Type: Navigate to the new dashboard state
- Target dashboard state: detailsstate
- Set entity from widget permanece activado
El último punto es decisivo: así se transmite al estado de destino el dispositivo en el que se ha hecho clic en la fila de la tabla. El alias Details puede entonces resolver automáticamente ese dispositivo.
Paso 7: Añadir un chart en el Details-State
Ahora se cambia al DetailsState y se crea allí un widget de chart.
Esta vez, como fuente de datos no se utiliza el alias Fleet, sino el alias Details.
En el ejemplo se muestra el canal Temperature.
Opcional: etiqueta dinámica para la leyenda
Para que el chart sea más legible, se puede ajustar el Data-Key.
En el ejemplo se establece como etiqueta:
${entityName} Temperature
De este modo, más adelante la leyenda no mostrará solo el nombre del canal, sino también el nombre del dispositivo seleccionado en ese momento.
Paso 8: Crear un botón Home para volver
Además, en el Details-State se inserta un widget de botón que lleva de vuelta al resumen.
La acción se establece de la siguiente manera:
- Action source: widget-action.body-click
- Type: Navigate to the previous dashboard state
Así, al hacer clic en el botón, el dashboard vuelve al estado abierto anteriormente.
Resultado
Tras guardar, el Root-State muestra el resumen de dispositivos:
Un clic en DemoDevice_1 abre el Details-State con la evolución de la temperatura de ese dispositivo:
Un clic en DemoDevice_2 lleva al mismo Details-State, pero esta vez con los datos del segundo dispositivo:
Con ello se comprueba que:
- la misma página de detalle se reutiliza para varios dispositivos
- el dispositivo seleccionado se toma correctamente de la tabla
- la navegación de vuelta mediante el botón Home funciona
Volver al resumen de ejemplos: