Dashboards

Qué son los Dashboards

Los dashboards son paneles visuales configurables que muestran datos en tiempo real o bajo demanda desde tus workflows, APIs y bases de datos. Cada dashboard está compuesto por widgets dispuestos en una cuadrícula responsive de 12 columnas.

Los dashboards pueden mantenerse privados (visibles solo para tu equipo) o publicarse mediante una URL compartible sin necesidad de autenticación.

---

Primeros pasos

Desde la sección Dashboards en el menú lateral:

1. Haz clic en Nuevo Dashboard
2. Elige nombre, descripción opcional y una plantilla de inicio
3. Se abre el Dashboard Builder — agrega widgets, configura fuentes de datos y personaliza el diseño
4. Haz clic en Guardar en cualquier momento

Plantillas de inicio

Plantilla	Descripción
En blanco	Empieza desde cero con el lienzo vacío
Sales Overview	4 tarjetas KPI + gráfico de barras + gráfico circular + tabla de pedidos
Operations Monitor	Métricas de ejecución + línea de tendencia en tiempo real
Customer Analytics	Donut de segmentación de clientes + tabla de mejores clientes

---

Dashboard Builder

El builder es un editor visual con arrastrar y soltar para componer layouts de widgets.

Diseño del lienzo

• Cuadrícula de 12 columnas: cada widget ocupa un número configurable de columnas (1–12) y filas
• Arrastra el widget para reposicionarlo, arrastra los bordes para redimensionarlo
• El color de fondo del lienzo y el tema general son personalizables

Agregar widgets

Haz clic en + Agregar widget y elige un tipo del panel:

Widget	Tipo interno	Descripción
KPI	kpi	Tarjeta de métrica única con indicador delta opcional y sparkline
Gráfico de barras	bar	Barras verticales u horizontales con múltiples series
Gráfico de líneas	line	Serie temporal o gráfico de tendencia con múltiples series
Gráfico circular	pie	Gráfico de sectores proporcionales
Donut	donut	Variante del circular con etiqueta central configurable
Tabla	table	Tabla de datos paginada, ordenable y con acciones por fila
Texto	text	Contenido estático enriquecido con variantes tipográficas
Imagen	image	Incrustar una imagen por URL, o elegida de la biblioteca de Recursos, con ajuste de contenedor
Menú de enlaces	link	Cuadrícula de enlaces de navegación o botones de acción. Variantes: card, button, text, list
Menú de navegación	menu	Barra de navegación con orientación vertical u horizontal. Variantes: sidebar, buttons, pills
Sección	section	Contenedor agrupador con 1–4 sub-columnas y encabezado opcional

Interfaz del builder

El Dashboard Builder presenta un diseño de tres paneles:

• Panel izquierdo (Catálogo de widgets): lista los tipos de widgets disponibles agrupados por categoría. Haz clic en el botón ‹ para colapsarlo en modo solo-iconos y liberar espacio horizontal para el lienzo. Pasa el cursor sobre los iconos para ver sus nombres con tooltip.
• Centro (Lienzo): cuadrícula de arrastrar y soltar donde se colocan y redimensionan los widgets.
• Panel derecho (Configuración): arrastra el separador vertical en su borde izquierdo para ajustar su ancho (entre 240 y 700 px). Combinar el catálogo colapsado con un panel derecho más estrecho maximiza el espacio del lienzo.

Panel derecho: Config. de widget y ajustes del Dashboard

El panel lateral derecho tiene dos modos, alternados mediante pestañas en la parte superior:

• Widget — configura el widget seleccionado (fuente de datos, campos específicos del tipo, estilo visual)
• Dashboard — configura ajustes globales (nombre, descripción, tema, fuentes de datos compartidas, seguridad)

Ambas pestañas están siempre accesibles mientras hay un widget seleccionado. Al seleccionar un widget diferente, el panel vuelve automáticamente al modo Widget.

Configurar un widget

Selecciona cualquier widget para abrir su panel de configuración a la derecha:

• Título: se muestra en la parte superior de la tarjeta
• Posición y tamaño: columna de inicio, ancho en columnas, fila de inicio, alto en filas
• Fuente de datos (ver Modos de fuente de datos más abajo)
• Auto-actualización: intervalo en milisegundos para refresco automático (0 = desactivado)
• Config. específica del tipo: los campos dependen del tipo de widget

Configuración KPI

