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.

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.

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

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.

Nella maggior parte dei componenti, il valore (value) è indicato nella sezione “Data”.

Per i campi testuali (textfield o text area), il valore è il dato inserito dall’utente in fase di compilazione.

Condizionale avanzato

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

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:

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

Usare le API - un esempio pratico

Puoi usare il condizionale avanzato anche in caso di integrazione con 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.

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.