Form avanzati con Filament 5: relazioni, repeater e wizard — articolo

> Form avanzati con Filament 5: relazioni, repeater e wizard

Come gestire form complessi con campi dinamici, relazioni nested e flussi multi-step in Filament.

Luigi Iadicola
~6 min lettura
#Filament #Laravel #UX
Form avanzati con Filament 5: relazioni, repeater e wizard
Form avanzati con Filament 5: relazioni, repeater e wizard

Perche i form reali non sono mai semplici

I form delle applicazioni reali non sono mai una lista piatta di campi di testo. Un ordine ha righe prodotto con quantita e prezzi. Un progetto ha milestone con task e scadenze. Un paziente ha visite mediche con esami allegati e prescrizioni. La complessita dei dati si riflette nella complessita dei form, e gestirla bene e una delle sfide piu comuni nello sviluppo di pannelli admin.

Filament 5 affronta questa complessita con componenti dedicati che si dichiarano in PHP puro, senza JavaScript custom, senza gestione dello stato frontend e senza validazione duplicata tra client e server. Il form builder di Filament e probabilmente il componente piu potente dell intero framework, e quello che giustifica da solo l adozione per molti progetti.

Gli strumenti chiave per form complessi

Repeater: campi dinamici che l utente aggiunge e rimuove

Il Repeater e il componente per gestire liste di dati variabili all interno di un form. L utente puo aggiungere nuove righe, rimuoverle, riordinarle con drag and drop e compilarle con qualsiasi tipo di campo supportato da Filament.

Casi d uso tipici: righe di un ordine o preventivo, indirizzi multipli per un cliente, varianti di un prodotto (taglia, colore, prezzo), esperienze lavorative in un curriculum, allegati con metadati. Ogni riga del repeater puo contenere qualsiasi combinazione di campi: text, select, date, file upload, toggle e anche altri repeater annidati per strutture dati ricorsive.

Il Repeater gestisce automaticamente la persistenza dei dati. Se e associato a una relazione HasMany, Filament crea, aggiorna ed elimina i record figli in modo automatico quando il form viene salvato. Non serve scrivere logica custom nel controller.

Relationship manager: gestione relazioni inline

Il Relationship Manager e un componente che aggiunge una tabella di record correlati direttamente nella pagina di dettaglio di una risorsa. A differenza del Repeater — che gestisce la relazione all interno del form — il Relationship Manager mostra una tabella separata con il proprio CRUD completo.

Esempio: nella pagina di dettaglio di un cliente, un Relationship Manager per gli ordini mostra la lista degli ordini con tabella, filtri e azioni. L utente puo creare un nuovo ordine, modificarne uno esistente o eliminarlo, tutto senza navigare via dalla pagina del cliente.

Questo approccio e ideale quando i record correlati sono entita autonome con i propri campi e la propria logica, e non semplici righe di un form.

Wizard: form multi-step con validazione per sezione

Il Wizard suddivide un form lungo in passaggi logici, ognuno con i propri campi e la propria validazione. L utente naviga avanti e indietro tra i passaggi, e la validazione viene eseguita ad ogni transizione. Solo quando tutti i passaggi sono validi si puo procedere al salvataggio.

Il vantaggio non e solo estetico: un form di 30 campi spaventa l utente, mentre gli stessi 30 campi distribuiti in 4 step da 7-8 campi risultano gestibili. La percentuale di completamento dei form aumenta significativamente quando si usa un wizard rispetto a un form piatto.

Dipendenze tra campi: logica condizionale nel form

Filament supporta dipendenze tra campi con i metodi ->visible(), ->hidden(), ->disabled() e ->reactive(). Quando un campo cambia valore, altri campi possono apparire, scomparire o cambiare le proprie opzioni in tempo reale.

Esempio: un select "tipo documento" con le opzioni Fattura, Nota di Credito e Preventivo. Selezionando Fattura, appaiono i campi per la ritenuta d acconto e il regime IVA. Selezionando Preventivo, appare un campo per la data di scadenza dell offerta. Tutto gestito in PHP con metodi dichiarativi, senza JavaScript.

Esempio concreto: form di creazione preventivo

Vediamo un caso reale implementato per un cliente. Un form di creazione preventivo con quattro step, ognuno con la propria logica e validazione.

  • Step 1 — Dati cliente: select con ricerca su anagrafica esistente, con possibilita di creare un nuovo cliente inline. Campi per ragione sociale, P.IVA, indirizzo e email di fatturazione
  • Step 2 — Righe preventivo: repeater con descrizione, quantita, prezzo unitario e sconto percentuale. Calcolo automatico del totale per riga e del totale generale. Possibilita di riordinare le righe con drag and drop
  • Step 3 — Condizioni: textarea per note e condizioni, select per termini di pagamento, date picker per validita dell offerta, toggle per inclusione IVA
  • Step 4 — Riepilogo: anteprima del preventivo con tutti i dati, totali calcolati e pulsante di conferma

Senza Filament, questo form richiederebbe un framework JavaScript per la gestione dello stato, componenti custom per il repeater con calcoli, validazione duplicata client-server, chiamate AJAX per la ricerca clienti e un template Blade complesso per il layout. Con Filament, tutto vive in una classe PHP di circa 150 righe, testabile e manutenibile.

Validazione avanzata nei form Filament

La validazione in Filament sfrutta il sistema di validazione di Laravel, il che significa accesso a tutte le regole built-in e la possibilita di creare regole custom. Ma ci sono alcune funzionalita specifiche di Filament che meritano attenzione:

  • Validazione real-time — i campi marcati come ->live() vengono validati mentre l utente digita, mostrando gli errori immediatamente
  • Validazione per step del wizard — ogni passaggio valida solo i propri campi, impedendo di procedere al passaggio successivo se ci sono errori
  • Validazione su repeater — le regole si applicano a ogni riga del repeater indipendentemente, con messaggi di errore specifici per riga
  • Validazione cross-field — regole come required_if, gt:field e different:field funzionano anche tra campi di sezioni diverse del form

Performance dei form complessi

Un form con molti campi reattivi e repeater puo diventare lento a causa delle richieste Livewire ad ogni interazione. Filament 5 mitiga questo problema con il debouncing automatico, il batching delle richieste e la possibilita di rendere reattivi solo i campi che lo necessitano davvero.

La regola pratica e: usare ->live() solo sui campi che influenzano altri campi, e usare ->live(onBlur: true) quando la reattivita non serve in tempo reale ma solo quando l utente esce dal campo. Questo riduce il numero di richieste al server e mantiene il form scattante anche con 50+ campi.

Il vantaggio architetturale dei form dichiarativi

Il beneficio piu grande dei form Filament non e la velocita di sviluppo — che pure e notevole — ma la manutenibilita. Un form dichiarativo in PHP e intrinsecamente piu leggibile di un equivalente mix di HTML, JavaScript e PHP. Le regole di validazione sono vicine ai campi, la logica condizionale e esplicita e la struttura del form e visibile in un colpo d occhio.

Quando un nuovo sviluppatore apre la classe di una Resource Filament, capisce immediatamente quali campi ha il form, come sono validati, quali dipendenze esistono e come vengono salvati i dati. Questa leggibilita si traduce in meno bug, meno tempo per l onboarding e costi di manutenzione ridotti nel lungo termine.

altri articoli
progetti correlati