Campo	Descripción
valueField	Campo JSON que contiene el valor numérico
unit	Sufijo (p.ej. €, %, ms)
prefix	Prefijo
color	Color de acento de la tarjeta
deltaField	Campo para el indicador de cambio/delta
icon	Nombre del ícono Material para referencia visual

Configuración de gráficos (Barras / Líneas / Circular / Donut)

Campo	Descripción
xField	Campo para el eje X (o etiqueta para circular/donut)
yFields	Array de series: { field, label, color }
horizontal	Rotar el gráfico de barras a horizontal
legend	Mostrar u ocultar la leyenda
centerLabel	Texto en el hueco central (solo donut)

Configuración de tabla

Campo	Descripción
columns	Array de { field, label, width, align, format }
opciones de format	text, number, currency, date, badge
badgeColors	Mapa de colores para valores tipo badge
pageSize	Filas por página
sortable	Activar ordenación por columna

Configuración de Menú de enlaces (link)

Campo	Descripción
items	Array de { label, url, icon, description }
variant	Apariencia: card (tarjetas), button (botones), text (texto plano), list (lista)
columns	Número de columnas en la cuadrícula (1–4)

Configuración de Menú de navegación (menu)

Campo	Descripción
items	Array de { label, url, icon }
orientation	vertical u horizontal
variant	Estilo visual: sidebar (panel lateral), buttons (botones), pills (pastillas)

---

Acciones al hacer clic en widgets

Cada widget puede configurarse con una acción que se dispara al hacer clic sobre él. Las acciones se configuran en la pestaña Acción del panel de configuración del widget (disponible para KPIs, gráficos y tablas).

Tipos de acción

Tipo	Descripción
url	Abre cualquier URL (relativa o absoluta)
dashboard	Abre otro dashboard de Floogos
form	Abre un formulario de Floogos publicado
data_drawer	Llama a un endpoint y muestra los datos obtenidos

Destinos

Destino	Descripción
drawer	Desliza un panel desde la derecha (por defecto)
new_tab	Abre en una nueva pestaña del navegador
same_tab	Navega en la pestaña actual

Variables de plantilla

Las URLs, endpoints y parámetros admiten la sintaxis {{campo}}. Al hacer clic, cada token es sustituido con el valor correspondiente tomado de los datos activos del widget, los campos de la fila clicada (para tablas) o los valores de los filtros activos del dashboard.

Ejemplos:

• /api/pedidos/{{id}} — inserta el campo id de la fila clicada
• https://crm.ejemplo.com/clientes/{{cliente_id}} — construye una URL dinámica
• Parámetros: { "region": "{{filtro_region}}" } — pasa el valor del filtro activo

Acciones en filas de tabla

Para widgets de tipo Tabla, define el campo ID de fila (rowIdField) para identificar cada fila de forma única. Al activar rowClickAction, cada fila se vuelve clicable y abre la acción configurada. Aparece automáticamente una columna con icono ↗ al final de la tabla para indicar la interactividad.

Configuración del drawer

Cuando el destino es drawer:

Campo	Descripción
Título del drawer	Texto de cabecera (admite {{campo}})
Ancho del drawer	Ancho en píxeles — entre 240 y 700 (por defecto 600)
Tras enviar (solo tipo form)	Mostrar el resultado del envío (por defecto) o Volver al formulario: aviso con el resultado encima del formulario y campos en blanco, para encadenar varios envíos sin cerrar el drawer

El drawer tiene un botón para abrir en nueva pestaña cuando el tipo de acción lo permite (url, dashboard, form).

Si la acción abre un formulario en el drawer, al enviarlo el drawer muestra el resultado (o vuelve al formulario, según «Tras enviar») y se recarga solo el widget cuya fila lo abrió (por ejemplo, la tabla de citas tras cambiar el estado de una); el resto del dashboard no se toca y al cerrar el drawer ya no se vuelve a refrescar todo.

Editor vs. vista pública

Las acciones de clic y los drawers funcionan de forma idéntica en el Dashboard Builder y en la vista pública del dashboard publicado — sin necesidad de autenticación adicional.

---

Modos de fuente de datos

Cada widget puede recibir datos en uno de dos modos, seleccionable en la pestaña Datos del panel de configuración.

Endpoint propio

El widget realiza su propia petición independiente al renderizarse. Configurar:

Campo	Descripción
Endpoint URL	Endpoint de API llamado por este widget
Método	GET o POST
dataPath	Ruta con puntos para extraer datos de la respuesta (p.ej. response.data.items)
Intervalo de refresco	Intervalo de sondeo automático en milisegundos (0 = desactivado)

