> 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/per-iniziare/reactive-components.md).

# Componenti reattivi

## Panoramica

I componenti reattivi si aggiornano automaticamente quando gli utenti interagiscono con il tuo Experience Site. Quando un utente fa clic o seleziona qualcosa in un componente, gli altri componenti connessi si aggiornano all'istante per mostrare informazioni correlate, creando un'esperienza fluida e interattiva.

{% hint style="success" %}

## Componenti principali

I componenti reattivi sono:

* [AX - Tabella dati](/experience-cloud/experience-cloud-it/experience-components/ax-data-table.md)
* [AX - ](/experience-cloud/experience-cloud-it/experience-components/ax-data-table.md)[Mappa](/experience-cloud/experience-cloud-it/experience-components/ax-map.md)
* [AX - ](/experience-cloud/experience-cloud-it/experience-components/ax-data-table.md)[Elenco](/experience-cloud/experience-cloud-it/experience-components/ax-list.md)
* [AX - ](/experience-cloud/experience-cloud-it/experience-components/ax-data-table.md)[Cronologia](/experience-cloud/experience-cloud-it/experience-components/ax-timeline.md)
* [AX - ](/experience-cloud/experience-cloud-it/experience-components/ax-data-table.md)[Blocco di testo](/experience-cloud/experience-cloud-it/experience-components/ax-text-block.md)
  {% endhint %}

### **Come aiuta**

I componenti reattivi ti permettono di creare pagine interattive in cui gli utenti possono esplorare i dati in modo dinamico. Ad esempio, fare clic su un record in AX - Tabella dati può aggiornare automaticamente una AX - Mappa per mostrare la posizione di quel record, oppure filtrare una AX - Timeline per mostrare le attività correlate, il tutto senza ricaricare la pagina o navigare.

Questo crea esperienze di portale più coinvolgenti, in cui le informazioni si aggiornano istantaneamente in base a ciò che gli utenti stanno visualizzando o selezionando

***

## Casi d'uso pratici

### Dettagli dinamici dell'account con le mappe

Configura una Mappa Avonni per visualizzare le posizioni degli account. Quando un utente seleziona una posizione, i dettagli correlati dell'account (ad es. nome, descrizione, settore) compaiono automaticamente in un Blocco di testo Avonni, offrendo un modo intuitivo per esplorare i dati.

<figure><img src="/files/80ed09a1594afdeca7753f24064f2baa129c5d21" alt=""><figcaption></figcaption></figure>

### Tabelle dati interconnesse

Imposta una Tabella dati Avonni per elencare gli account. La selezione di un account attiva l'aggiornamento di una seconda Tabella dati, che mostra i contatti associati, consentendo una navigazione fluida tra grandi set di dati.

<figure><img src="/files/2c9f57ed911f61f8e2f455d51b4fedfb326efa1b" alt=""><figcaption></figcaption></figure>

***

## Perché i componenti reattivi sono importanti

I componenti reattivi consentono al tuo Experience Site di rispondere e comunicare tra gli elementi, rendendolo più dinamico e facile da usare. Questa interattività aiuta i visitatori a scoprire e accedere alle informazioni in modo efficiente, offrendo un'esperienza più coinvolgente e produttiva.

***

## **Configurazione dei tuoi componenti reattivi Avonni**

Integra questi componenti reattivi nel tuo Experience Site con un processo di configurazione semplice per aumentare l'interattività:

### **Cosa rende un componente "reattivo"?**

Un componente diventa reattivo collegando i suoi dati ad altri componenti, consentendo aggiornamenti automatici in base alle azioni dell'utente. Questo si ottiene con due semplici passaggi

### Passaggi per abilitare la reattività

{% stepper %}
{% step %}

#### Assegna un nome ai tuoi componenti dati (componentApiName)

* Assegna a ciascun componente un nickname univoco nel Pannello Proprietà. Ad esempio, chiama accountsDatatable una Tabella dati che elenca gli account.
* *Perché questo?* Il nickname identifica il componente per la reattività, consentendo agli altri componenti di fare riferimento ai suoi dati
  {% endstep %}

{% step %}

#### Indica agli altri componenti come reagire

* Specifica quali componenti devono aggiornarsi quando un utente interagisce con un altro. Usa la seguente sintassi nelle proprietà del componente di destinazione:testo`{{componentApiName.selectedRecord.componentFieldApiName}}`
* **Scomposizione:**
  * `componentApiName`: Il nickname che hai assegnato (ad es., `accountsDatatable`).
  * `selectedRecord`: La riga o l'elemento selezionato dall'utente.
  * `componentFieldApiName`: Il campo specifico da visualizzare (ad es., `Nome`, `Industry`).
* *Perché questo?* Questa sintassi collega i dati selezionati (ad es., quelli di un account `Nome`) a un altro componente, attivando un aggiornamento automatico
  {% endstep %}
  {% endstepper %}

***

## Risoluzione dei problemi comuni

<details>

<summary><strong>I componenti non si aggiornano</strong></summary>

Assicurati che ogni componente abbia un `componentApiName` univoco e che la sintassi (`{{componentApiName.selectedRecord.componentFieldApiName}}`) sia inserita correttamente nelle proprietà del componente di destinazione.

</details>

<details>

<summary><strong>Nessun dato visualizzato</strong></summary>

Verifica che il componente sorgente (ad es., `accountsDatatable`) abbia dei dati e che il `componentFieldApiName` corrisponda a un campo disponibile (ad es., `Nome`).

</details>

<details>

<summary><strong>Ritardo della reattività</strong></summary>

Controlla se ci sono set di dati complessi; semplifica le query o riduci il numero di collegamenti reattivi per migliorare le prestazioni.

</details>

<details>

<summary><strong>Se i problemi persistono</strong></summary>

Contatta il nostro team di supporto all'indirizzo <support@avonni.com> per assistenza.

</details>

***

## **Esempi guidati**

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><a href="/pages/4c1f35cbc9a61012d0105ca42d20f9d1cdbb84da"><strong>Collegare Tabella dati e Mappa per posizioni dinamiche</strong></a></td><td>Scopri come collegare una Tabella dati Avonni e una Mappa in Experience Site per visualizzare dinamicamente le posizioni in base agli account selezionati dall'utente.</td><td><a href="/files/40ffaf51d14f24081548da9b277f4f1dec06de9d">/files/40ffaf51d14f24081548da9b277f4f1dec06de9d</a></td></tr><tr><td><a href="/pages/c4ee1770b891ed3c59613ddc8315f750467343c5"><strong>Tabelle dati collegate</strong></a></td><td>Scopri come collegare una Tabella dati Avonni per gli account a una Tabella Contatti, aggiornando dinamicamente la Tabella Contatti per mostrare solo i contatti dell'account selezionato</td><td><a href="/files/98c1a26ba426d31cc1ccde4fd657a3859058afb5">/files/98c1a26ba426d31cc1ccde4fd657a3859058afb5</a></td></tr></tbody></table>


---

# 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/per-iniziare/reactive-components.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.