Modificare i campi di un Nested Form

Attraverso la sezione Logic è possibile modificare dinamicamente alcune proprietà dei componenti presenti all'interno di un nested form.

In questo modo, il nested form non viene modificato in modo permanente nella sua definizione originale, ma assume una struttura differente solo all'interno del servizio in cui le logiche sono state configurate.

La modifica delle proprietà di un Nested Form tramite condizioni logiche è una funzionalità potente ma delicata: se utilizzata in modo improprio, può compromettere il servizio, interrompendo il flusso di compilazione e pregiudicando l'esperienza utente.

Cosa puoi modificare

Di seguito trovi le proprietà che puoi modificare, con un esempio di codice per ciascuna. Il codice completo va inserito nel campo "Custom Action (Javascript)", come spiegato in Come configurare la modifica.

Obbligatorietà

Prima di rendere facoltativo un campo, verifica queste regole:

• per ragioni tecniche legate all'invio della pratica, il codice fiscale del richiedente (applicant) non può essere reso facoltativo;
• è fortemente sconsigliato rendere facoltativo l'indirizzo email del richiedente (applicant), poiché in tal caso l'utente non riceverebbe le notifiche relative all'avanzamento delle sue pratiche;
• in generale, i campi che definiscono il nested form (es. l'importo dell'ISEE) non devono essere resi facoltativi.

Inserisci il codice JavaScript nel campo "Custom Action (Javascript)" per rendere opzionale un campo del Nested Form (ad esempio, "Data di nascita" nel form "OC - Beneficairio").

window.FormioHelper.editFormProperties(instance, {
  birth_date: {
    "validate.required": false,
  }
});

Al contrario, per rendere obbligatorio un campo che non è obbligatorio di default, sostituisci false con true.

Etichetta

Inserisci il codice JavaScript nel campo "Custom Action (Javascript)" per modificare l'etichetta (label) di un campo del Nested Form (ad esempio, cambiare "Particella o mappale" in "Particella" nel form "OC - Immobili").

window.FormioHelper.editFormProperties(instance, {
  parcel: {
    "label": "Particella",
  }
});

Visibilità del componente

Inserisci il codice JavaScript nel campo "Custom Action (Javascript)" per nascondere un campo del Nested Form (ad esempio, nascondere il campo "Data di nascita" nel form "OC - Beneficiario").

window.FormioHelper.editFormProperties(instance, {
  birth_date: {
    "hidden": true,
  }
});

Al contrario, per rendere visibile un campo che non è visibile di default, sostituisci false con true (ad esempio nei casi in cui la modifica dipenda da un valore variabile)

Suffisso e prefisso di un campo

Inserisci il codice JavaScript nel campo "Custom Action (Javascript)" per inserire un suffisso e/o un prefisso di un campo del Nested Form (ad esempio, per il campo "Volumetria del fabbricato" nel form "OC - Immobili").

window.FormioHelper.editFormProperties(instance, {
  volume: {
    "prefix": "volumetria",
    "suffix": "metri cubi"
  },
});

Per nascondere il suffisso di un campo, inserisci:

window.FormioHelper.editFormProperties(instance, {
  volume: {
    "suffix": "",
  }
});

Per nascondere il prefisso di un campo, invece, inserisci:

window.FormioHelper.editFormProperties(instance, {
  volume: {
    "prefix": "",
  }
});

Tooltip di un campo

Inserisci il codice JavaScript nel campo "Custom Action (Javascript)" per inserire un tooltip associato ad un campo del Nested Form (ad esempio, aggiungere o modificare il tooltip del campo "Foglio" nel form "OC - Immobili").

window.FormioHelper.editFormProperties(instance, {
  sheet: {
    "tooltip": "Numero di una porzione di territorio nel catasto comunale",
  }
});

Per nascondere invece il tooltip di un campo, inserisci:

window.FormioHelper.editFormProperties(instance, {
  sheet: {
    "tooltip": ""
  }
});

Descrizione di un campo

Inserisci il codice JavaScript nel campo "Custom Action (Javascript)" per inserire la descrizione di un campo del Nested Form (ad esempio, modificare o aggiungere la descrizione del campo "Foglio" nel form "OC - Immobili").

window.FormioHelper.editFormProperties(instance, {
  sheet: {
    "description": "Numero che identifica una porzione di territorio nel catasto comunale",
  }
});

Per nascondere invece la descrizione di un campo, inserisci:

window.FormioHelper.editFormProperties(instance, {
  sheet: {
    "description": ""
  }
});

Come configurare la modifica

Una volta scelto cosa modificare, segui questi passaggi per applicarlo nel service builder.

Configura la logica

Collocati nella sezione "Logic" del componente e aggiungi una logica avanzata

Inserisci il nome della logica creata (1) e come trigger seleziona la tipologia "Javascript" (2).

Se la modifica deve essere sempre eseguita, digita result = true nel campo "Text Area".

Se la modifica dipende dal valore di un campo variabile (ad esempio, una select ruolo in cui i valori sono "Genitore", "Tutore" e "Affidatario"), è necessario definire esplicitamente tutte le condizioni in altrettante logiche. Infatti, il form non ripristina automaticamente lo stato precedente se viene configurata solo una delle due condizioni.

Una volta creata la logica, clicca su "Add Action" per aggiungere l'azione da eseguire

Configura l'azione inserendo il titolo (1) e indicando la tipologia "Custom Action" (2).

La tipologia "Custom Action" attiva la sezione "Custom action (Javascript)", da usare per inserire il codice della tua azione.

Durante la modifica della proprietà, ricorda di racchiudere il tuo codice inserendo:

1. window.FormioHelper.editFormProperties(instance, { all'inizio.
2. }) alla fine (per chiudere la funzione).

In pratica, la struttura del tuo codice dovrà assomigliare a questa:

window.FormioHelper.editFormProperties(instance, {
// Il codice personalizzato
})

Recuperare il property name dei componenti del nested form

Il property name dei campi varia a seconda dello specifico "Nested Form" utilizzato.

Per conoscere il property name corretto, consulta la pagina I nested form: nell'expandable di ogni nested form trovi l'elenco completo dei path dei campi.

Ad esempio, per il campo "Numero civico" del beneficiario il path è data.beneficiary.data.birth_place : il valore da inserire è birth_place.

Modificare un componente di un Nested Form annidato

Per modificare i campi presenti in Nested Form che a loro volta contengono altri Nested Form, è necessario indicare il percorso completo del campo, racchiudendolo tra virgolette.

Per esempio, voglio rendere non obbligatorio il campo "Indirizzo" contenuto nel nested form OC - Residenza, a sua volta contento nel nested form OC - Immobili.

La sintassi sarà "address.street_address" , dove:

• address = property name del nested form OC - Residenza all’interno di OC - Immobili
• street_address = property name del campo "Indirizzo" all’interno di OC - Residenza

window.FormioHelper.editFormProperties(instance, {
  "address.street_address": {
    "validate.required": false
    }
});