Nella nostra serie su 4D Qodly Pro, abbiamo esplorato come visualizzare i dati utilizzando un datatable. Oggi faremo il passo successivo: impareremo ad aggiungere, modificare e cancellare i record. Queste operazioni sono essenziali per creare applicazioni dinamiche e interattive.
Per dimostrare queste funzionalità, continueremo con la nostra applicazione di gestione delle valutazioni delle prestazioni. L’obiettivo è progettare una schermata che consenta agli utenti di aggiungere o modificare le informazioni sui dipendenti. Questo progetto è disponibile su GitHub come riferimento.
Applicazione per la valutazione delle prestazioni
Aggiunta dei pulsanti di creazione e modifica
Accanto al datatable, aggiungiamo due pulsanti: Crea e Modifica.
Sono disponibili due opzioni per la visualizzazione del modulo di inserimento dati:
- Visualizzazione del modulo in linea: Mostra il modulo di inserimento accanto alla tabella dei dati quando l’utente fa clic sui pulsanti “Crea” o “Modifica”. Il modulo può essere attivato o disattivato utilizzando gli stati. Gli stati condizionali o non condizionali forniscono flessibilità e dedicheremo a questo argomento un prossimo blog. Per ora, se siete desiderosi di conoscere gli stati, consultate questa documentazione sulla panoramica degli stati e questo blog sulle interfacce utente dinamiche con gli stati di pagina.
- Visualizzazione di una finestra di dialogo modale: Aprire il modulo in una finestra di dialogo modale quando l’utente fa clic sui pulsanti “Crea” o “Modifica”. Questo è l’approccio che abbiamo scelto per questa esercitazione.
Creare una finestra di dialogo
Per creare una finestra di dialogo, fare clic sul pulsante di dialogo nella barra superiore.
Sono disponibili diverse proprietà per personalizzare la finestra di dialogo:
- Sovrapposizione: Attiva la sovrapposizione dello schermo quando è impostata su true.
- Trascinabile: Consente il riposizionamento guidato dall’utente. Presenta un’icona di spostamento personalizzabile.
- Chiudi: Integra una funzione di chiusura, azionabile tramite il pulsante o facendo clic all’esterno della finestra di dialogo.
- Animato: Implementa un effetto di sfarfallio in apertura per enfatizzare la vista.
Per ulteriori dettagli, consultare la documentazione della finestra di dialogo.
Creazione di un modulo di immissione dati
Ora creeremo un modulo di inserimento dati per raccogliere le informazioni sui dipendenti. Questo modulo consentirà agli utenti di creare o aggiornare le voci del database.
Collegare il modulo all’origine dei dati
Come promemoria, nel blog precedente abbiamo creato un datatable collegato alla fonte di dati employees e abbiamo collegato l’elemento selezionato alla fonte di dati “theEmployee”. Questa fonte di dati “theEmployee” popolerà il modulo di input.
Aggiunta di campi di input
Per i campi di base, come nome, cognome, e-mail e lavoro, si utilizza il componente Text Input.
Esempio: Configurazione del campo Nome
- Trascinare un componente di input di testo nel modulo.
- Impostare la proprietà Qodly source su “theEmployee.Firstname”.
Ripetere questa procedura per gli altri campi, collegandoli agli attributi appropriati di “theEmployee”.
Configurazione dei campi di testo lunghi
Per i campi di testo più lunghi, come la descrizione, si utilizza anche il componente Input di testo, ma lo si configura come un’area di testo:
- Trascinare un componente di input di testo nel modulo.
- Cambiare la proprietà Type in Area di testo.
- Impostare l’origine Qodly su “theEmployee.Description”.
Menu a discesa per reparti e manager
Per campi come quelli dei dipartimenti e dei manager, utilizziamo il componente Select Box, che consente agli utenti di selezionare valori predefiniti.
- Creare l’origine dati: “dipartimento” di tipo entità,
- Trascinare un componente Select Box,
- Impostare “theEmployee.Departement” come origine Qodly e “department” come elemento selezionato.
- Definire la proprietà segnaposto con il testo “Dipartimento”,
- Trascinare un componente di input di testo all’interno della casella di selezione,
- Collegare l’input di testo all’origine “$Questo.Nome”.
Casella di controllo con aspetto di interruttore
Per un campo booleano come “isActive”, utilizziamo il componente Check box. Per avere un aspetto moderno, utilizziamo l’aspetto Switch.
- Inserire un componente Check Box nel modulo,
- Cambiare la proprietà Variant in Switch,
- Impostare l’origine Qodly su “theEmployee.isActive”.
Gestione delle azioni
4D Qodly Pro semplifica la creazione, il salvataggio e la cancellazione dei record fornendo azioni standard integrate, simili a quelle di 4D.
Esempio: Azione Salva
- Aggiungete un pulsante ed etichettatelo come Salva.
- Nel pannello Eventi, sotto l’azione Al clic, fate clic su Aggiungi azione standard.
- Inserire la fonte dei dati (in questo caso, il dipendente) e selezionare l’azione Salva.
- Attivare la casella di controllo Fornisci feedback per personalizzare la gestione dei messaggi di errore inattesi, determinando ciò che verrà visualizzato dagli utenti finali.
Funzioni personalizzate per la logica aziendale
Oltre alle azioni standard, è possibile richiamare funzioni personalizzate per operazioni come la creazione, l’eliminazione o il salvataggio di record. Ad esempio:
- Convalidare i dati prima di salvarli.
- Eseguire calcoli per popolare campi aggiuntivi.
In questa applicazione, abbiamo mantenuto le cose semplici affidandoci alle azioni standard; potete esplorare tutte le possibilità delle azioni standard nella documentazione di Qodly.
Aggiornare il datatable dopo gli aggiornamenti
Dopo aver aggiunto o modificato un record, è importante aggiornare il datatable per riflettere le modifiche. Questo si ottiene facilmente con l’azione Ricarica.
Per aggiornare il datatable dopo il salvataggio:
- Aggiungere l’azione Reload alla fonte di dati dipendenti collegata al datatable.
- Assegnare questa azione al pulsante Salva insieme all’azione Salva.
Apertura e chiusura della finestra modale
Per migliorare l’interazione con l’utente, è necessario associare le azioni di dialogo appropriate alla finestra modale:
- Ai pulsanti Modifica e Crea, aggiungere l’azione Apri finestra di dialogo.
- All’interno della finestra di dialogo, sui pulsanti Salva e Annulla, aggiungere l’azione Chiudi finestra di dialogo.
Passi successivi
Congratulazioni! Ora disponete di un sistema completamente funzionale per aggiungere, modificare e cancellare dati. Per esplorare ulteriormente l’ampia gamma di componenti disponibili per la costruzione di pagine Qodly, consultate la documentazione completa sui componenti Qodly.
Fateci sapere cosa ne pensate e condividete i vostri progressi sul forum 4D. Rimanete sintonizzati per il prossimo blog, in cui parleremo degli stati per controllare dinamicamente l’interfaccia utente.