Ubidots proporciona diferentes widgets de tabla para visualizar tus datos y uno de los más versátiles es el widget de Tabla de Valores, que permite a los usuarios no solo mostrar datos numéricos, sino también textos, fechas, URLs e imágenes. Además, la Tabla de Valores permite cosas adicionales como editar valores directamente desde el Widget.
Requisitos
Cuenta activa de Ubidots con datos disponibles.
1. Crear un widget de Tabla de Valores
Las tablas de valores proporcionan una lista de las lecturas registradas más recientes para una o más variables. Por favor, sigue estos pasos para crear un widget de Tabla de Valores:
En un Dashboard, haz clic en el botón “+” en la esquina superior derecha.
Selecciona el widget de Tabla de Valores.
Nota: si el Dashboard es dinámico, puedes seleccionar si el comportamiento del widget es estático (como si el dashboard fuera un Dashboard Estático) o si es dinámico.
3. En este punto, puedes agregar múltiples columnas de ‘fecha’, ‘valor’ o ‘contexto’ en cualquier orden que necesites:
Columna de fecha:
La columna de fecha muestra las fechas de los valores. Para agregar una columna de fecha:
Haz clic en la opción Fecha al agregar una columna.
Establece un nombre para la columna.
Selecciona un formato de fecha, o déjalo en “Establecido por el Dashboard”.
Selecciona el color deseado para las fechas.
5. Si lo deseas, elige una acción para un clic simple y/o doble clic en las fechas, luego establece la acción en consecuencia.
Ir al dispositivo: Te lleva a la vista del dispositivo en una nueva pestaña, mostrando el dispositivo al que pertenece la variable en cuestión.
Ir al dashboard: Abre una nueva pestaña con el dashboard especificado por el usuario.
Ir a URL: Abre una nueva pestaña con la URL especificada.
Ir a variable: Te lleva a la vista de la variable en una nueva pestaña, mostrando la variable en cuestión.
6. Elige y ajusta la fuente, su tamaño y su alineación.
7. Establece el ancho mínimo de la columna, o déjalo en ‘auto’ para que use automáticamente un tamaño que permita que todas las demás columnas también quepan.
Columna de valor:
La columna de valor muestra los valores de la variable recibidos dentro del intervalo seleccionado en el widget. Agregar una columna de valor tiene opciones bastante similares a las de agregar una columna de fecha, excepto que en lugar de configurar la fecha, aquí la configuración está orientada hacia qué variable mostrar los datos y cómo se muestran los datos.
Después de hacer clic en ‘valor’ al agregar una columna, selecciona el dispositivo y la variable de la que se recuperarán los valores.
Nota: Para dashboards estáticos, el widget siempre mostrará los datos para la variable seleccionada. Para dashboards dinámicos, el widget mostrará los datos para la variable con la misma etiqueta pero para el dispositivo seleccionado del dashboard.
2. Establece un nombre para la columna.
3. Selecciona un método de agregación (último valor, promedio, mínimo, máximo, suma, conteo).
Si el método de agregación es diferente de ‘último valor’, entonces también selecciona el período de muestreo.
Selecciona un intervalo para los datos, o déjalo en “Establecido por el Dashboard”.
4. Selecciona el comportamiento de color deseado para los valores.
Establecido por el widget: puedes establecer cualquier color para los valores.
Lógica de color: el color de los valores dependerá del rango del valor.
5. Si lo deseas, elige una acción para un clic simple y/o doble clic en los valores, luego establece la acción en consecuencia. Estas acciones son las mismas que en la columna de fecha.
6. Habilita o deshabilita “permitir edición”. Esta opción determina si los valores para la variable pueden ser editados directamente en el widget.
7. Elige y ajusta la fuente, su tamaño y su alineación.
8. Establece el ancho mínimo de la columna, o déjalo en auto para que use automáticamente un tamaño que permita que todas las demás columnas también quepan.
2. Crear un widget de Tabla de Valores que contenga datos de contexto
Para mejorar la apariencia de tus tablas y personalizar la visualización que necesitas para tus clientes, puedes usar contexto para almacenar URLs, imágenes, fechas y texto (ver tabla a continuación). Para agregar una columna de contexto:
Después de hacer clic en ‘contexto’ al agregar una columna, selecciona el dispositivo y la variable que proporcionará o recibirá el contexto, similar a cómo se hace para una columna de valores.
Decide si se pueden agregar valores manualmente o no, cambiando el botón de alternancia "permitir nuevas filas".
Ingresa un nombre para la columna.
Establece la clave de contexto de la que se extraerán los datos o a donde se enviarán.
Selecciona el tipo de contexto que se mostrará.
Tipo de contexto | Descripción | Ejemplo de carga útil |
Texto de una sola línea | Muestra el texto en una sola línea. Si es más largo que el ancho de la columna, aparecerá una elipsis (...) al final. |
|
Texto largo | Muestra el texto en una sola línea. Si es más largo que el ancho de la columna, se mostrará en varias líneas. |
|
Número | Muestra un número con los decimales, color y unidades especificados. |
|
Fecha | Muestra una fecha en el formato especificado. |
|
URL | Convierte el contenido en un hipervínculo que se abre en una nueva ventana. |
|
Imagen | Muestra un archivo JPG, PNG, BMP, TIF o GIF, utilizando el enlace de la imagen como fuente. Se puede renderizar un tamaño máximo de imagen de 256 x 256px. |
|
Lista | Muestra una lista de elementos definida por el usuario que se pueden publicar en la tabla.
Nota: Esta opción solo funciona cuando el botón de alternancia “permitir edición” está activado. | Aunque no hay carga útil involucrada en este tipo de contexto, la lista se construye ingresando todos los elementos como un texto separado por comas:
Por ejemplo:
Resuelto, Pendiente, Alerta, Desconocido |
6. Selecciona el color deseado para los campos de contexto cuando no son imágenes o URLs.
7. Si lo deseas, elige una acción para un clic simple y/o doble clic en los valores, luego establece la acción en consecuencia. Estas acciones son las mismas que en la columna de fecha.
8. Habilita o deshabilita “permitir edición”. Esta opción determina si el contexto para los valores de la variable puede ser editado directamente en el widget. Solo cuando esta opción está habilitada, el tipo de contexto “lista” funciona.
9. Elige y ajusta la fuente, su tamaño y su alineación.
10. Establece el ancho mínimo de la columna, o déjalo en ‘auto’ para que use automáticamente un tamaño responsivo que permita que todas las demás columnas también quepan.
Después de haber establecido las columnas para la fecha, valores y contexto, ahora puedes guardar y ver tu widget de Tabla de Valores.
3. Editar valores existentes
Las columnas de valor y contexto permiten que sus valores sean editados. Para hacer esto, simplemente asegúrate de que la opción “permitir edición” en la configuración de la columna esté habilitada.
Luego, en el widget haz clic en el ícono de editar al final de cada fila para habilitar la edición de los valores y/o contexto.
Una vez que hayas editado los valores, puedes hacer clic en la marca de verificación para guardarlos.
4. Agregar nuevas filas manualmente
Puedes agregar manualmente cualquier número de valores en las columnas existentes de tu Tabla de Valores. Para hacer esto, simplemente sigue estos pasos:
Habilita la opción "Permitir nuevas filas", ubicada en la parte superior de la configuración.
Haz clic en el botón "guardar".
Comienza a agregar nuevos valores ingresándolos en los campos que ahora han aparecido debajo de los nombres de las columnas.
Para guardar los valores en la tabla, haz clic en el ícono de disquete. Por otro lado, para limpiar los campos simplemente haz clic en el ícono de papelera.
Nota: si se selecciona un método de agregación diferente a "último valor" en la configuración de una columna de valor, la opción "permitir nuevas filas" se desactivará.
5. Sección de apariencia avanzada
Para reflejar la marca de tu aplicación, puedes personalizar aún más la apariencia de tu widget cambiando los siguientes valores:
Puntos decimales: establece la cantidad de decimales para los valores numéricos.
Bordes: selecciona el comportamiento del borde para las celdas en el widget de Tabla de Valores.
Ancho del borde: establece el grosor o ancho de los bordes de las celdas.
Congelar primera columna y encabezado: habilita estas dos opciones para fijar la primera columna y/o el encabezado en su lugar cuando te mueves a través de tu Tabla de Valores horizontal o verticalmente.
Valores por página: establece la cantidad máxima de valores que se mostrarán por cada página de la Tabla de Valores.
Color de fondo: elige un color de fondo para la Tabla de Valores.
Color del nombre de la columna: elige un color para los nombres de tus columnas.
Colores de fila alternos: elige uno o dos colores para alternar entre filas. Ten en cuenta que, por defecto, la transparencia (o opacidad) de estos colores se establece en 0 para no interferir con el color de fondo del widget.
Imagen de fondo: ya sea subir una imagen desde tu computadora o pegar la URL de una para ser mostrada en el fondo de tu widget.
Estilo personalizado: configura aún más el comportamiento de apariencia del widget. Para más información sobre esta funcionalidad, por favor consulta este artículo.
