I widget

Tutto ciò che si vede in una schermata è un widget. La palette Widget, a sinistra del canvas, porta 32 widget di serie — da questa pagina esci sapendo a che cosa serve ognuno, e con i principali spiegati in dettaglio. Se l'app ha widget programmati da te, appaiono nella stessa palette, nella sezione Custom.

#Il catalogo, per categoria

#Campi di modulo

Tutti si collegano a un campo di un datastore di record (sezione Collegamento ai dati) ed entrano nella validazione — vedi i moduli.

Widget	A che cosa serve
Casella di testo	Testo di una riga. Ha Maschera, modalità Password (nascondi il testo) e placeholder.
Area di testo	Testo lungo, multiriga — note, descrizioni.
Numero	Valori numerici.
Sì/No	Un interruttore booleano.
Dropdown	Scelta di opzioni: Elenco fisso, Enum del modello o Datastore; con Ricercabile, Selezione multipla e modalità Albero (gerarchico).
Data	Data, Data e ora o solo Ora (il campo Tipo decide).
Colore	Scelta di un colore.
File	Upload per trascinamento e/o pulsante, con anteprima, limite di dimensione e scelta dell'archiviazione.

#Azioni e navigazione

Widget	A che cosa serve
Pulsante	L'azione classica. Mostra: Icona + Testo, Solo icona o Solo testo; l'Azione al clic naviga, apre un modale o esegue codice.
Pulsante con menu	Un pulsante che apre altre opzioni. Aspetto: Diviso (il corpo agisce, la freccia apre il menu), Menu o Hamburger. Ogni opzione può nascondersi o disattivarsi in base a condizioni.
Link	Testo cliccabile — Destinazione: Schermata dell'app (con parametri) o URL esterno (con Apri in una nuova scheda).
Breadcrumb	Il percorso "sei qui", con livelli cliccabili e l'ultimo livello fisso o collegato a un campo.
Esporta	Un pulsante che scarica i dati di un datastore in foglio di calcolo (.xlsx) — campi scelti, Riga di intestazione opzionale e Nome del file con {date}.

#Struttura

Widget	A che cosa serve
Pannello	Un contenitore con cornice e titolo — sistema widget che cominciano a muoversi insieme.
Schede	Un contenitore con schede; ogni widget figlio appartiene a una scheda. Stile delle schede: Riquadro, Pill o Sottolineato.
Barra fissa	Una barra a tutta larghezza, fissata In alto o al Piè di pagina della schermata — per barre di azioni sempre visibili.
Linea	Una linea separatrice, Orizzontale o Verticale — il colore e il tratto vengono dall'Aspetto.

#Contenuto e media

Widget	A che cosa serve
Etichetta	Testo semplice — titoli, didascalie, valori sciolti. Accetta i Valori della frase ({n} nel testo).
Markdown	Testo ricco scritto in Markdown — fisso o proveniente da un campo.
Immagine	Un'immagine per URL fisso, Asset dell'app o Campo (dinamico); Adattamento: Contieni, Riempi o Estendi.
Pagina esterna	Incorpora una pagina esterna (una mappa, un video, BI di terzi) o HTML scritto da te. Gira isolata: non vede la sessione né i dati dell'app.

#Dati

Widget	A che cosa serve
Tabella	La griglia dei record — colonne tipizzate, ordinamento, selezione e pulsanti di azione. Dettaglio più sotto.
Elenco	Record in elenco verticale, con campi in ruoli (Titolo, Sottotitolo, Corpo, Didascalia) e immagine opzionale.
Card	Lo stesso template dell'Elenco, ma in griglia di card con N Colonne.
Grafico	Serie disegnate — barre, linee, torte e altro. Dettaglio più sotto.
KPI	Una fascia di indicatori numerici con tendenze, obiettivo e sparkline. Dettaglio più sotto.

#Board e pianificazione

Widget	A che cosa serve
Kanban	Card trascinabili fra colonne di stato. Dettaglio più sotto.
Calendario	Eventi in viste Giorno/Settimana/Mese/Anno. Dettaglio più sotto.
Gantt	Barre di inizio→fine con avanzamento, gruppi e dipendenze. Dettaglio più sotto.

#Documenti e processi

Widget	A che cosa serve
Report	Mostra un report dell'app (PDF) dentro la schermata, con parametri collegati a ciò che sta nella schermata e Barra delle azioni per aggiornare e scaricare.
Stato del processo	Lo storico e il passaggio attuale dei workflow di un record, con pulsanti di decisione quando l'attività aperta è di chi sta guardando.
Le mie attività	La casella di posta delle attività di workflow dell'utente con sessione — apre la schermata dell'attività e si decide da lì.

#La Tabella

