Creare un elenco interattivo di dati con 4D Qodly Pro

Nel blog di questa settimana esploriamo la creazione di una pagina dinamica per la visualizzazione dei dati. Ci concentreremo su un’applicazione pratica: la creazione di un sistema per generare rapporti annuali sulle prestazioni dei dipendenti. Questo progetto è disponibile su GitHub.

Il nostro obiettivo è progettare un’interfaccia facile da usare che visualizzi un elenco di dipendenti con opzioni per filtrare i risultati in base al reparto e allo stato di occupazione.

Applicazione per la valutazione delle prestazioni

Ecco il risultato finale:

Impostazione delle fonti Qodly

Nella sezione Fonti di Qodly, definiremo le diverse fonti utilizzate dai nostri componenti.

In questo esempio, creiamo una fonte intitolata “Employees”, di tipo entity selection, basata sulla classe di dati “Employee”. Il valore iniziale è impostato su tutti i dipendenti.

Nota:

• Le sorgenti raggruppate sotto “This.page” hanno un ambito limitato alla pagina corrente. Utilizzarle per la gestione di dati temporanei o specifici della pagina.
• Le fonti raggruppate sotto “Namespaces” hanno un ambito globale, che le rende adatte a dati o impostazioni condivise tra più pagine.

Creare un datatable

Con 4D Qodly Pro è possibile utilizzare i componenti datatable o matrix per presentare efficacemente un elenco di dati. In questo esempio, utilizziamo il componente datatable, simile alla casella di riepilogo di tipo Collection o Entity Selection in 4D.

Il campo “Fonte Qodly” consente di assegnare una selezione di entità per popolare il datatable. Il campo “Elemento selezionato” recupera l’entità selezionata, che equivale all'”elemento corrente” nella casella di riepilogo.

Poi, nella sezione “Colonne”, si possono aggiungere colonne e definire le loro espressioni. Ad esempio, definiamo una colonna per “Firstname”, che è un attributo diretto della classe di dati “Employee”, e “Department.Name”, che è un attributo correlato.

Filtrare i dati

In questa implementazione, l’elenco dei dipendenti può essere filtrato in base al loro reparto o al loro stato di dipendenti attivi.

Funzione loadEmployees()

Sul lato 4D, aggiungiamo una funzione nella classe “Employee” per restituire una selezione di entità in base ai criteri di filtraggio.

Ecco un frammento di codice:

exposed Function loadEmployees return ($departement: Object; $isActive: Boolean) : cs.EmployeeSelection
If ($departement#Null)
return This .query("ID_Dipendente = :1 AND isActive = :2"; $departement.ID; $isActive)
Else
This .query("isActive = :1"; $isActive)
End if

 

Filtro per stato attivo

Per implementare il filtraggio in base allo stato di occupazione, creiamo una fonte booleana di Qodly denominata “isActive” e impostiamo il valore iniziale su true. Quindi, aggiungiamo una casella di controllo collegata a questa fonte.

Per ottenere un aspetto simile a un interruttore, impostiamo la proprietà “Variant” su Switch.

Quindi, la funzione “loadEmployees” viene associata all’evento “On Change” della casella di controllo.

Per ulteriori dettagli sugli eventi, consultare la documentazione sugli eventi di Qodly.

Filtro per reparto

Per filtrare per reparto, utilizziamo un selectBox simile a un menu a tendina in 4D.

Creiamo due fonti di dati:

• “dipartimenti” di tipo entità di selezione
• “dipartimento” di tipo entità

 

Quindi, aggiungiamo un componente selectBox impostando “reparti” come sorgente Qodly e “reparto” come elemento selezionato.

Quindi, all’interno del selectBox, inseriamo un componente di testo collegato alla sorgente “$This.Name”.

Infine, sull’evento “On Change” del componente SelectBox, richiamiamo la funzione “loadEmployees” con i parametri “department” e “year”.

Voilà!

Stilizzazione del datatable

Il passo finale consiste nell’adattare il datatable alle linee guida del design della vostra azienda o all’identità visiva della vostra applicazione. Si può personalizzare

• regolando le proprietà del widget, come colori, bordi e altri stili,
• oppure applicare una classe CSS.

L’uso di una classe CSS offre il vantaggio di mantenere uno stile coerente tra tutti i Datatable dell’applicazione, garantendo un’esperienza utente coesa.

In un prossimo post del blog, esploreremo le varie possibilità di utilizzo dei CSS in Qodly Studio. Se non potete aspettare, la classe CSS utilizzata nell’applicazione Performance Review si chiama “DataTable”.

I prossimi passi

Congratulazioni! Ora avete una pagina funzionale in grado di visualizzare e filtrare i dati dei dipendenti. Questo sistema interattivo fornisce una solida base per la gestione dinamica dei dati nelle applicazioni Qodly.

Per migliorare ulteriormente la comprensione dei datatable e delle loro azioni, esplorate le seguenti risorse:

• Documentazione sul componente datable,
• Documentazione dell’azione,
• Guardate il nostro video sui datatable.

 

Buona programmazione e arrivederci al prossimo blog!