Dashboards

What are Dashboards

Dashboards are configurable visual panels that display real-time or on-demand data from your workflows, APIs, and databases. Each dashboard is composed of widgets arranged in a responsive 12-column grid.

Dashboards can be kept private (visible only to your team) or published publicly via a shareable URL with no authentication required.

---

Getting Started

From the Dashboards section in the left menu:

1. Click New Dashboard
2. Choose a name, optional description, and a starting template
3. The Dashboard Builder opens — add widgets, configure data sources, and customize the layout
4. Click Save at any time

Starting Templates

Template	Description
Blank	Start from scratch with an empty canvas
Sales Overview	4 KPI cards + bar chart + pie chart + orders table
Operations Monitor	Execution metrics + real-time trend line
Customer Analytics	Customer segmentation donut + top-customers table

---

Dashboard Builder

The builder is a drag-and-drop visual editor for composing widget layouts.

Layout

• 12-column grid: each widget occupies a configurable number of columns (1–12) and rows
• Drag widget handles to reposition, drag edges to resize
• The canvas background color and overall theme can be customized

Adding Widgets

Click + Add Widget and choose a type from the panel:

Widget	Internal type	Description
KPI	kpi	Single metric card with optional delta indicator and sparkline
Bar Chart	bar	Vertical or horizontal bar chart with multiple series
Line Chart	line	Time-series or trend line chart with multiple series
Pie Chart	pie	Proportional slice chart
Donut Chart	donut	Pie variant with a configurable centered label
Table	table	Paginated, sortable data table with per-row click actions
Text	text	Rich static text with typographic variants
Image	image	Embed an image by URL, or pick one from the Resources library, with container sizing
Link Menu	link	Grid of navigation links or action buttons. Variants: card, button, text, list
Navigation Menu	menu	Navigation bar with vertical or horizontal orientation. Variants: sidebar, buttons, pills
Section	section	Grouping container with 1–4 sub-columns and optional heading

Builder Interface

The Dashboard Builder provides a three-panel layout:

• Left panel (Widget catalog): lists available widget types grouped by category. Click the ‹ button to collapse it to icon-only mode, freeing horizontal space for the canvas. Hover over icons for tooltips.
• Center (Canvas): the drag-and-drop grid where widgets are placed and resized.
• Right panel (Configuration): drag the vertical splitter on its left edge to resize it (240–700 px). Combining the collapsed catalog with a narrower right panel maximizes canvas space.

Right Panel: Widget Config & Dashboard Settings

The right sidebar has two modes, toggled via tabs at the top of the panel:

• Widget — configures the selected widget (data source, type-specific fields, visual style)
• Dashboard — configures global settings (name, description, theme, shared data sources, security)

Both tabs are always accessible while a widget is selected. Selecting a different widget automatically switches the panel back to Widget mode.

Configuring a Widget

Select any widget to open its configuration panel on the right:

• Title: displayed at the top of the widget card
• Position & size: start column, column span, start row, row span
• Data source (see Data Source Modes below)
• Auto-refresh: set an interval (ms) for automatic data polling
• Type-specific config: fields depend on widget type (see tables below)

KPI Configuration

Field	Description
valueField	JSON field that contains the numeric value
unit	Suffix label (e.g. €, %, ms)
prefix	Prefix label
color	Accent color for the card
deltaField	Field for the change/delta indicator
icon	Material icon name for visual reference

Chart Configuration (Bar / Line / Pie / Donut)

Field	Description
xField	Field for the X axis (or label for pie/donut)
yFields	Array of series: { field, label, color }
horizontal	Rotate bar chart to horizontal
legend	Show/hide the chart legend
centerLabel	Text in the center hole (donut only)

Table Configuration

Field	Description
columns	Array of { field, label, width, align, format }
format options	text, number, currency, date, badge
badgeColors	Color map for badge values
pageSize	Rows per page
sortable	Enable column sorting

Link Menu Configuration (link)

Field	Description
items	Array of { label, url, icon, description }
variant	Appearance: card (cards), button (buttons), text (plain text), list (list)
columns	Number of grid columns (1–4)

Navigation Menu Configuration (menu)

Field	Description
items	Array of { label, url, icon }
orientation	vertical or horizontal
variant	Visual style: sidebar (side panel), buttons (buttons), pills (pill tabs)

---

Widget Click Actions

