> 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/relazione-tra-i-dati-i-conditional.md).

# Relazione tra i dati: i conditional

Puoi costruire relazioni tra componenti o tra dati presenti all’interno di componenti. Una relazione può essere:

* semplice: la condizione di comparsa dipende da un solo componente o dato;
* avanzata: la condizione di comparsa dipende da più componenti o dati.

In questo modo puoi gestire i set di dati in modo tale che vengano visualizzati in base a come l'utente ha compilato la pratica.

{% hint style="info" %}
Per esempio, puoi mettere in relazione un componente “Scuole” e un componente “Classi” e alla selezione di una determinata scuola nel primo componente, il secondo mostra solamente le classi che fanno parte di quella scuola e non di altre.
{% endhint %}

## Condizionale semplice

Nella sezione "Conditional" di un componente devi indicare:

* se il componente deve o non deve apparire quando la condizione è vera (1);
* il componente a cui fare riferimento per la condizione (2);
* il vale da controllare dentro il componente indicato (3).

<figure><img src="/files/v2TgDk3Ahx7x4pL0ntVq" alt=""><figcaption><p>L'esempio riportato indica due date che devono comparire solo nel caso in cui il cittadino abbia indicato una durata temporanea del permesso di passo carrabile.</p></figcaption></figure>

{% hint style="info" %}
Nella maggior parte dei componenti, il valore (*value*) è indicato nella sezione “Data”.

Per i campi testuali ([*textfield*](/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/il-textfield.md) o *text area*), il valore è il dato inserito dall’utente in fase di compilazione.
{% endhint %}

## Condizionale avanzato

Nella sezione "Conditional", collocati alla voce "Advanced conditions" e inserisci la condizione in formato JavaScript.

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

{% hint style="info" %}
Nell'esempio riportato nelle due immagini, il codice JavaScript inserito prevede che il campo compaia nei casi in cui l'utente richieda la modifica o il rinnovo di un permesso esistente:
{% endhint %}

{% code overflow="wrap" %}

```javascript
show = (data.request_type === "rinnovo" || data.request_type === "modifica")
```

{% endcode %}

### Esempi di controlli per le condizioni avanzate

Come visto nella sezione precedente, per impostare una condizione avanzata è necessario scrivere una regola in formato JavaScript.

Queste condizioni permettono di controllare quando un componente deve essere mostrato o nascosto, e possono basarsi su uno o più valori inseriti dall’utente durante la compilazione del modulo.

Di seguito sono riportati alcuni esempi pratici di condizioni avanzate, utili come riferimento.

#### Operatore logico AND (&&)

Il campo viene mostrato solo se **tutte le condizioni sono vere**.

```javascript
show = (data.request_type === "modifica" && data.work_type === "disoccupato")
```

#### Operatore logico OR (||)

Il campo viene mostrato se **almeno una condizione è vera**.

```javascript
show = (data.request_type === "modifica" || data.request_type === "rinnovo")
```

#### Condizione “non mostrare”

Il campo viene mostrato solo quando **nessuna delle condizioni è vera**.

```javascript
show = !(data.request_type === "modifica" || data.request_type === "cancellazione")
```

{% hint style="info" %}
Nell'esempio riportato stiamo dicendo: mostra il campo solo se il valore non è "modifica" e non è "cancellazione".
{% endhint %}

#### Controllo checkbox

Il campo compare solo se la **checkbox è selezionata**.

```javascript
show = (data.accepted_by_user === true)
```

#### **Select boxes**

Il componente **select boxes** restituisce un oggetto in cui ogni opzione è una chiave con valore `true` o `false`, a seconda che sia selezionata o meno.

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

Il campo compare solo se **almeno una** delle opzioni indicate è selezionata.

```javascript
const keys = ['opzione1', 'opzione2'];
show = keys.some(k => data.select_boxes[k] === true);
```

Il campo compare se **tutte** le opzioni indicate sono selezionate contemporaneamente.

```javascript
const keys = ['opzione1', 'opzione2'];
show = keys.every(k => data.select_boxes[k] === true);
```

{% hint style="info" %}
Sostituisci `select_boxes` con la chiave API del tuo componente e aggiorna l'array `keys` con i valori delle opzioni da controllare.&#x20;
{% endhint %}

### Condizioni avanzate con i campi di un Nested Form

Quando una condizione avanzata riguarda campi all’interno di un Nested Form, è necessario recuperare il corretto percorso del campo per scrivere il `property_name`, poiché i dati sono strutturati in modo annidato.

{% hint style="info" %}
Visualizza la tabella che riporta i property name dei componenti che compongono i nested form a questo [link](/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/i-nested-form.md#struttura-dei-dati).
{% endhint %}

Vediamo ora un esempio pratico di utilizzo del percorso di un campo all’interno di una condizione avanzata.

Se, per esempio, vogliamo che un campo compaia solo se il richiedente è **femmina** e la richiesta è di tipo **“modifica”**, dobbiamo individuare il path del genere del richiedente (nella [tabella della struttura dati](/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/i-nested-form.md#struttura-dei-dati) del nested form) e il property\_name della richiesta.

La sintassi del genere del richiedente è: `data.applicant.data.gender.data.gender` .

La sintassi della richiesta è: `request_type`

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

La condizione avanzata da inserire su "Conditional" → "Advanced conditions" sarà:

```javascript
show = (data.applicant.data.gender.data.gender === "femmina" && 
data.request_type === "modifica")
```

### Usare le API - un esempio pratico

Puoi usare il condizionale avanzato anche in caso di [integrazione con API](/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/le-funzioni/popolare-un-form-con-dati-provenienti-da-api.md).

Nell'esempio riportato, il codice JavaScript riportato effettua una **verifica condizionale** sulla base di alcune categorie e tipi di strade, per determinare **se mostrare o meno un banner di errore.**

```javascript
const optionsToCheck = [
  "strade_circoscrizione_1",
  "strade_circoscrizione_2",
  "strade_circoscrizione_3",
  "strade_circoscrizione_4",
  "strade_circoscrizione_5",
  "strade_circoscrizione_6",
  "strade_circoscrizione_7",
  "strade_circoscrizione_8",
  "altre_strade_DS"
]

if (data.category !== "strade" || !optionsToCheck.includes(data.type.value)) {
  show = false
  return
}

async function fetchUrl(url, options = {}) {
  try {
    const response = await fetch(url, options);

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status} ${response.statusText}`);
    }
  
    const jsonData = await response.json();
    instance.root.streetOptions = jsonData.items.map(crc => crc.cod_circoscr_lavori)
    
  } catch (error) {
    console.error(`Fetch failed for ${url}:`, error.message);
    return { error: true, message: error.message };
  }
}

let savedStreet = instance.root.savedStreet
let streetOptions = instance.root.streetOptions

if (savedStreet !== data.address?.name) {
  const name = data.address?.name
  const url = `https://www.comune.verona.it/api/openapi/dataset/circoscrizioni?limit=50&matched_name=${name}&sortDir=asc`
  fetchUrl(url)
  instance.root.savedStreet = name
} else if (streetOptions) {
  const chosenOption = data.type?.value
  show = chosenOption && streetOptions.length > 0 && !streetOptions.some(option => chosenOption.includes(option))
}
```

Questo codice verifica che la categoria sia `"strade"` e che il tipo sia uno di quelli previsti e controlla se la **strada selezionata corrisponde** a una delle circoscrizioni valide restituite dall'API.

Se **non** corrisponde a nessuna, allora imposta `show = true`, per mostrare un avviso che avverte il cittadino.

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


---

# 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/relazione-tra-i-dati-i-conditional.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.