Dashboard

Dashboard - documentazione operativa e tecnica

designer-workflowstable

Overview

Dashboard

Una dashboard WUIC è una pagina composta da widget (grafici, liste, KPI, tabelle) che costruisci visualmente nel designer. I widget leggono i dati dalle route dei datasource; una volta salvata, la dashboard è disponibile come pagina dell'applicazione.

Concetti

  • Una dashboard è un layout di widget salvato e associato a una route.
  • Ogni widget legge i dati da un datasource (una route dei dati).
  • Costruzione e modifica avvengono interamente nel designer (drag & drop + pannello proprietà): non c'è bisogno di scrivere a mano alcun layout.

Creare una dashboard

1. Apri il designer.

2. Aggiungi un datasource e scegli la route dei dati da mostrare (es. crm_accounts).

3. Aggiungi i widget (grafico, lista, KPI) e collegali al datasource.

4. Disponi i widget nel layout (es. griglia) e regola le proprietà nel pannello.

5. Salva: la dashboard viene persistita e diventa visibile come pagina dell'applicazione.

Widget disponibili

  • Grafico — serie calcolate dai dati del datasource. Vedi Chart list.
  • Lista / tabella — elenco di record. Vedi List grid.
  • KPI tile — un valore sintetico (totale, conteggio, importo) con badge colorato.

I widget non contengono dati propri: si agganciano a un datasource tramite un datarepeater.

Personalizzare l'aspetto

Nel pannello proprietà del designer imposti colori, sfondo e layout di ogni widget. Per gli elementi testuali, usa inherit come colore e transparent come sfondo: così ereditano automaticamente il tema corrente dell'applicazione.

Stili CSS personalizzati

Oltre al pannello proprietà, dal designer puoi associare alla dashboard uno o più fogli CSS dedicati, senza toccare il CSS globale dell'applicazione. Si gestiscono dall'editor CSS del designer (azioni del designer):

1. Salva prima la dashboard: il folder dei file CSS si basa sulla route della board (dash_route).

2. Apri l'editor CSS.

3. Crea un file (es. dashboard-custom.css) o selezionane uno esistente dall'elenco. I file vengono salvati in assets/<dash_route>/.

4. Scrivi le regole CSS: si applicano solo a questa dashboard a runtime.

Puoi togliere un foglio con Rimuovi file selezionato. Per i problemi visivi di una singola dashboard, preferisci sempre il CSS dedicato della board rispetto a modifiche al CSS globale.

Visualizzare e modificare

  • A runtime la dashboard è una normale pagina dell'app, raggiungibile dalla sua route.
  • Per modificarla, riaprila nel designer: layout e collegamenti vengono ricaricati esattamente come li hai salvati.

Vedi anche