# Modificare i campi di un Nested Form
Attraverso la [sezione Logic](https://docs.opencityitalia.it/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/le-funzioni/impostare-delle-azioni-automatiche-le-logiche) è 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])`
{% hint style="info" %}
Le chiavi API corrispondono a quelle utilizzate per la [precompilazione dei dati](https://docs.opencityitalia.it/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/precompilazione-dei-dati#tabella-di-configurazione-del-once-only).
{% endhint %}
{% hint style="info" %}
Nell'esempio riportato in immagine, l'admin vuole recuperare i property name dei campi che compongono il nested form OC-ISEE (`economic_situation_indicator`)
{% endhint %}
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:
```javascript
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").
```javascript
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").
```javascript
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").
```javascript
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](#configura-la-logica))
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").
```javascript
window.FormioHelper.editFormProperties(instance, {
volume: {
"prefix": "volumetria",
"suffix": "metri cubi"
},
});
```
Per nascondere il suffisso di un campo, inserisci:
```javascript
window.FormioHelper.editFormProperties(instance, {
volume: {
"suffix": "",
}
});
```
Per nascondere il prefisso di un campo, invece, inserisci:
```javascript
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").
```javascript
window.FormioHelper.editFormProperties(instance, {
sheet: {
"tooltip": "Numero di una porzione di territorio nel catasto comunale",
}
});
```
Per nascondere invece il tooltip di un campo, inserisci:
```javascript
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").
```javascript
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:
```javascript
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
```javascript
window.FormioHelper.editFormProperties(instance, {
"address.street_address": {
"validate.required": false
}
});
```
.png?alt=media&token=7fddef31-2fc0-4197-9b64-4fb28d3df1b7)
.png?alt=media&token=3617bc30-76c3-454f-927e-850569522f89)
.png?alt=media&token=b5580f79-081c-4675-a259-00a75c8b9695)
.png?alt=media&token=adba5afa-886f-4f95-b23d-1cb1638c558d)
.png?alt=media&token=6f7bc659-2d29-429b-90be-11e96589e9e5)
.png?alt=media&token=7445a035-2e22-4c05-99cd-1be321e943fb)
.png?alt=media&token=f68b685b-77f3-4440-8fe4-d12a91677a41)
.png?alt=media&token=026e2bca-4869-42f9-92d7-00beab070d0a)
.png?alt=media&token=4eda8658-69ea-41e8-8750-c132508c764b)
.png?alt=media&token=5f96395f-1fa8-468c-ae2c-f156245d58a3)
.png?alt=media&token=cff00973-41dd-44cd-8aca-8c08b7519fa6)
.png?alt=media&token=35f55301-9fa3-4ed1-aceb-8ea20c0c10f7)
.png?alt=media&token=6e81e23e-64c5-4ad8-ba23-a805a338da05)
.png?alt=media&token=4efbe2d1-3f1a-4680-9176-71782ce06e1d)
.png?alt=media&token=8045a54e-5693-4f1b-8195-b6ec8c717bfc)