> 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/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/~/changes/207/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).

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.

{% hint style="info" %} Nella maggior parte dei componenti, il valore (*value*) è indicato nella sezione “Data”. Per i campi testuali ([*textfield*](/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/~/changes/207/creare-un-servizio/i-componenti/il-textfield-1.md) o *text area*), il valore è il dato inserito dall’utente in fase di compilazione. {% endhint %} Nel caso del componente **check-box**, il valore da controllare non è un testo inserito dall’utente ma uno stato booleano: * `true` → il check-box è selezionato; * `false` → il check-box non è selezionato. Per mostrare un componente quando il check-box viene selezionato, nella sezione **Has the value** bisogna inserire "true"
## Condizionale avanzato Nella sezione "Conditional", collocati alla voce "Advanced conditions" e inserisci la condizione in formato JavaScript.
{% 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](/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/~/changes/207/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.
--- # 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, and the optional `goal` query parameter: ``` GET https://docs.opencityitalia.it/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/~/changes/207/creare-un-servizio/le-funzioni/relazione-tra-i-dati-i-conditional.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.