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.

Vincoli e prerequisiti

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.

Per questo motivo, prima di intervenire sulle proprietà, è bene avere in mente le seguenti 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;

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.

Recuperare il property name dei componenti del nested form

Il property name dei campi varia a seconda dello specifico "Nested Form" utilizzato; per recuperare il property name corretto, inserisci il seguente codice nella sezione "Custom action" della logica: console.log(data.[api_key del nested form])

Le chiavi API corrispondono a quelle utilizzate per la precompilazione dei dati.

Nell'esempio riportato in immagine, l'admin vuole recuperare i property name dei campi che compongono il nested form OC-ISEE (economic_situation_indicator)

Successivamente, apri la console del browser e clicca sull'icona di modifica della pagina. Nella console, cerca e clicca sull'output object per espanderlo: in questo modo, potrai ispezionare i valori (data) dei campi che compongono il nested form.

Elenco delle proprietà modificabili di un nested form

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
})

Obbligatorietà

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

window.FormioHelper.editFormProperties(instance, {
  sheet: {
    "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 "Subalterno" nel form "OC - Immobili").

window.FormioHelper.editFormProperties(instance, {
  subunit: {
    "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": ""
  }
});

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
    }
});