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

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.

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

Operatore logico OR (||)

Il campo viene mostrato se almeno una condizione è vera.

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

Condizione “non mostrare”

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

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

Nell'esempio riportato stiamo dicendo: mostra il campo solo se il valore non è "modifica" e non è "cancellazione".

Controllo checkbox

Il campo compare solo se la checkbox è selezionata.

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.

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

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

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

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

Sostituisci select_boxes con la chiave API del tuo componente e aggiorna l'array keys con i valori delle opzioni da controllare.

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.

Visualizza la tabella che riporta i property name dei componenti che compongono i nested form a questo link.

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

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

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.

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.