Editor visuale delle Viste Utente

L’editor visuale permette di comporre una vista trascinando widget su un canvas. Le modifiche vengono salvate nella bozza e lo stato di salvataggio è mostrato nella barra superiore.

Barra degli strumenti

Le azioni principali sono:

• Annulla e Ripristina;
• Pagina, per aggiungere una nuova pagina;
• Dati, per gestire le sorgenti;
• Widget vista, per trovare e controllare i widget già inseriti;
• Preview;
• selezione e confronto delle Versioni;
• Pubblica.

Prima di chiudere l’editor, attendere che lo stato confermi il salvataggio.

Pagine

Una vista può contenere più pagine. Le schede sopra il canvas permettono di:

• selezionare la pagina corrente;
• aggiungere una pagina;
• rinominarla;
• riordinarla;
• eliminarla quando non è più necessaria.

Il widget Navigatore pagine rende disponibile la stessa navigazione nella vista pubblicata.

Canvas e griglia

Il canvas usa una griglia a 48 colonne, per rendere più preciso il posizionamento. Le viste create con la precedente griglia a 24 colonne vengono aggiornate automaticamente senza cambiare l'ingombro visuale dei widget. Trascinare un widget dalla palette e rilasciarlo nella posizione desiderata.

Ogni widget può essere:

• spostato;
• ridimensionato;
• duplicato;
• eliminato;
• configurato dal pannello Proprietà.

I comandi di zoom permettono di ridurre o ingrandire il canvas, ripristinare il 100% oppure usare Adatta per mostrare l’intera area disponibile.

Per ogni pagina è possibile configurare larghezza, altezza, adattamento automatico al viewport, sfondo, visibilità della griglia e politica di aggiornamento dei dati.

La voce Aggiornamento dati offre tre modalità:

• Solo al caricamento iniziale della vista, predefinita: all'apertura vengono caricate tutte le pagine e i dati vengono poi riutilizzati durante la navigazione;
• Anche a ogni apertura della pagina: tornando sulla pagina, i widget eseguono nuovamente le query;
• Automatico mentre la pagina è visualizzata: la pagina attiva viene aggiornata all'intervallo configurato, che non può essere inferiore a 30 secondi.

Filtri, drill, comandi di aggiornamento e aggiornamenti richiesti dalle azioni Workflow continuano a ricaricare i dati interessati anche nella modalità predefinita.

Palette dei widget

La palette è divisa per famiglie.

Famiglia	Esempi
Dati	Grafici a barre, linee, area, torta e donut; KPI; gauge; tabella; dettaglio record; mappe.
Contenuto	Testo, titolo di sezione, immagine, HTML sicuro e, se abilitato, widget custom.
Layout	Separatore, pannello, pannello collassabile, sidebar, schede e drawer.
Navigazione	Link Sybot e navigatore pagine.
Controlli	Aggiornamento, filtri, filtri attivi, reset e visibilità widget.
Workflow	Avvio, azioni su record, azioni multiple, stato, log e console Workflow.
Diagnostica	Stato della vista, delle sorgenti e delle operazioni disponibili.

Il campo Cerca widget filtra la palette per nome.

Cataloghi riusabili

I pulsanti Widget custom e Immagini, sopra la ricerca, aprono i cataloghi condivisi. È possibile passare dalla vista ad anteprima all'elenco dettagliato, cercare gli elementi e selezionarne più di uno per import o export. Il pannello a destra mostra proprietario, utenti autorizzati e Viste in cui l'elemento è già usato.

• un Viewer può usare l'elemento in una Vista che può modificare;
• un Editor può anche sovrascrivere l'elemento del catalogo con una nuova revisione;
• l'Owner gestisce condivisioni ed eliminazione.

L'eliminazione riepiloga utenti e Viste interessati, ma non rimuove le copie già inserite: ogni Vista resta autonoma. Per lo stesso motivo, modificare una copia locale non aggiorna silenziosamente il catalogo. L'owner gestisce gli accessi cercando il singolo utente per nome, username o email e assegnandogli il grant Viewer o Editor; il pannello non carica l'intera anagrafica utenti.

Nel relativo editor, Promuovi nel catalogo rende riusabile un Widget custom. Le immagini locali possono essere promosse dal Catalogo immagini della Vista; scegliendo un'immagine condivisa viene creata una copia locale. Nel catalogo immagini si possono selezionare o trascinare più file insieme. La preview di un Widget custom nel catalogo è statica quando il componente richiede JavaScript o dati: l'esecuzione completa avviene dopo l'inserimento nella Vista.