Asistentes para rellenar los datos

No hace falta escribir a mano las direcciones ni los nombres de los campos:

• Usar datos del DataStore (botón sobre Endpoint URL, y también en cada fuente compartida): eliges el grupo del DataStore y qué quieres mostrar —Registros, Contar por categoría, Sumar por categoría, Totales o Evolución diaria— y Floogos construye la URL y la ruta de datos correctas. Antes de aplicarlo muestra la URL resultante y los campos que devolverá.
• Lupa de campos: junto a los campos del widget (eje X y series de barras y líneas, etiqueta y valor de tarta y donut, valores de KPI y columnas de tabla) hay una lupa que lista los campos reales de los datos del widget, vengan de un webhook, un endpoint externo o el DataStore, con su tipo y un ejemplo. Escribir a mano sigue siendo posible.

Fuente de datos compartida (Binding)

Un widget puede vincularse a una fuente de datos compartida a nivel de dashboard en lugar de hacer su propia petición. Este es el enfoque recomendado cuando múltiples widgets muestran datos de la misma llamada a la API.

Campo	Descripción
Fuente de datos	Selecciona de las fuentes compartidas del dashboard (definidas en Configuración del Dashboard)
Ruta	Ruta con puntos dentro de la respuesta de la fuente para extraer los datos de este widget

¿Por qué usar fuentes compartidas?

• N widgets → 1 petición (en lugar de N peticiones)
• Todos los widgets vinculados se actualizan simultáneamente
• Reduce la carga del servidor y mejora el tiempo de carga en dashboards con muchos KPIs del mismo endpoint

---

Fuentes de datos compartidas

Las fuentes de datos compartidas son conectores de API a nivel de dashboard que se obtienen una vez y se distribuyen a todos los widgets vinculados. Se gestionan en Configuración del Dashboard → Fuentes de Datos.

Configurar una fuente compartida

Campo	Descripción
Nombre	Etiqueta legible (mostrada en el selector de binding del widget)
Endpoint URL	Endpoint de API a llamar
Método	GET o POST
Intervalo de refresco	Intervalo de sondeo automático en milisegundos (0 = desactivado)

Cada fuente tiene un ID generado automáticamente que es utilizado internamente por los bindings de los widgets.

Cómo funciona

1. Cuando se carga el dashboard, todas las fuentes compartidas se obtienen en paralelo
2. Cada widget con binding.sourceId lee del resultado en memoria de esa fuente
3. Los filtros se aplican a las peticiones de fuentes compartidas igual que a los widgets con endpoint propio
4. Si una fuente compartida tiene refreshInterval, vuelve a obtener datos en ese ciclo y todos los widgets vinculados se actualizan automáticamente

Ejemplo

Un dashboard de ventas con 5 tarjetas KPI (ingresos totales, pedidos, ticket medio, nuevos clientes, tasa de conversión) puede vincularse todas a una única fuente /api/sales/summary. El servidor recibe 1 petición en lugar de 5 al cargar el dashboard o al cambiar un filtro.

---

Filtros globales

Agrega filtros a nivel de dashboard que afectan a uno o todos los widgets simultáneamente:

Tipo de filtro	Descripción
select	Desplegable de opción única
multiselect	Desplegable de múltiples opciones
date	Selector de fecha única
date_range	Rango de fechas de inicio y fin
text	Campo de búsqueda de texto libre

Los filtros pueden configurarse para aplicar a todos los widgets o a un subconjunto específico. Al seleccionar un valor, se envía su paramName como parámetro a cada widget afectado — incluyendo las peticiones de fuentes de datos compartidas.

Opciones dinámicas: un filtro select o multiselect puede cargar sus opciones desde un endpoint de API en tiempo de ejecución, con dependencia padre-hijo opcional (p.ej. país → ciudad).

En el dashboard publicado (enlace público /d/<token>) los filtros también funcionan: aparece una barra sobre el dashboard con un campo por filtro (select y multiselect como desplegable con la opción «Todos», date como selector de fecha, date_range como dos fechas «desde» y «hasta», text como búsqueda que se aplica al pulsar Intro) y un botón Limpiar filtros. Cada valor se envía como parámetro paramName solo a los widgets a los que aplica el filtro.