Every widget (KPI, charts, Table) can be configured with a click action triggered when the user interacts with it. Configure actions in the Action tab of the widget configuration panel.

Action Types

Type	Description
url	Open any URL (relative or absolute)
dashboard	Open another Floogos dashboard
form	Open a published Floogos form
data_drawer	Call an endpoint and display the returned data

Targets

Target	Description
drawer	Slide a panel in from the right (default)
new_tab	Open in a new browser tab
same_tab	Navigate in the current tab

Template Variables

URLs, endpoints, and parameters support {{field}} template syntax. At click time each token is replaced with the corresponding value from the widget’s active data, the clicked row’s fields (for tables), or the dashboard’s active filter values.

Examples:

• /api/orders/{{id}} — inserts the id field from the clicked row
• https://crm.example.com/customers/{{customer_id}} — builds a dynamic URL
• Params: { "region": "{{region_filter}}" } — passes an active filter value

Table Row Actions

For Table widgets, set the Row ID field (rowIdField) to uniquely identify each row. Enabling rowClickAction makes every row clickable and opens the configured action. A ↗ icon column is automatically added to the table to signal interactivity.

Drawer Configuration

When target is drawer:

Field	Description
Drawer title	Header text (supports {{field}} templates)
Drawer width	Width in pixels — between 240 and 700 (default 600)
After submit (form type only)	Show the submission result (default) or Return to the form: a notice with the result above the form and blank fields, to chain several submissions without closing the drawer

The drawer includes an open in new tab button when the action type supports it (url, dashboard, form).

If the action opens a form in the drawer, on submit the drawer shows the result (or returns to the form, per “After submit”) and only the widget whose row opened it reloads (for example, the appointments table after changing the status of one); the rest of the dashboard is left alone and closing the drawer no longer refreshes everything.

Builder vs. Public View

Click actions and drawers work identically in the Dashboard Builder and in the published public dashboard view — no additional authentication required.

---

Data Source Modes

Each widget can receive data in one of two modes, selectable in the Data tab of the widget configuration panel.

Own Endpoint

The widget makes its own independent request when it renders. Configure:

Field	Description
Endpoint URL	API endpoint called by this widget
Method	GET or POST
dataPath	Dot-notation path to extract data from the response (e.g. response.data.items)
Refresh interval	Auto-polling interval in milliseconds (0 = disabled)

Assistants to fill in the data

You do not need to type addresses or field names by hand:

• Use DataStore data (button above Endpoint URL, and also on each shared source): choose the DataStore group and what you want to show —Records, Count by category, Sum by category, Totals or Daily trend— and Floogos builds the right URL and data path. Before applying it, it shows the resulting URL and the fields it will return.
• Field magnifier: next to the widget’s fields (X axis and series of bar and line charts, label and value of pie and donut charts, KPI values and table columns) a magnifier lists the real fields in the widget’s data, whether it comes from a webhook, an external endpoint or the DataStore, with their type and an example. Typing by hand is still possible.

Shared Data Source (Binding)

A widget can bind to a dashboard-level shared data source instead of making its own request. This is the recommended approach when multiple widgets display data from the same API call.

Field	Description
Data source	Select from the dashboard’s shared sources (defined in Dashboard settings)
Path	Dot-notation path within the source’s response to extract this widget’s data

Why use shared sources?

• N widgets → 1 request (instead of N requests)
• All bound widgets refresh simultaneously
• Reduces server load and improves load time for dashboards with many KPIs from the same endpoint

---

Shared Data Sources

Shared data sources are dashboard-level API connectors fetched once and distributed to all bound widgets. They are managed in Dashboard Settings → Data Sources.

Configuring a Shared Source

Field	Description
Name	Human-readable label (shown in the widget binding selector)
Endpoint URL	API endpoint to call
Method	GET or POST
Refresh interval	Auto-polling interval in milliseconds (0 = disabled)

Each source has an auto-generated ID used internally by widget bindings.

How It Works

1. When the dashboard loads, all shared sources are fetched in parallel
2. Each widget with a binding.sourceId reads from the in-memory result of that source
3. Filters apply to shared source requests the same way they apply to own-endpoint widgets
4. If a shared source has a refreshInterval, it re-fetches on that cycle and all bound widgets update automatically

Example

A sales dashboard with 5 KPI cards (total revenue, orders, avg ticket, new customers, conversion rate) can all bind to a single /api/sales/summary source. The server receives 1 request instead of 5 when the dashboard loads or a filter changes.

