# 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](/experience-cloud/experience-cloud-it/experience-components/ax-tabella-dati.md), [Elenco](/experience-cloud/experience-cloud-it/experience-components/ax-elenco.md), [Mappa](/experience-cloud/experience-cloud-it/experience-components/ax-mappa.md), [Timeline](/experience-cloud/experience-cloud-it/experience-components/ax-timeline.md) 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="/files/a21c123bdc21b54de14b0cab2428d8321ac28281" 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="/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 capacità di rendere ogni interazione sul tuo sito connessa e mirata.&#x20;

Buona creazione!


---

# Agent Instructions: 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:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/tutorial/componenti-reattivi/guida-allimplementazione.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.