Overview
Designer
Editor visuale per dashboard metadata-driven su route #/cities/dashboard.
Scope
- Composizione board via drag-and-drop di nodi e blocchi UI.
- Layout e styling pilotati da
boardcontente metadata tabella/colonna. - Editing property panel senza hardcode nei componenti runtime.
Palette Designer
La palette e' divisa in tre gruppi. I nomi qui sotto sono quelli che leggi nella palette,
maiuscoli come li scrive il designer.
HTML — i mattoni di markup:
| Tool | A cosa serve |
|---|---|
TABLE | griglia di celle. TR e TD esistono come tool ma non si trascinano: li crea la tabella |
DIV | contenitore libero, il blocco strutturale piu' usato |
SPAN, LABEL, Hx | testo databound; Hx sceglie il livello da h1 a h6 |
ANCHOR, IMG, IMAGE, IFRAME | link, immagini, contenuto esterno |
UL | elenco |
BUTTON | pulsante con callback |
INPUT, TEXTAREA, CHECKBOX, SELECT, MULTISELECT, DATE | campi di input |
KPI | valore singolo in evidenza |
SEPARATOR, HR | separatori |
DATA — i nodi collegati al backend:
| Tool | A cosa serve |
|---|---|
DATASOURCE | sorgente dati metadata (route, filtri, sort, paging) |
DATAREPEATER | visualizzazione lista/card collegata a un datasource |
FILTERBAR | barra filtri sopra il repeater |
PAGER | paginatore |
CONTAINER — i layout:
| Tool | A cosa serve |
|---|---|
TABVIEW + TABPANEL | schede |
SPLITTER + SPLITTER-AREA | pannelli ridimensionabili |
ACCORDION + ACCORDION-AREA | sezioni a fisarmonica |
Due nomi che si cercano invano: non esiste un tool "Dynamic Template" — il template dinamico
e' cio' che il DATAREPEATER renderizza, si configura dalle sue proprieta' e non si trascina; e
"Container" / "Layout" sono il nome del gruppo, non voci selezionabili.
A questi si aggiungono i tool custom registrati dal progetto host
(MetadataProviderService.customDesignerTools), che compaiono in coda con il gruppo che
dichiarano.
Feature principali
- Drag-and-drop nodi sulla canvas con persistenza nel
boardcontent. - Property panel contestuale con input coerenti ai componenti selezionati.
- Binding tra nodi (
datasource -> repeater/template) con validazione minima. - Preview runtime integrata e riallineamento layout.
- Gestione pending changes con guard prima dell'uscita.
Context menu sugli elementi
Right-click su un elemento del canvas, una voce del breadcrumb in basso o un nodo dell'albero gerarchia mostra un context menu con tre voci:
- Modifica proprietà (pi-cog) — seleziona l'elemento come "current tool" e ne mostra il property panel a destra; equivalente al click nell'albero. Utile per editare proprietà di elementi annidati senza dover cercare la voce nella gerarchia.
- Rinomina (solo breadcrumb in basso) — apre dialog per rinominare il
displayName. - Rimuovi — elimina l'elemento dalla board.
Flusso operativo consigliato
- Aprire route dashboard target.
- Inserire/collegare nodi dalla palette.
- Configurare
inputsessenziali (es.route,action,datasource). - Salvare e validare il risultato in runtime.
Note operative
- Per fix specifici dashboard, privilegiare patch del
boardcontentinvece di modifiche globali. - Evitare proprietà duplicate tra
inputse stile inline non coerente. - Verificare sempre che i datasource abbiano
inputs.routevalorizzata.
Screenshot
