> For the complete documentation index, see [llms.txt](https://docs.opencityitalia.it/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.opencityitalia.it/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/le-funzioni/modificare-i-campi-di-un-nested-form.md).

# Modificare i campi di un Nested Form

Attraverso la [sezione Logic](/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/le-funzioni/impostare-delle-azioni-automatiche-le-logiche.md) è 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

<figure><img src="/files/84cuIFHajDQsVz8daf10" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/wKDPLSa9pnim1OiyYbqF" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/gDWbjoptAy48aWPltcIG" alt=""><figcaption></figcaption></figure>

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.

<div><figure><img src="/files/upfSRpWtwjMRobAyqUxe" alt=""><figcaption></figcaption></figure> <figure><img src="/files/n6edexgNPjsyX4yzM5kB" alt=""><figcaption></figcaption></figure></div>

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

<figure><img src="/files/nWUPy4YvaGBxVmVwzxhl" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/l4rPzVR7zWJNyhxO3aZ0" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/CdpFRKTEg1LMG5FuSleA" alt=""><figcaption></figcaption></figure>

## 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](/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/le-funzioni/precompilazione-dei-dati.md#tabella-di-configurazione-del-once-only).
{% endhint %}

<figure><img src="/files/Dc286UoFRWYJRi3jzjaC" alt=""><figcaption></figcaption></figure>

{% 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.

<div data-full-width="true"><figure><img src="/files/OQgA6j1vGV5SWZ8tk6uR" alt=""><figcaption></figcaption></figure> <figure><img src="/files/VzGuf06POqrQbvVIkhF7" alt=""><figcaption></figcaption></figure></div>

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

<details>

<summary>Obbligatorietà</summary>

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`**.

<div data-full-width="true"><figure><img src="/files/wRA5mnnvUrwr6yB3oPIc" alt=""><figcaption></figcaption></figure> <figure><img src="/files/Os0RtDYmDp8zndntx7NE" alt=""><figcaption></figcaption></figure></div>

</details>

<details>

<summary>Etichetta</summary>

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",
  }
});
```

<div data-full-width="true"><figure><img src="/files/G8E7QzSoneArow0m98fF" alt=""><figcaption></figcaption></figure></div>

</details>

<details>

<summary>Visibilità del componente</summary>

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

<div data-full-width="true"><figure><img src="/files/g7sW8pRFjuZFw3dFaUxm" alt=""><figcaption></figcaption></figure> <figure><img src="/files/dCSlaJlPYV8YGwN6EKoA" alt=""><figcaption></figcaption></figure></div>

</details>

<details>

<summary>Suffisso e prefisso di un campo</summary>

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"
  },
});
```

<div data-full-width="true"><figure><img src="/files/JhktEuIhBgYG3US5Q5qn" alt=""><figcaption></figcaption></figure></div>

Per nascondere il suffisso di un campo, inserisci:

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

<figure><img src="/files/iPjfqioHrWe01MxyUiJ5" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/fgnHdUXcvFU7VNBfaglq" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary>Tooltip di un campo</summary>

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",
  }
});
```

<div data-full-width="true"><figure><img src="/files/luhxj5OoqaLkJRvYeSO7" alt=""><figcaption></figcaption></figure></div>

Per nascondere invece il tooltip di un campo, inserisci:

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

<div data-full-width="true"><figure><img src="/files/SmhxOXzfzXKDFf2e7j9P" alt=""><figcaption></figcaption></figure></div>

</details>

<details>

<summary>Descrizione di un campo</summary>

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",
  }
});
```

<div data-full-width="true"><figure><img src="/files/YOlq45GnNn7IJ8RjOZ6v" alt=""><figcaption></figcaption></figure></div>

Per nascondere invece la descrizione di un campo, inserisci:

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

<div data-full-width="true"><figure><img src="/files/4gmurmzS33gY7XRymbVx" alt=""><figcaption></figcaption></figure></div>

</details>

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

<div data-full-width="true"><figure><img src="/files/7yJvMuXsNYqfaARaTkNP" alt=""><figcaption></figcaption></figure></div>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.opencityitalia.it/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/le-funzioni/modificare-i-campi-di-un-nested-form.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.