La maggior parte delle applicazioni cloud moderne, sia di carattere gestionale che di trasformazione digitale, devono presentare e consentire di modificare i dati che l’applicazione sta gestendo.
Per questo scopo, è largamente accettato il paradigma UX Griglia / Dettaglio, in cui i dati disponibili vengono mostrati tramite un elemento visuale di tipo griglia con funzionalità di ricerca, selezione e raggruppamento. Agendo opportunamente su una riga della griglia, viene visualizzato un dettaglio del dato selezionato e a questo punto è possibile anche modificarlo.
Tale paradigma vale anche in caso di applicazioni mobile, facendo le opportune semplificazioni dovute al tipo di interazione (tocco invece che mouse) e alla più piccola dimensione dello schermo.
Per poter soddisfare queste necessità, Instant Developer Cloud mette a disposizione un nuovo insieme di widget denominato IdfWidget che permettono di costruire con il massimo della velocità front-end dedicati alla gestione dei dati.
Tali widget, inoltre, si integrano senza soluzione di continuità con tutti gli altri elementi visuali disponibili nella piattaforma, permettendo così di poter continuare a progettare le interfacce con il massimo della flessibilità e contemporaneamente poter assolvere ai compiti di presentazione e gestione dati con il massimo della semplicità e velocità.
La prima parte del nome IdfWidget deriva dal fatto che i componenti resi disponibili sono i medesimi presenti nella versione Foundation di Instant Developer (IDF). Chi ha esperienza con questo tipo di componenti, sarà ancora più facilitato nell’utilizzo dei widget, anche se è consigliabile comunque leggere questo manuale per poter cogliere tutte le novità di funzionamento disponibili solo nella versione Cloud.
Widget disponibili #
- IdfPanel: rappresenta l’intero pannello, comprensivo di lista (griglia) e dettaglio.
- IdfField: rappresenta una colonna della griglia e un campo del dettaglio.
- IdfGroup: rappresenta un gruppo di campi che vengono presentati in maniera coerente.
- IdfPage: rappresenta un pagina di campi quando il pannello è mostrato in modalità multipagina. Viene usato quando il pannello deve gestire decine di campi che vengono visualizzati in modo alternato.
Esempio di pannello per la gestione di una tabella di dati relativi ai prodotti
Funzionalità dei pannelli #
L’elenco delle funzionalità e dei comportamenti gestiti in automatico dai pannelli è veramente vasto. Qui verranno elencati solo quelli principali.
- Query By Example: i pannelli permettono all’utente di inserire in modo semplice dei criteri di ricerca per selezionare i dati di interesse.
- Live Scrolling: i pannelli sono predisposti per visualizzare in modalità live scrolling un qualunque numero di record, anche nell’ordine delle centinaia di migliaia. Vengono gestite sia righe ad altezza fissa che righe ad altezza variabile
- Legami fra pannelli e altri oggetti grafici: tramite gli opportuni eventi a livello di datamap è molto semplice coordinare il funzionamento di più pannelli in modalità master detail o in altre funzionalità.
- Griglia e dettaglio: un pannello può avere sia il layout di presentazione in lista (griglia di dati) che quello in dettaglio. L’insieme dei campi visualizzati in dettaglio può essere diverso da quello della lista.
- Ordinamenti: mentre viene visualizzato il layout in lista, è possibile ordinare i dati per una o più colonne della griglia del pannello.
- Raggruppamenti: attivando la visualizzazione per gruppi, le righe possono essere visualizzate in modo raggruppato anche a più livelli. È possibile inserire funzioni di totalizzazione per ogni singolo campo della lista.
- Esportazione in formato csv: cliccando un solo pulsante verrà scaricato il file csv corrispondente al contenuto della griglia e lo si potrà aprire in un foglio di calcolo in locale.
- Modifiche ai dati: è possibile modificare i dati sia nel layout in dettaglio che direttamente sulla lista. Il pannello gestisce anche lo stato locked per evitare modifiche accidentali ai dati. È presente un completo sistema di validazione e reporting degli errori a livello di singolo campo o di intero pannello. I dati modificati vengono salvati tramite i documenti in maniera automatizzata e personalizzabile.
- Maschere di editing: è prevista una funzione di editing controllato e formattazione al volo diversa per campi interi, decimali, valori monetari, date, ore, stringhe. Il dato viene controllato e formattato durante la digitazione e non solo all’uscita dal campo.
- Uso della tastiera: sia in lista che in dettaglio è possibile navigare fra i campi semplicemente usando la tastiera. Tutti i comandi del pannello sono attivabili con i tasti funzione.
- Lookup e decodifiche: sono presenti diversi meccanismi di lookup e decodifica che consentono di visualizzare dati correlati a quelli presenti nel pannello e selezionarne facilmente altri attraverso meccanismi di tipo intellisense.
- Colonne unbound: alcune colonne della lista possono essere scollegate dai campi delle tabelle del database per inserire nella griglia icone, pulsanti, valori o altre informazioni che non verranno salvate all’interno del database.
- Formattazione per cella: tramite un opportuno evento di pannello è possibile modificare le proprietà di singole celle del pannello piuttosto che di un’intera colonna della griglia. In questo modo diventa facile esprimere le regole di formattazione condizionale dei dati.
- Selezione multipla: i pannelli permettono di effettuare la selezione multipla delle righe. Alcuni comandi, come l’esportazione, la cancellazione e la duplicazione agiscono sulle righe selezionate invece che solo sulla riga attiva del pannello.
- Tipi di controlli: È possibile utilizzare, oltre ad edit box e combobox, anche altri tipi di controlli come ad esempio i check-box, i radio button, immagini, e più in generale, qualunque elemento visuale presente in Instant Developer Cloud.
- Campi BLOB: I pannelli gestiscono in maniera automatica l’upload ed il download del contenuto di un campo BLOB presente sul database. È possibile interagire con il pannello tramite eventi per consentire l’upload dei file anche tramite il file system del server, senza memorizzazione nel database.
- Fixed column: può essere interessante fissare alcune colonne della lista e fare scorrere solo le altre, come avviene anche nei migliori fogli di calcolo.
- Campi raggruppati e paginati: se è necessario mostrare molti campi è possibile raggrupparli e suddividerli in pagine. I gruppi hanno una funzione di collassamento automatica ed animata che permette il funzionamento a bande del pannello.
- Righe raggruppate: I pannelli permettono di effettuare una visualizzazione raggruppata dei dati nel formato lista indicando per quali campi effettuare il raggruppamento.
- Personalizzazione grafica: ogni elemento del pannello possiede il suo stile e può essere associato a classi CSS. Inoltre è possibile, sempre tramite foglio CSS, modificare l’intero set di classi di base del pannello per personalizzare l’aspetto grafico in tutta l’applicazione.
- Web e Mobile: essendo basato su framework IonicUI di Instant Developer Cloud, è altamente responsive ed è quindi già predisposto sia per applicazioni web che per quelle mobile.