> 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/creare-un-servizio/le-funzioni/fare-calcoli.md).

# Fare calcoli

Nella sezione "Data" di un componente testuale o numerico (ad esempio *Textfield*, *Text area* o *Number*) è possibile effettuare calcoli automatici in base al valore indicato in altri component.

Per farlo devi inserire nel campo "Calculated value" il codice JavaScript di calcolo corretto: il valore che assegni alla variabile `value` diventa il valore del componente.

<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%2FBt4CmeGkZkA7iyDXnfqR%2Fimage.png?alt=media&amp;token=3530d77c-940f-41fb-a07b-e1da0095deb5" alt=""><figcaption></figcaption></figure> <figure><img src="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FV4xmlVZLbv50edEZbDja%2FScreenshot%20(11).png?alt=media&amp;token=10d96b4f-f737-49d1-afcf-3da1fa21df72" alt=""><figcaption></figcaption></figure></div>

Di seguito trovi alcuni esempi di calcolo che puoi riutilizzare e adattare al tuo servizio.

<details>

<summary>Calcolare un punteggio per una graduatoria</summary>

Utile ad esempio per un servizio di iscrizione all'asilo nido o di richiesta di un bonus economico, dove le domande vengono ordinate in base al punteggio ottenuto.

{% stepper %}
{% step %}

### Individua i property\_name dei campi

Individua i campi del modulo che concorrono al punteggio (per esempio la percentuale d'invalidità o il valore ISEE): nella sezione "API" di ciascun componente trovi il *property name* da usare nel codice.

{% hint style="warning" %}
Se il valore che concorre al punteggio è annidato dentro a un Nested Form, come nel caso di "Importo ISEE" devi riportare il path completo del campo. Vedi [Struttura dei dati dei Nested Form](/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/i-nested-form.md#struttura-dei-dati)
{% endhint %}

<div><figure><img src="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FG0dEgtaCuy6gwCj3N3VS%2FScreenshot%202026-09-04%20alle%2018.39.02.png?alt=media&amp;token=51f9d582-d5a8-4c3c-a25f-4de2bf13dfc5" alt=""><figcaption></figcaption></figure> <figure><img src="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FPgNmqmVk96J3hVAbFAKY%2FScreenshot%202026-09-04%20alle%2018.39.23.png?alt=media&amp;token=eb9b17da-e639-47dd-8e10-8f14a2505338" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

### Campo "Punteggio"

Aggiungi un [textfield](/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/il-textfield.md) o un componente number con label "Punteggio" (e inserisci nella sezione "Data" il codice che somma i punti in base alle risposte.&#x20;

Colloca il componente "Punteggio" dopo tutti i campi che concorrono al calcolo, quindi verso la fine del modulo: solo così, nel momento in cui il punteggio viene calcolato, il cittadino avrà già valorizzato tutti i dati necessari.

<figure><img src="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FjhqJGRyZAyWJa4XETcQk%2Fimage.png?alt=media&amp;token=6a13fb3c-f15a-41bd-97b8-dd75021b2479" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Nell'esempio mostrato il punteggio si basa sui valori "Importo ISEE" (`data.ordinary_economic_situation_indicator?.data?.isee`) e su "Percentuale di disabilità" (`data.disability_percentage`).
{% endhint %}

```javascript
value = 0;

const raw = data.ordinary_economic_situation_indicator?.data?.isee;
if (raw !== undefined && raw !== null && raw !== '') {
  const isee = parseFloat(typeof raw === 'string' ? raw.replace(',', '.') : raw);
  if (!isNaN(isee)) {
    if (isee <= 5000) value += 50;
    else if (isee <= 10000) value += 40;
    else if (isee <= 15000) value += 30;
    else if (isee <= 20000) value += 20;
    else if (isee <= 25000) value += 10;
    else if (isee <= 30000) value += 5;
  }
}

if (data.minor_invalid === 'si') {
  if (data.disability_percentage === 'superiore68') value += 30;
  else if (data.disability_percentage === 'tra33e67') value += 20;
}
```

{% endstep %}

{% step %}

### Visualizzare il Punteggio

Puoi scegliere se mostrare il punteggio al cittadino o tenerlo nascosto: per nasconderlo, nella sezione "Display" del componente attiva la funzione "Hidden".
{% endstep %}
{% endstepper %}

</details>

<details>

<summary>Calcolare una differenza di giorni</summary>

Utile ad esempio per un servizio di occupazione temporanea del suolo pubblico, per calcolare i giorni di esposizione della segnaletica tra una data di inizio e una data di fine.

{% stepper %}
{% step %}

### Individua i property name dei campi

Individua i campi che indicano la data di inizio e la data di fine: nella sezione "API" di ciascun componente trovi il *property name* da usare nel codice.
{% endstep %}

{% step %}

### Crea il componente che calcola i giorni

Aggiungi un componente testuale o numerico e inserisci nella sua sezione "Data" il codice che calcola la differenza in giorni tra le due date.

{% hint style="info" %}
Puoi disabilitare il campo (voce "Disabled" nella sezione "Display"): trattandosi di un valore calcolato automaticamente, il cittadino non deve poterlo modificare.
{% endhint %}

```javascript
initialDate = moment(data.initial_date, 'DD/MM/YYYY')
finalDate = moment(data.final_date, 'DD/MM/YYYY')
value = finalDate.diff(initialDate, 'days')
```

{% endstep %}
{% endstepper %}

</details>

<details>

<summary>Calcolare una superficie totale</summary>

Utile quando il cittadino inserisce più misure in un Datagrid (per esempio profondità e lunghezza di un'area per l'occupazione di suolo pubblico) e serve calcolare automaticamente la superficie complessiva.

{% stepper %}
{% step %}

### Individua i property name dei campi

Individua i campi del Datagrid che compongono il calcolo (per esempio larghezza e profondità di ciascuna riga): nella sezione "API" di ciascun componente trovi il *property name* da usare nel codice.

<div><figure><img src="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FSuWWlHKxakWgFEPU0hxc%2FScreenshot%202026-09-04%20alle%2019.00.12.png?alt=media&amp;token=5b7722bc-2f7c-4543-a1fd-573ee412e37a" alt=""><figcaption></figcaption></figure> <figure><img src="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FHBswcHmVuZFuznPXGdKP%2FScreenshot%202026-09-04%20alle%2019.00.04.png?alt=media&amp;token=9757fc5f-8b72-4f5d-a706-6b8cb6a9cc63" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

### Crea il componente "Totale metri quadrati"

Aggiungi un componente Number con label "Totale metri quadrati" e inserisci nella sua sezione "Data" il codice che somma il prodotto di ciascuna riga del Datagrid.

<figure><img src="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FukHiECpWIMgyHxrwZymp%2Fimage.png?alt=media&amp;token=475594d5-0b2d-4855-ba64-4223d23ac856" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Puoi disabilitare il campo (voce "Disabled" nella sezione "Display"): trattandosi di un valore calcolato automaticamente, il cittadino non deve poterlo modificare.
{% endhint %}

Nell'esempio, il Datagrid `sides` raccoglie per ogni riga una larghezza (`span`) e una profondità (`depth`):

```javascript
if (data.sides?.length) {
  value = data.sides.reduce((sum, side) => {
    const span = side.span || 0;
    const depth = side.depth || 0;
    return sum + span * depth;
  }, 0);
}
```

{% endstep %}
{% endstepper %}

</details>


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.opencityitalia.it/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/le-funzioni/fare-calcoli.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.