Sviluppo software

Framework Ver 4.0 Sviluppo Gestionali Web - Griglie dati

Lo strumento principe per consultare grandi quantità di dati sono le griglie o tabelle. Le nostre griglie sono paginate, hanno filtri di ricerca su tutte le colonne, permettono l'ordinamento a piacere, consentono il raggruppamento delle righe con subtotali e totali, sono collegabili in relazioni testata-righe, e molto altro.

Questo articolo fa parte di una serie di articoli che documentano le funzionalità che si possono implementare in progetti su misura grazie al nostro framework arrivato alla versione 4.0.

Di seguito vengono riportati dei micro-filmati che mostrano le principali funzionalità offerte dalle nostre griglie.

CLICCA SULLE IMMAGINI PER VEDERLE A SCHERMO INTERO.

Paginazione#

L'utente può scegliere quante righe mostrare in ogni pagina e spostarsi di pagina in pagina.

Inoltre quando si modificano i dati di una riga, non c'è il rischio di "perdere il segno" perché la paginazione resta dove si era arrivati.

Ricerca libera e filtri puntuali#

L'utente può scegliere di effettuare una ricerca libera su tutti i campi di una griglia o di agire con dei filtri puntuali sulle colonne di interesse.

A seconda del tipo di dato sarà possibile scegliere dei parametri di filtro specifico con anche la possibilità di scegliere da dei preset. Ad esempio nel caso di una data è possibile filtrare in base alla data "da-a" oppure scegliere direttamente il filtro "anno corrente", "mese corrente", ecc.

Ordinamento, raggruppamenti con subtotali e totali#

Ogni colonna è ordinabile in modo crescente o decrescente. Il tipo di ordinamento (es. numerico, alfabetico, ecc.) è insito nella tipologia di colonna.

Inoltre è possibile raggruppare le righe per uno dei campi di interesse e visualizzare i subtotali di gruppo e i totali della griglia. Nell'esempio si raggruppa per "soggetto" e vengono mostrati i subtotali e il totale della colonna "importo".

Visibilità colonne#

L'utente è libero di scegliere quali colonne, tra i campi disponibili, includere nella visualizzazione in griglia. Agendo sul bottone nascondi posto sopra ad una colonna può nasconderla velocemente.

Colonne fisse, ridimensionabili e posizionabili#

Colonne fisse

Quando le colonne da far vedere in griglia sono tante, compare la barra di scorrimento orizzontale. In questo caso se si scorre a destra è utile che le colonne che identificano la riga e la colonna delle azioni rimangano visibili.

Ad esempio nel filmato che segue si tengono fisse le colonne "azioni, codice e ragione sociale". Ciò consente di avere sempre a portata di click i bottoni delle azioni e di sapere sempre in ogni istante qual è la ragione sociale di ogni riga, anche se si scorre a destra.

Ridimensionabili e posizionabili

Altra caratteristica utile ad organizzare lo spazio delle colonne è la possibilità di variarne la disposizione con un semplice trascinamento e la possibilità di allargarle o stringerle.

Preset#

Tutta la configurazione di una griglia in termini di filtri applicati, visibilità delle colonne, ordinamento, raggruppamento, disposizione delle colonne e dimensione delle stesse viene salvata automaticamente e riapplicata automaticamente quando l'utente torna sulla stessa griglia.

Inoltre l'utente ha la possibilità di salvare tutte le configurazioni che desidera e richiamarle a piacimento dall'apposita voce "Configurazioni" il tutto con un solo click.

Colonne aggregate#

In alcuni contesti invece di avere molte colonne in griglia e righe compatte, è desiderabile aggregare in una stessa colonna più valori. Nell'esempio seguente si è deciso di mettere nella colonna Totali tutti i totali (Netto, IVA e Importo). Nonostante ciò è sempre possibile usare i filtri puntuali anche sulle colonne aggregate.

Testata-righe#

L'esempio classico della navigazione testata-righe è la fattura. Sulla testata sono riportati i dati dell'intestazione della fattura come ad esempio il numero e la data. Sulle righe invece metto le righe della fattura.

Nell'esempio che segue, quando apro in modifica una fattura compare la maschera laterale della testata della fattura e, in alto, compaiono tre linguette (Righe, Pagamenti, Riepilogo IVA) colorate delle stesso colore della fattura selezionata (nell'esempio violetto).

Agendo sulla linguetta "Righe" accedo alle righe della fattura.

Il vantaggio di questa disposizione è che le righe possono avere delle form di modifica con campi anche molto complessi, ma senza creare alcun problema alla UI. La disposizione gerarchica scelta è ricorsiva e non ha limiti.

Con la stessa modalità e mantenendo la stessa flessibilità è possibile realizzare scenari gerarchici a più livelli senza appesantire l'interfaccia utente (UI) e l'esperienza utente (UX).

Riordino righe#

Per i contesti in cui l'utente deve poter definire un ordine sequenziale delle righe abbiamo sviluppato la funzionalità di riordino che permette con un semplice trascinamento di spostare le righe e riassegnare il nuovo ordine alle righe.

Molto spesso nei gestionali i dati sono collegati tra di loro da relazioni. Ad esempio nel filmato si vede il caso della fattura che è collegata al cliente (relazione uno a uno) e viceversa un cliente compare come soggetto di più fatture (relazione uno a molti).

Le nostre griglie facilitano la navigazione di queste relazioni tra i dati.

Nell'esempio cliccando sul cliente di una fattura vado alla sua anagrafica e viceversa partendo dall'anagrafica di un cliente posso andare a tutte le fatture prefiltrate su quel cliente.

Richiesta preventivo e informazioni#

Per gli altri video che documentano le funzionalità del nostro framework vai all'articolo Framework Ver 4.0 Sviluppo Gestionali Web.

Se invece vuoi affidarci lo sviluppo di un gestionale web consulta la pagina Sviluppo software gestionali web

Autore: Giovanni Chiodi
Senior software developer con più di 10 anni di esperienza nello sviluppo di soluzioni web based, enterprise, su misura. Dal 2011 socio fondatore di Garda Informatica Snc condivide questa avventura col fratello Lorenzo.

Promemoria sui Cookie e sulla Privacy

Leggi l'informativa
closeIcona closesearchIcona searchmore vertIcona more vertmenuIcona menu