# 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="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FIUx9ZRdkKt9HYUZeuQlK%2Fimage.png?alt=media&#x26;token=bbc93120-63d9-420e-96d1-966c4faf4653" 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”.&#x20;

Per i campi testuali ([*textfield*](https://docs.opencityitalia.it/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/il-textfield) 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="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FMjDYcuveotBNVAaO6Rjb%2Fimage.png?alt=media&#x26;token=5190e1c0-3cae-4289-b93b-24f930ebc1cb" alt=""><figcaption></figcaption></figure> <figure><img src="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2Fi1m0dICWjGMDVJRReJyp%2FScreenshot-10--05-22-2025_11_37_AM.png?alt=media&#x26;token=aa3ba1c6-1b33-4cfb-85e2-dbe9b487088d" 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 %}

### Usare le API - un esempio pratico

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

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="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FTsoXTiMJO0leTS30UkWj%2Fimage.png?alt=media&#x26;token=6cddc055-619b-4364-8d9c-8034cfe42677" alt=""><figcaption></figcaption></figure>