Estendere l’applicazione Qodly con componenti personalizzati

4D Qodly Pro offre già un’ampia gamma di componenti nativi per aiutarvi a progettare le vostre applicazioni. Ma sapevate che potete andare oltre? Grazie ai componenti personalizzati sviluppati dalla comunità, potete arricchire i vostri progetti con funzionalità su misura!

Questi componenti personalizzati consentono di estendere le capacità di 4D Qodly Proaggiungendo funzionalità personalizzate, proprio come i plugin e i componenti di 4D.

In questo articolo esploreremo come utilizzare e integrare questi componenti, insieme a diversi casi d’uso reali tratti dalla nostra applicazione Performance Review.

Applicazione Performance Review

Che cos’è un componente personalizzato?

I componenti personalizzati sono blocchi creati dagli utenti per soddisfare esigenze specifiche o aggiungere funzionalità non coperte dai componenti integrati di 4D Qodly Pro. Sviluppati in React, forniscono una base potente e flessibile agli sviluppatori.

L’integrazione dei componenti personalizzati in Qodly Studio offre diversi vantaggi:

• Estensibilità: Personalizzazione delle pagine per adattarle esattamente ai requisiti del progetto.
• Riutilizzabilità: Condivisione dei componenti in diversi progetti o con la comunità Qodly.
• Efficienza: Risparmiate tempo utilizzando componenti precostituiti invece di partire da zero.

Come utilizzare un componente personalizzato?

1. Scegliere il componente
   • Sfogliate il repository GitHub dei componenti personalizzati e selezionate quello che vi serve.
2. Scaricare la versione più recente
   • Fare clic sul componente scelto.
   • Andare alla sezione Release.
   • Scaricare l’ultima versione (file ZIP). Assicurarsi di essere nella sezione Releases per ottenere la versione precompilata, non il codice sorgente.
3. Installare in Qodly Studio
   • Nella sezione Componenti, fare clic su Carica componente.
   • Trascinare e rilasciare o selezionare il file ZIP scaricato.
   • Fare clic su Installa componente, quindi su Ricarica.
   • Il componente apparirà ora nella sezione Custom dei componenti disponibili.
   • È ora possibile trascinarlo direttamente su una pagina.

Per ulteriori informazioni, consultare la documentazione ufficiale: Caricare un componente personalizzato.

Come creare un proprio componente personalizzato?

Se non riuscite a trovare un componente che soddisfi le vostre esigenze, potete crearne uno vostro.

L’API di 4D Qodly Pro semplifica la creazione di componenti personalizzati in React grazie allo strumento CLI dedicato, @qodly/cli. Questo strumento semplifica l’inizializzazione di un progetto React, consentendo agli sviluppatori di progettare e condividere componenti riutilizzabili. Una volta integrati, questi componenti possono essere aggiunti alle pagine con un semplice drag-and-drop.

Per maggiori dettagli, consultare la documentazione ufficiale.

In che modo i componenti personalizzati possono migliorare la vostra applicazione?

Nell’applicazione Performance Review abbiamo integrato diversi componenti personalizzati per migliorare l’esperienza dell’utente. Ecco alcuni esempi concreti:

• Visualizzare un documento PDF con il componente pdfViewer.
• Scaricare un file con il componente fileDownload.
• Creare un menu dinamico con il componente Popover.
• Costruire un selezionatore di anni combinando i componenti Popover e DatePicker.

Visualizzazione di documenti: Integrare un PDF con pdfViewer

Utilizziamo il componente pdfViewer.

Passi per integrare un visualizzatore di PDF:

• Scaricare e installare il componente pdfViewer come descritto nella sezione precedente.
• Trascinare il componente nella pagina e collegarlo alla fonte di dati “selectedReview.DocumentPDF”, che contiene il PDF.

• Il documento viene quindi visualizzato dinamicamente sulla pagina.

Questo componente è particolarmente utile per visualizzare documenti generati dinamicamente da un modello di 4D Write Pro e da dati di database.

Scaricare un file PDF con il componente fileDownload

Il componente fileDownload consente di scaricare documenti.

Procedura per creare un’opzione di download di file:

• Installare il componente fileDownload.
• Trascinare il componente nella pagina e collegare la fonte di dati che contiene il file PDF da scaricare. In questo caso, la fonte di dati è “selectedReview.DocumentPDF”.

• Una volta configurato, un semplice clic consente agli utenti di scaricare il file.

Creare un menu interattivo con Popover

Nella nostra applicazione Performance Review, abbiamo integrato un menu nella parte superiore della pagina, collocato sopra un widget Page Loader. Questo menu determina dinamicamente la pagina da caricare all’interno del componente Page Loader. Abbiamo creato il menu con il componente popover.

Passi per creare il menu:

• Installare il componente popover.
• Trascinare e rilasciare il componente popover sulla pagina.
• Nella sezione del menu, inserire un testo statico denominato Risorse umane.
• Nella sezione over, inserire tre pulsanti denominati Collaboratore, Recensioni e Formazione.

Con alcuni aggiustamenti di stile, otteniamo un menu funzionale ed ergonomico:

Grazie alla messa a punto del design, alla regolazione della spaziatura, dei colori e degli effetti hover, è possibile creare un’esperienza di navigazione fluida e facile da usare nella propria applicazione Qodly.

Creare un DatePicker personalizzato con Popover e DatePicker

4D Qodly Pro offre un componente nativo per la selezione della data. Tuttavia, nell’applicazione Performance Review, abbiamo scelto di utilizzare il componente DatePicker personalizzato, poiché il suo design si adatta meglio alle nostre esigenze. Questo ci ha anche permesso di dimostrare la combinazione di componenti personalizzati.

Procedura per creare un input anno personalizzato:

• Trascinare e rilasciare una casella di stile nella pagina.
• Aggiungere un testo di input formattato con un numero all’interno della casella di stile.
• Inserire un componente popover all’interno della casella di stile.
• Nella sezione menu del Popover, inserire un’icona per aprire il selettore di data.
• Nella sezione over, inserire il componente DatePicker.
• Aggiungere la fonte di dati al testo di input e al DatePicker.

Con alcuni aggiustamenti di stile (bordi, colori, ecc.), ecco il risultato:

Questo approccio combina flessibilità e design personalizzato, migliorando l’esperienza dell’utente.

I prossimi passi

I componenti personalizzati sono una soluzione potente per migliorare le applicazioni Qodly e soddisfare esigenze specifiche senza dover ricorrere a uno sviluppo complesso. Esplorate il repository GitHub dei componenti per scoprire altre possibilità.

Se avete creato il vostro componente, condividetelo con la comunità di Qodly!

Per approfondire, guardate questo video tutorial: Come aggiungere componenti personalizzati alla vostra applicazione Qodly.