---

Global Filters

Add dashboard-level filters that affect one or all widgets simultaneously:

Filter Type	Description
select	Single-option dropdown
multiselect	Multiple-option dropdown
date	Single date picker
date_range	Start and end date range
text	Free-text search input

Filters can be configured to apply to all widgets or to a specific subset. Selecting a filter value appends its paramName to every affected widget’s data-source request — including requests made by shared data sources.

Dynamic options: a select or multiselect filter can load its options from an API endpoint at runtime, with optional parent-child dependency (e.g. country → city).

On the published dashboard (public link /d/<token>) filters work too: a bar appears above the dashboard with one control per filter (select and multiselect as a dropdown with an “All” option, date as a date picker, date_range as two “from” and “to” dates, text as a search applied when you press Enter) and a Clear filters button. Each value is sent as the paramName parameter only to the widgets the filter applies to.

A public link can carry the filters already set: https://your-domain/d/<token>?portal=mitienda.it&from=2026-10-01&to=2026-10-12. Each parameter name is the filter’s paramName (for date_range, _from and _to are added). It is useful for saving a specific view as a bookmark or in a link inside an email.

---

Design Themes

Open Dashboard Settings → Design to change the visual theme of the entire dashboard:

Theme	Canvas	Cards	Accent
Default	System background	System surface	Orange
Dark Professional	#0f1117	#1a1d2e	Purple
Light Corporate	#f0f2f5	#ffffff	Blue
Green Nature	#0d1f12	#132618	Green
Ocean Blue	#071a2e	#0d2840	Cyan
Sunset	#1a0a00	#2a1500	Deep Orange

A custom canvas background color can be set with the color picker, overriding the theme’s default.

---

Publishing a Dashboard

Click the ⋮ menu → Publish on any dashboard card (or from inside the builder):

• A unique public URL is generated: https://your-domain/d/<token>
• The URL is automatically copied to the clipboard
• The public view renders the dashboard without requiring authentication
• Click actions configured on widgets (open URL, open dashboard, open form, show data drawer) are fully functional in the public view
• Shared data sources are loaded in parallel just as in the editor
• Click Unpublish to hide it from public access (the token is preserved for future republishing)
• If you add ?embed=1 to the link, the page header and footer are hidden: this is what app portals use to show the dashboard inside their body

Security Options

In Dashboard Settings → Security:

Option	Description
Public dashboard	Toggle whether the public URL is accessible
Require authentication	Restrict public access to users who provide credentials
Authentication method	password (username/password list) or token (URL query param)

---

Organizing Dashboards with Folders and Tags

Dashboards use the same folder and tag system as Workflows and Forms.

Folders

• Create folders in the left sidebar using + New Folder
• Drag dashboard cards onto folders to move them
• Select a folder to filter the list by that folder
• Auto-assign on create: creating a new dashboard while a folder is selected places it in that folder automatically

Tags

• Assign tags when creating or editing a dashboard
• Filter the list by clicking a tag chip in the sidebar
• Multiple tags can be active simultaneously (AND logic)

Global Organization Settings

Settings → Organization provides a centralized view of all folders and tags across Workflows, Forms, and Dashboards with per-module item counts.

---

Data Source Proxy

All widget data requests are proxied through the Floogos backend (POST /api/dashboards/widget-data). This means:

• Browser CORS restrictions are bypassed
• Your API credentials or tokens are never exposed to the public browser
• Public dashboards can still display live data securely
• Shared data source requests follow the same proxy path

---

Dashboard Database

Table	Key Columns
dashboards	id, client_id, name, description, dashboard_json, is_published, public_token, folder_id, tags, created_at, updated_at

The dashboard_json column stores the complete layout as a JSON document, including:

• widgets[] — widget definitions with position, config, data source settings, and clickAction
• filters[] — global filter definitions
• dataSources[] — shared data source definitions
• theme, canvasBg — visual settings
• is_public, requires_auth, auth_config — security settings

Each entry in widgets[] may include:

• clickAction — click action for KPIs and charts (type, target, url, dashboardId, formToken, endpoint, params, drawerTitle, drawerWidth)
• tableConfig.rowClickAction — row click action for table widgets
• tableConfig.rowIdField — field used to uniquely identify each row
• binding — shared data source binding (sourceId, path)

See also

• Lock a resource with a key