Dashboard

Dashboard - documentazione operativa e tecnica

designer-workflowstable

Overview

Dashboard

A WUIC dashboard is a page composed of widgets (charts, lists, KPIs, tables) that you build visually in the designer. Widgets read their data from datasource routes; once saved, the dashboard is available as an application page.

Concepts

  • A dashboard is a widget layout saved and bound to a route.
  • Each widget reads its data from a datasource (a data route).
  • Building and editing happen entirely in the designer (drag & drop + property panel): there is no need to hand-write any layout.

Creating a dashboard

1. Open the designer.

2. Add a datasource and pick the data route to show (e.g. crm_accounts).

3. Add the widgets (chart, list, KPI) and connect them to the datasource.

4. Arrange the widgets in the layout (e.g. a grid) and adjust the properties in the panel.

5. Save: the dashboard is persisted and becomes visible as an application page.

Available widgets

  • Chart — series computed from the datasource data. See Chart list.
  • List / table — a list of records. See List grid.
  • KPI tile — a summary value (total, count, amount) with a colored badge.

Widgets do not hold their own data: they bind to a datasource through a datarepeater.

Customizing the look

In the designer's property panel you set colors, background and the layout of each widget. For text elements, use inherit as the color and transparent as the background: they then automatically inherit the application's current theme.

Custom CSS styles

Beyond the property panel, from the designer you can attach one or more dedicated CSS stylesheets to the dashboard, without touching the application's global CSS. They are managed from the designer's CSS editor (designer actions):

1. Save the dashboard first: the CSS files folder is based on the board route (dash_route).

2. Open the CSS editor.

3. Create a file (e.g. dashboard-custom.css) or pick an existing one from the list. Files are saved under assets/<dash_route>/.

4. Write the CSS rules: they apply only to this dashboard at runtime.

You can remove a stylesheet with Remove selected file. For visual issues of a single dashboard, always prefer the board's dedicated CSS over changes to the global CSS.

Viewing and editing

  • At runtime the dashboard is a regular app page, reachable from its route.
  • To edit it, reopen it in the designer: layout and bindings are reloaded exactly as you saved them.

See also