La Tabella è il widget più usato della piattaforma: si collega a un datastore di elenco e mostra i record in griglia, con paginazione, ordinamento e selezione.

#Colonne

Collegando il datastore, le colonne nascono una per campo. Poi si rifinisce: in Colonne, usa + colonna per aggiungerne, e clicca su una colonna nel canvas per modificarla — l'inspector passa a lei.

Ogni colonna ha Intestazione, Larghezza, Ordinabile dall'intestazione, Nascosta — e un Tipo:

Tipo	Che cosa fa
Testo	Il valore così com'è, con Maschera opzionale (# = carattere).
Numero	Formatta il valore: Numero (regionale) (con Cifre decimali, Separatore delle migliaia, Compatto — 1,2 M invece di 1 234 567 —, Prefisso e Suffisso) oppure Maschera (# = cifra).
Collegamento	La cella diventa cliccabile. Destinazione: Schermata dell'app (con parametri provenienti da Campo della riga, Parametro dell'URL o Valore fisso) oppure Script — codice tuo che gira al clic.
Immagine	Mostra l'immagine il cui indirizzo/contenuto è nel campo.
File	Un link di download per il file indicato nel campo.

#Azioni della tabella

Nella categoria Comportamento, la sezione delle azioni crea i pulsanti CRUD: Aggiorna, Aggiungi nuovo, Modifica record, Elimina record ed Elimina multipli. Ogni azione attivata crea un pulsante sciolto nel canvas, collegato alla tabella — posizioni e dai stile a quel pulsante come a qualsiasi altro.

