Widget Stepper

Il widget Stepper mostra una sequenza di step per il record corrente ed evidenzia lo step in cui si trova l'utente. Usalo per candidature multi-step, onboarding, checklist o qualsiasi flusso guidato in cui il progresso deve restare visibile.

Scenari tipici:

• un form di candidatura o onboarding multi-step;
• una richiesta guidata da compilare in un ordine fisso;
• un workflow in cui gli utenti devono vedere il progresso e saltare facoltativamente a uno step precedente.

Lo step selezionato è guidato dalle condizioni Selected when su un campo dell'oggetto della pagina (un campo stato o progresso). Per avanzare di solito un form aggiorna quel campo e ricarica la pagina.

suggerimento

Preferisci questo widget Stepper rispetto all'impostazione obsoleta Display as → stepper del form.

Due layout canonici

Ci sono due modi standard per costruire uno stepper. Scegline uno e mantienilo.

1. Tutti gli step nella stessa pagina (Navigate → Same page)

Metti lo Stepper e i widget di ogni step (di solito form) su una sola pagina. Usa le regole di visibilità di ciascun widget così compaiono solo i widget dello step corrente.

Sullo Stepper:

• imposta Destination su Navigate to the step page;
• per il redirect di ogni step (quando è cliccabile), scegli Same page.

Dopo l'invio di un form (o un Task di uno step cliccabile), il follow-up deve anche ricaricare la stessa pagina. Lo stepper rivaluta Selected when e le regole di visibilità mostrano i widget corrispondenti.

È il layout più semplice quando ogni step modifica lo stesso record e vuoi una barra laterale (ad esempio Stepper al 25% accanto a form al 75%).

2. Una pagina figlia per step (Open under the stepper)

Metti solo lo Stepper sulla pagina padre. Crea una pagina figlia per ogni step (form, detail, rich text e così via) e punta ogni step a quella pagina.

Sullo Stepper:

• imposta Destination su Open under the stepper (la pagina dello step viene mostrata sotto lo stepper sulla pagina padre);
• per ogni step, imposta Page under stepper sulla pagina figlia corrispondente — in questa modalità Same page non è consentito.

Viene incorporata solo la pagina dello step corrente. Una pagina di step è raggiungibile mentre la condizione Selected when di quello step corrisponde al record. Usalo quando gli step sono grandi, riusano layout diversi, o vuoi confini di pagina chiari per ogni fase.

Come creare uno Stepper

1. Trascina un widget Stepper in una pagina collegata a un record (ad esempio una pagina detail aperta da una griglia).
2. Aggiungi uno step per ogni fase e imposta un'etichetta (e un'icona facoltativa) per ciascuno.
3. Su ogni step, imposta Selected when così quello diventa lo step corrente per la sua fase (di solito "status/progress equals this stage").
4. Scegli Destination: Navigate to the step page oppure Open under the stepper (vedi sopra).
5. Imposta facoltativamente Width a 25% così lo stepper sta accanto al contenuto (soprattutto nel layout a pagina unica).

Procedura a pagina unica

Usa un campo sull'oggetto della pagina per memorizzare la fase corrente — un campo Choice (personal, address, review) o un numero (1, 2, 3). Dagli un default uguale al primo step così i nuovi record partono nel posto giusto.

Imposta Destination su Navigate to the step page. I form nascosti non occupano spazio nel layout, così una divisione 25%/75% resta intatta mentre l'utente passa da step a step.

1. Stepper al 25% di larghezza

Imposta Width dello stepper a 25% (scheda del titolo del widget). Resta a sinistra come barra di progresso.

2. Form al 75% di larghezza

Aggiungi un form di aggiornamento per step per lo stesso oggetto, e imposta Width di ogni form a 75%. Poiché solo un form è visibile alla volta, quel form sta accanto allo stepper invece di andare a capo su una nuova riga.

3. Mostra solo il form corrente

Su ogni form, apri Visibility e imposta Show widget when così il form appare solo per la sua fase — ad esempio step equals personal sul primo form, address sul secondo, e così via.

4. Avanza all'invio

Su ogni form (tranne l'ultimo):

1. Aggiungi un Task che updates this record e imposta il campo status/progresso allo step successivo.
2. In Follow-up, reindirizza alla pagina corrente / Same page (il reload predefinito è sufficiente).

Dopo l'invio, la pagina si ricarica con il nuovo valore: lo stepper seleziona lo step successivo e il form corrispondente diventa l'unico visibile.

Sull'ultimo form, salta l'aggiornamento "step successivo", oppure imposta uno stato finale come completed, e reindirizza dove l'utente deve arrivare (pagina di ringraziamento, pagina padre o la stessa pagina).

5. Seleziona lo step corrente

Torna allo stepper e assegna Selected when a ogni step con gli stessi valori di status/progresso usati per la visibilità del form.

Lo stepper non cambia i dati da solo; riflette solo il campo. I form (e i Task cliccabili facoltativi) sono ciò che sposta l'utente avanti o indietro.

Procedura con pagine figlie (embed)

1. Crea pagine figlie sotto il padre — una per step — con i form o altri widget di quella fase.
2. Sul padre, posiziona lo Stepper e imposta Destination su Open under the stepper.
3. Per ogni step, imposta Selected when come di consueto e Page under stepper sulla pagina figlia corrispondente.
4. Nei form di ogni pagina figlia, all'invio avanza il campo status/progresso; il follow-up deve tornare alla pagina padre (così lo stepper si ricarica e incorpora la figlia successiva).

Sotto lo stepper appare solo la pagina figlia dello step corrente. Le altre pagine di step restano irraggiungibili finché la loro condizione non corrisponde.

Step cliccabili (tornare indietro)

Imposta Mode su Clickable quando gli utenti possono riaprire step precedenti. Su ogni step che permetti di ripristinare, configura un Task che aggiorna il campo status/progresso così la condizione Selected when di quello step torna a corrispondere.

• Navigate + layout a pagina unica: dopo il Task reindirizza a Same page.
• Open under the stepper: dopo il Task di rewind la pagina padre si ricarica e il pannello mostra di nuovo la pagina figlia di quello step.

Collega Task solo agli step che l'utente dovrebbe poter riaprire. La modalità read-only evidenzia comunque il progresso ma non esegue Task al click.

Larghezza

Nella scheda titolo/impostazioni del widget, Width controlla quanto spazio orizzontale occupa lo stepper: 100%, 75%, 50%, 33%, 25% o 16% (predefinito 100%). Usa 25% accanto a form al 75% per una barra laterale nel layout a pagina unica; uno stepper a larghezza piena funziona bene sopra una pagina figlia incorporata.