> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/tutorial/reactive-components/guide-to-implementing.md).

# Guida all'implementazione

## **Guida all’implementazione della reattività nei componenti Avonni**

Trasforma i tuoi componenti Avonni in un’esperienza dinamica e interattiva con la nostra guida alla configurazione di componenti dati reattivi. Questo tutorial ti guiderà attraverso il processo, assicurando che i tuoi componenti visualizzino i dati e reagiscano alle interazioni dell’utente in tempo reale.

{% hint style="info" %}
I componenti di esperienza dati pronti alla reattività sono: il [Tabella dati](/experience-cloud/experience-cloud-it/experience-components/ax-data-table.md), [Elenco](/experience-cloud/experience-cloud-it/experience-components/ax-list.md), [Mappa](/experience-cloud/experience-cloud-it/experience-components/ax-map.md), [Cronologia](/experience-cloud/experience-cloud-it/experience-components/ax-timeline.md) e il Blocco di testo Avonni.
{% endhint %}

### Passaggio 1: Assegnare i nomi API ai tuoi componenti dati

Inizia assegnando a ciascuno dei tuoi componenti dati un identificatore univoco, noto come nome API. Questo nome funge da punto di riferimento, consentendo alle diverse parti della tua pagina di comunicare.

* **Ad esempio**:
  * Se stai lavorando con un componente Tabella dati, puoi chiamarlo `accountsDatatable`.

<figure><img src="/files/a21c123bdc21b54de14b0cab2428d8321ac28281" alt=""><figcaption></figcaption></figure>

### Passaggio 2: Configurare espressioni reattive nei componenti di destinazione

Poi, decidi dove vuoi che compaiano i dati interattivi. Potrebbe essere all'interno di un Blocco di testo, in un'altra Tabella dati o in qualsiasi componente che visualizzi dati. Qui userai espressioni reattive per indicare al componente quali dati mostrare e quando nel menu filtro.

* **Il formato dell'espressione reattiva**: Usa il formato `{{componentApiName.selectedRecord.componentFieldApiName}}` per collegare i tuoi componenti.
  * `componentApiName`: Qui inserisci il nome API del tuo componente dati (come quello `accountsDatatable` che hai chiamato sopra).
  * `componentFieldApiName`: Si riferisce al campo specifico del record che vuoi visualizzare (per esempio, `Nome` oppure `Industry`).
* **Ad esempio**:
  * Per visualizzare il campo 'Name' di un record selezionato dal tuo `accountsDatatable`, usa `{{accountsDatatable.selectedRecord.Name}}`.
  * Per visualizzare il campo 'Industry' della stessa selezione, usa `{{accountsDatatable.selectedRecord.Industry}}`.

### Casi d’uso pratici:

1. **Mappe interattive per la visualizzazione degli account**:
   * Supponiamo che tu abbia una mappa interattiva contrassegnata come `accountMap`. Quando un utente seleziona una posizione, puoi visualizzare il nome dell’account in un Blocco di testo usando un’espressione come `{{accountMap.selectedRecord.Name}}`. In questo modo il nome dell’account selezionato appare dinamicamente in base all’interazione dell’utente.
2. **Tabelle dati sincronizzate per account e contatti**:
   * Immagina di avere una tabella che mostra gli account (`accountsDatatable`) e un’altra che mostra i contatti correlati (`contactsDatatable`).
   * Puoi configurare il `contactsDatatable` per reagire alle selezioni nel `accountsDatatable`. Ad esempio, per visualizzare il nome del contatto associato all’account selezionato, usa `{{accountsTable.selectedRecord.Id}}`.

<figure><img src="/files/dd89c044f91437701b35af8b3daaa6bbdf629cb0" alt=""><figcaption></figcaption></figure>

Questi passaggi trasformeranno i tuoi componenti statici in un’esperienza ricca e reattiva, rendendo le tue applicazioni web più intuitive e facili da usare. La potenza dei dati reattivi risiede nella loro capacità di far sembrare ogni interazione sul tuo sito connessa e significativa.

Buon sviluppo!


---

# 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.avonnicomponents.com/experience-cloud/experience-cloud-it/tutorial/reactive-components/guide-to-implementing.md?ask=<question>&goal=<endgoal>
```

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