Proprietà della vista

La sezione Vista controlla:

• descrizione;
• tema chiaro, scuro o di sistema;
• carattere;
• densità;
• spaziatura;
• disponibilità dei filtri avanzati nel runtime.

Le proprietà del widget selezionato dipendono dal suo tipo e includono contenuto, sorgente dati, formati, stile, comportamento e interazioni.

Per Filtro categorie è possibile scegliere separatamente la modalità di immissione e la selezione singola o multipla. Per i widget che avviano Workflow, la sezione Interazioni mostra i parametri non file del Workflow selezionato: ogni parametro può usare il default del Workflow, un default salvato nel widget oppure una formula fx. L'opzione dedicata stabilisce se il pannello dei parametri deve comparire prima dell'avvio e nella Preview.

Per i grafici a linee e ad area, Dati e visualizzazione include anche il gruppo dedicato all'aspetto della linea. È possibile scegliere spessore, dimensione e forma dell'indicatore dei punti — nessuno, pallino, rombo, triangolo, linea verticale o X — e usare una linea Spezzata oppure una Curva smussata. Le impostazioni si applicano a tutte le serie del widget, mentre il colore resta configurabile per singola serie.

Contenitori

Pannelli, sidebar, schede e drawer possono contenere altri widget.

• Pannello: raggruppa elementi con una griglia interna.
• Pannello collassabile: può essere aperto o chiuso dall’utente e usa tutta l’altezza assegnata al widget, lasciando ai contenuti lo spazio disponibile sotto l’intestazione.
• Sidebar: si ancora a sinistra o a destra e può partire chiusa.
• Schede: suddividono i widget in viste locali allo stesso contenitore.
• Drawer: mostra informazioni in un pannello sovrapposto, spesso in risposta a una selezione.

Il pannello Widget vista aiuta a individuare i widget annidati e a controllarne la visibilità in progettazione e nel runtime senza eliminarli. Ogni voce usa la stessa icona con cui il tipo di widget è identificato nella palette; rientri e linee mostrano invece il rapporto tra contenitori e figli.

Stile e formattazione

Ogni widget può ereditare lo stile della vista oppure usare impostazioni specifiche per:

• colori e tipografia;
• sfondo e bordo;
• spaziatura e allineamento;
• ombra e raggio degli angoli;
• intestazione e icona;
• formato di numeri, date e valuta; locale e valuta vengono scelti da elenchi di valori supportati e usano rispettivamente it-IT ed EUR come valori predefiniti.

La formattazione condizionale applica uno stile quando una regola sui dati risulta vera. Le condizioni vengono valutate nell’ordine mostrato e prevale la prima soddisfatta.

La visibilità dinamica mostra un widget soltanto quando la formula configurata restituisce vero. La regola applicata a un contenitore coinvolge anche i suoi figli.

HTML e widget custom

Il widget HTML sicuro accetta contenuto HTML controllato; gli elementi non consentiti vengono rimossi.

Il Widget custom, quando abilitato dall’amministratore, usa un editor separato per HTML, CSS, JavaScript, fallback PDF e Preview isolata. Il codice viene eseguito in un’area isolata e può interagire con la vista soltanto attraverso le funzioni messe a disposizione dall’editor.

Quando il widget usa una Sorgente dati, il contesto iniziale passato al codice contiene già il primo result set sia in Preview sia nella Vista pubblicata. Le variazioni successive vengono comunicate come aggiornamenti del contesto.

Non inserire credenziali o informazioni riservate nel codice: il contenuto pubblicato può essere consultato dal browser.

Import ed export dei cataloghi

Entrambi i cataloghi consentono la selezione multipla e producono package JSON importabili. In presenza di un elemento già esistente, l'import propone riuso, sovrascrittura quando autorizzata, duplicazione con nuovo nome oppure esclusione.

Anche l'export di una Vista propone widget custom e immagini come dipendenze opzionali. Durante l'import della Vista, Sybot mostra le dipendenze incluse e consente di applicare la politica desiderata a ciascuna. Quando viene creato un duplicato, i riferimenti sono aggiornati automaticamente. Le copie già incorporate nella Vista restano disponibili anche se la corrispondente dipendenza di catalogo viene ignorata.

Buone pratiche

• progettare prima la gerarchia delle informazioni;
• limitare il numero di grafici simultanei;
• usare titoli e messaggi senza dati comprensibili;
• verificare sempre tema chiaro e scuro;
• provare layout, filtri e contenitori in Preview;
• usare il widget Diagnostica in un’area dedicata quando la vista combina molte sorgenti o Workflow.