Un enlace público puede llevar los filtros ya puestos: https://tu-dominio/d/<token>?portal=mitienda.it&from=2026-10-01&to=2026-10-12. El nombre de cada parámetro es el paramName del filtro (en date_range se añade _from y _to). Sirve para guardar una vista concreta en un marcador o en un enlace de un correo.

---

Temas de diseño

Abre Configuración del Dashboard → Diseño para cambiar el tema visual del dashboard completo:

Tema	Lienzo	Tarjetas	Acento
Predeterminado	Fondo del sistema	Superficie del sistema	Naranja
Oscuro profesional	#0f1117	#1a1d2e	Morado
Claro corporativo	#f0f2f5	#ffffff	Azul
Verde naturaleza	#0d1f12	#132618	Verde
Océano azul	#071a2e	#0d2840	Cian
Atardecer	#1a0a00	#2a1500	Naranja intenso

También se puede definir un color de fondo personalizado con el selector de color, que sobrescribe el valor por defecto del tema.

---

Publicar un dashboard

Haz clic en el menú ⋮ → Publicar en cualquier tarjeta de dashboard (o desde el builder):

• Se genera una URL pública única: https://tu-dominio/d/<token>
• La URL se copia automáticamente al portapapeles
• La vista pública renderiza el dashboard sin requerir autenticación
• Las acciones de clic configuradas en los widgets (abrir URL, abrir dashboard, abrir formulario, mostrar data drawer) funcionan plenamente en la vista pública
• Las fuentes de datos compartidas se cargan en paralelo igual que en el editor
• Haz clic en Despublicar para ocultarlo (el token se conserva para republicar con la misma URL)
• Si añades ?embed=1 al enlace, se oculta la cabecera y el pie de la página: es lo que usan los portales de app para mostrar el dashboard dentro de su cuerpo

Opciones de seguridad

En Configuración del Dashboard → Seguridad:

Opción	Descripción
Dashboard público	Activa o desactiva el acceso a la URL pública
Requiere autenticación	Restringe el acceso público a usuarios que provean credenciales
Método de autenticación	password (lista de usuario/contraseña) o token (parámetro en la URL)

---

Organizar dashboards con carpetas y etiquetas

Los dashboards usan el mismo sistema de carpetas y etiquetas que los Workflows y Formularios.

Carpetas

• Crea carpetas en el panel lateral con + Nueva carpeta
• Arrastra tarjetas de dashboard sobre las carpetas para moverlas
• Selecciona una carpeta para filtrar la lista
• Asignación automática al crear: crear un nuevo dashboard mientras hay una carpeta seleccionada lo coloca en esa carpeta automáticamente

Etiquetas

• Asigna etiquetas al crear o editar un dashboard
• Filtra la lista haciendo clic en un chip de etiqueta en el panel lateral
• Varias etiquetas pueden estar activas a la vez (lógica AND)

Configuración global de organización

Configuración → Organización ofrece una vista centralizada de todas las carpetas y etiquetas en Workflows, Formularios y Dashboards con recuentos de elementos por módulo.

---

Proxy de datos de widgets

Todas las solicitudes de datos de los widgets se envían a través del backend de Floogos (POST /api/dashboards/widget-data). Esto significa:

• Se evitan las restricciones CORS del navegador
• Tus credenciales o tokens de API nunca quedan expuestos al navegador público
• Los dashboards públicos pueden mostrar datos en vivo de forma segura
• Las peticiones de fuentes de datos compartidas siguen el mismo camino de proxy

---

Base de datos de dashboards

Tabla	Columnas clave
dashboards	id, client_id, name, description, dashboard_json, is_published, public_token, folder_id, tags, created_at, updated_at

La columna dashboard_json almacena el layout completo como documento JSON, incluyendo:

• widgets[] — definiciones de widgets con posición, configuración, ajustes de fuente de datos y clickAction
• filters[] — definiciones de filtros globales
• dataSources[] — definiciones de fuentes de datos compartidas
• theme, canvasBg — ajustes visuales
• is_public, requires_auth, auth_config — ajustes de seguridad

Cada entrada de widgets[] puede incluir:

• clickAction — acción al hacer clic para KPIs y gráficos (type, target, url, dashboardId, formToken, endpoint, params, drawerTitle, drawerWidth)
• tableConfig.rowClickAction — acción al hacer clic en fila para tablas
• tableConfig.rowIdField — campo que identifica cada fila de forma única
• binding — vinculación a fuente de datos compartida (sourceId, path)

Ver también

• Bloquear un recurso con clave