# 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 per configurare componenti dati reattivi. Questo tutorial ti guiderà passo dopo passo, assicurando che i tuoi componenti mostrino i dati e rispondano alle interazioni dell'utente in tempo reale.

{% hint style="info" %}
I componenti dell'esperienza dati pronti per la reattività sono: il [Data Table](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/experience-components/ax-tabella-dati), [Elenco](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/experience-components/ax-elenco), [Mappa](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/experience-components/ax-mappa), [Timeline](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/experience-components/ax-timeline) e il Blocco di Testo Avonni.
{% endhint %}

### Passo 1: Assegnare 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, permettendo alle diverse parti della tua pagina di comunicare.

* **Per esempio**:
  * Se stai lavorando con un componente Data Table, puoi chiamarlo `accountsDatatable`.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FA1azYErbZk0m8nAPimi8%2F2024-01-29_21-22-15.png?alt=media&#x26;token=54501d17-7c8d-4c6b-b1b4-6a71168b8076" alt=""><figcaption></figcaption></figure>

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

Successivamente, decidi dove vuoi che appaiano i dati interattivi. Potrebbe essere all'interno di un Blocco di Testo, un altro Data Table o qualsiasi componente che visualizzi dati. Qui userai espressioni reattive per istruire il componente su quali dati mostrare e quando, nel menu dei filtri.

* **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 il `accountsDatatable` che hai nominato sopra).
  * `componentFieldApiName`: Si riferisce al campo specifico del record che vuoi visualizzare (per esempio, `Nome` o `Industry`).
* **Per esempio**:
  * Per mostrare il campo 'Name' di un record selezionato dal tuo `accountsDatatable`, usa `{{accountsDatatable.selectedRecord.Name}}`.
  * Per visualizzare il campo 'Industry' dalla 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 etichettata come `accountMap`. Quando un utente seleziona una posizione, puoi mostrare il Nome dell'Account in un Blocco di Testo usando un'espressione come `{{accountMap.selectedRecord.Name}}`. Questo garantisce che il nome dell'account selezionato appaia dinamicamente in base all'interazione dell'utente.
2. **Data Table 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 mostrare il nome del contatto associato all'account selezionato, usa `{{accountsTable.selectedRecord.Id}}`.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FrtipSKqwjQ5pxwb9xqpg%2F2024-01-29_21-37-28.png?alt=media&#x26;token=c4256efa-998c-437d-99fd-4152cc464312" 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 capacità di rendere ogni interazione sul tuo sito connessa e mirata.&#x20;

Buona creazione!