• Aggiungi nuovo e Modifica record aprono una schermata o un modale a tua scelta (tipicamente il modulo del record), con i parametri compilati a partire dalla riga.
• Modifica record ed Elimina record restano attivi solo con una riga selezionata; Elimina multipli lavora sulla Selezione multipla (l'interruttore che aggiunge la colonna di checkbox).
• Le azioni che scrivono richiedono che il datastore abbia una chiave primaria — l' inspector avvisa: Il datastore ha bisogno di una chiave primaria.

#Moduli (input + record + validazione)

Non esiste un widget "modulo": un modulo è la somma di tre pezzi, ed è questa libertà che ti lascia disegnare la scheda come vuoi.

1. Crea un datastore di record nella schermata (vedi Datastore e dati) — per esempio, conta, caricato con la chiave che arriva dal parametro id del percorso.
2. Trascina i campi di modulo (Casella di testo, Dropdown, Data…) e, in ognuno, collega il Collegamento ai dati al campo giusto del datastore.
3. Metti un Pulsante "Salva" il cui evento salva il datastore — l'azione predefinita Salva datastore dell'editor di eventi scrive il codice per te (vedi Eventi e SDK).

La validazione vive in ogni campo, nella categoria Validazione:

• Obbligatorio — il campo deve arrivare compilato.
• Le regole standard: Min caratteri, Max caratteri, È email, È telefono, È numero, Valore min., Valore max., Pattern (regex) e Uguale al campo (conferma della password, per esempio).
• Convalida con script — per la logica tua: il codice riceve value (il valore attuale del campo) e restituisce true se valido, oppure il messaggio di errore. Una partita IVA, un IBAN, una regola di business.

Al salvataggio, la validazione gira tutta: prima gli obbligatori, poi le regole, poi lo script. Il record procede solo se passa tutto.

#Il Grafico

Il Grafico si collega a un datastore e disegna serie. In Tipo di grafico scegli: Barre, Linea, Area, Torta / Donut, Dispersione, Radar, Gauge (indicatore), Imbuto o Mappa di calore.

L'essenziale è la mappatura, nella categoria Dati:

• Campo di categoria (asse X / fette) — ciò che separa le barre/fette.
• Campi di valore — uno o più campi numerici; ognuno è una serie.
• Campo di serie (raggruppamento) — in alternativa ai vari valori: pivota sul primo campo di valore e crea una serie per ogni valore distinto (senza valori, conta i record).

E poi la rifinitura:

Opzione	Che cosa fa
Impilato, Orizzontale, Linee morbide, Valori sui punti	Variazioni del disegno, a seconda del tipo.
Legenda, Posizione della legenda, Tooltip	Il chrome del grafico. La legenda si trascina anche direttamente nel grafico per posizionarla.
Formato dei valori	Lo stesso formato delle colonne Numero della tabella, applicato ad assi, etichette e tooltip.
Scala dei valori	Lineare o Logaritmica — la logaritmica serve quando le serie hanno ordini di grandezza diversi.
Usa un secondo asse	Un asse a destra con scala propria — per mettere insieme un totale in euro e un conteggio nello stesso grafico.
Serie	Tipo per serie (combinazioni di barre con linee) e quali serie vanno sul 2° asse.
Opzioni avanzate	Un editor di codice con tutte le proprietà del motore di grafici, con autocomplete — applicate sopra la configurazione, per i casi che i campi non coprono.

#Il KPI

Il KPI è una fascia di indicatori — quattro numeri affiancati si fanno con un widget di quattro indicatori, non con quattro widget: l' allineamento e la spaziatura restano garantiti.

Ogni indicatore (in Indicatori ▸ Aggiungi indicatore) ha:

• Etichetta e icona, con Posizione della didascalia (Sopra il valore / Sotto il valore).
• Valore (campo) + Aggregazione (Somma, Media, Conteggio, Massimo, Minimo, Primo, Ultimo) sull'insieme dei dati — oppure un Valore manuale quando non ci sono dati collegati.
• Tendenze (Aggiungi tendenza) — confronti sotto il numero, con Campo di riferimento, formato Percentuale o Valore assoluto, e Meno è meglio (inverte i colori): in un debito che cresce, la freccia deve essere rossa.
• Obiettivo — Nessun obiettivo, Valore manuale o Campo del datasource, con Barra di avanzamento opzionale.
• Mostra sparkline — la mini-linea dello storico, con Campo della serie.
• Periodo (dal campo) — di quale chiusura parla il numero (una data ISO si mostra come MM/AAAA).

L'insieme di dati è condiviso dal widget, ma ogni indicatore può avere un Set di dati proprio.

#Il Kanban

Il Kanban mostra i record come card in colonne — la pipeline di opportunità di Gestione Clienti è un kanban per stato.

1. Collega il datastore e scegli il Campo di stato (colonna) — il campo che dice in quale colonna si trova ogni card.
2. Definisci l'Origine delle colonne: Statica (aggiungi ogni colonna con Etichetta, Valore e colore) oppure Enum (le colonne vengono dai valori di un enum del modello).
3. Componi il Template della card — i campi e i ruoli, come nell'Elenco.

Con Consenti di trascinare le card attivo, spostare una card salva subito il nuovo stato nel record. Campo di ordine (un campo numerico) rende l'ordinamento dentro la colonna persistente. Colonna senza categoria raccoglie i record il cui stato non corrisponde a nessuna colonna; Conteggio delle card mostra il totale nell'intestazione.

Le azioni: Clic su una card (modifica) e Crea card (pulsante nella colonna) — ognuna può navigare verso una schermata, aprire un modale (con i parametri della riga e della colonna) o emettere un evento per codice tuo.

#Il Calendario

Il Calendario mostra i record con data come eventi, nelle viste Giorno, Settimana, Mese e Anno.

• Campi: Campo data (inizio), Campo di fine (opzionale) (eventi multigiorno), Campo del titolo.
• Colore degli eventi: Unico o Per campo — con una mappa valore → colore (un enum di tipo, per esempio).
• Vista: Vista iniziale, Viste disponibili, 1° giorno della settimana (Lunedì/Domenica), Max eventi per giorno nella vista mese, ore di Inizio/Fine nelle viste giorno/settimana, Barra di navigazione e Pulsanti di cambio vista.
• Azioni: Clic su un evento (modifica) e Selezione di giorno/intervallo (crea) — l'inizio/fine proseguono verso la schermata di destinazione come parametri, pronti a precompilare il modulo di creazione.

Il calendario carica solo i record dell'intervallo visibile — cambiare mese va a prendere il mese nuovo, non la tabella intera.

#Il Gantt

Il Gantt disegna barre di inizio→fine su una linea temporale — pianificazione di progetti, campagne, onboarding di clienti.

• Campi: Campo di inizio, Campo di fine, Campo dell'etichetta, Campo di avanzamento (0–100) e Campo di gruppo (raggruppa le righe).
• Campo delle dipendenze — gli ID (chiave primaria) dei predecessori, in elenco JSON o separati da virgola; il Gantt disegna le frecce.
• Zoom iniziale (Giorno, Settimana, Mese), Linea di oggi e Ombreggia i fine settimana.
• Azioni: Clic su una barra (modifica) e Clic su area vuota (crea) — la data cliccata prosegue come parametro.

Il Gantt è in lettura: le barre non si trascinano — le date si cambiano nel modulo del record.

#Perché no…?

• Perché non appare la sezione Validazione nel mio widget? Solo i campi di modulo validano — un Pulsante o un'Etichetta non hanno un valore da validare.
• Perché il widget appare nella palette ma grigio nel canvas? È disattivato (interruttore Attivo nella categoria Layout) oppure una regola/evento l'ha disattivato.
• Perché non vedo dati nel canvas? Il canvas mostra campioni — i dati reali appaiono nell'anteprima e nell'app pubblicata. Verifica il collegamento nel capitolo Datastore e dati.