# Componenti reattivi

## Panoramica

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

{% hint style="success" %}

## Componenti chiave

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 questo aiuta**

I componenti reattivi ti permettono di costruire pagine interattive dove gli utenti possono esplorare i dati in modo dinamico. Per esempio, cliccare un record in AX - Tabella dati può aggiornare automaticamente una AX - Mappa per mostrare la posizione di quel record, o filtrare una AX - Cronologia per mostrare attività correlate, tutto senza ricaricare la pagina o navigare altrove.

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

***

## Casi d'uso pratici

### Dettagli account dinamici con mappe

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

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

### Tabelle dati interconnesse

Imposta una Tabella dati Avonni per elencare gli account. Selezionando un account, una seconda Tabella dati si aggiorna per mostrare i contatti associati, consentendo una navigazione fluida attraverso grandi set di dati.

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

***

## Perché i Componenti reattivi sono importanti

I componenti reattivi permettono 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, portando a un'esperienza più coinvolgente e produttiva.&#x20;

***

## **Configurare i tuoi Componenti Avonni reattivi**

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

### **Cosa rende un componente “reattivo”?**

Un componente diventa reattivo collegando i suoi dati ad altri componenti, permettendo 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 di dati (componentApiName)

* Assegna un soprannome unico a ciascun componente nel Pannello Proprietà. Per esempio, nomina una Tabella dati che elenca gli account accountsDatatable.
* *Perché questo?* Il soprannome identifica il componente per la reattività, permettendo ad altri componenti di fare riferimento ai suoi dati
  {% endstep %}

{% step %}

#### Dì agli altri componenti come reagire

* Specifica quali componenti dovrebbero aggiornarsi quando un utente interagisce con un altro. Usa la seguente sintassi nelle proprietà del componente di destinazione:text`{{componentApiName.selectedRecord.componentFieldApiName}}`
* **Spiegazione:**
  * `componentApiName`: Il soprannome che hai assegnato (es., `accountsDatatable`).
  * `selectedRecord`: La riga o l'elemento che l'utente seleziona.
  * `componentFieldApiName`: Il campo specifico da visualizzare (es., `Nome`, `Industry`).
* *Perché questo?* Questa sintassi collega i dati selezionati (es., il `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 unico `componentApiName` 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 (es., `accountsDatatable`) abbia dati e che il `componentFieldApiName` corrisponda a un campo disponibile (es., `Nome`).

</details>

<details>

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

Controlla la presenza di 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 a <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>Impara a collegare una Tabella dati Avonni e una Mappa in Experience Site per visualizzare dinamicamente le posizioni basate sugli 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 con 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: 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/per-iniziare/componenti-reattivi.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.