# AX - Tabella dati

## Panoramica

**AX - Tabella Dati** è un componente di Experience Cloud che mostra i tuoi record Salesforce in una tabella interattiva nelle pagine dei siti Experience (ex Community Cloud).

Usalo per mostrare agli utenti del portale dataset filtrati con pieno controllo su colonne, ordinamento, ricerca e paginazione. Estrai i record da qualsiasi oggetto standard o personalizzato e consenti agli utenti esterni di visualizzare, cercare e interagire con i dati pertinenti al loro account o profilo.

Perfetto per i portali clienti che mostrano la cronologia ordini, per i portali partner che visualizzano la cronologia ordini, per i portali partner che mostrano record condivisi o per i siti self-service in cui gli utenti devono trovare e visualizzare i propri dati.

{% hint style="success" %}
Avonni Data Table è un [Componente Dati Reattivo](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/per-iniziare/componenti-reattivi)
{% endhint %}

***

## Per iniziare

Usa questo semplice tutorial per imparare le basi del componente Data Table e iniziare a creare i tuoi casi d'uso.

{% @arcade/embed flowId="oAo6XOMWRBc7Vn4Y9XNd" url="<https://app.arcade.software/share/oAo6XOMWRBc7Vn4Y9XNd>" %}

***

## Tutorial

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Crea un pulsante Esporta in nella Data Table</strong></td><td><a href="https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/experience-cloud-components/create-an-export-to-button-on-the-data-table">Create an Export To button on the Data Table</a></td></tr><tr><td><strong>Configurazione della Data Table</strong></td><td><a href="https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/experience-cloud-components/configuring-the-avonni-data-table">Configuring the Avonni Data Table</a></td></tr><tr><td><strong>Visualizzare i file Salesforce CMS in una Data Table</strong></td><td><a href="../tutorial/componenti/tabella-dati/visualizzazione-dei-file-salesforce-cms-in-una-tabella-dati">visualizzazione-dei-file-salesforce-cms-in-una-tabella-dati</a></td></tr></tbody></table>

***

## Collega la tua Data Table ai dati Salesforce

### Origine dati

La sezione Origine dati è il punto in cui colleghi Avonni Data Table ai tuoi dati Salesforce. Hai due opzioni.

<table><thead><tr><th>Tipo di origine dati</th><th width="250.33333333333331">Descrizione</th><th>Caso d'uso</th></tr></thead><tbody><tr><td><strong>Origine dati manuale</strong></td><td>Inserisci manualmente i dati nella tabella dati.</td><td>Ideale per dati non dinamici, test e demo.</td></tr><tr><td><strong>Query</strong></td><td>Crea una query per compilare automaticamente la tabella con i dati Salesforce.</td><td>Adatto per dataset dinamici, in tempo reale e di grandi dimensioni.</td></tr><tr><td><strong>Raccolta CMS</strong></td><td>Visualizza senza problemi le tue raccolte CMS all'interno delle Data Table per aggiornamenti dinamici dei contenuti.</td><td>Crea automaticamente elenchi di risorse o feed di notizie aggiornati.</td></tr></tbody></table>

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F3PwcU320If3fDaiBQLyt%2F2024-05-06_10-20-35.png?alt=media&#x26;token=fcf364f1-14a1-4421-ab0b-9b360c71ec68" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
In modalità Query, i dati vengono mostrati in batch di 25 record per mantenere prestazioni ottimali del sito.
{% endhint %}

### Configurazione delle mappature dati

Dai vita alla tua tabella dati nella sezione Mappature dati definendo e personalizzando le sue colonne.

<details>

<summary>Condivisione del modello dati con Avonni Data Table</summary>

**Aderenza alle regole di condivisione dei dati Salesforce:**

* **Rispetto delle impostazioni dell'organizzazione:** I componenti Avonni sono pienamente conformi alle configurazioni esistenti di condivisione dei dati e alle impostazioni di accesso della tua organizzazione Salesforce.
* **Politica di non interferenza:** Questi componenti non modificano né influenzano in alcun modo le tue regole di condivisione dei dati preesistenti.
* **Visibilità e accesso controllati:** La possibilità di visualizzare e interagire con i record tramite i componenti Avonni è governata dalle impostazioni di condivisione definite dalla tua organizzazione e dai permessi utente

</details>

#### Aggiunta di colonne

* Fai clic sul pulsante 'Aggiungi colonne' per selezionare i campi dalla tua origine dati da visualizzare come colonne nella tabella dati.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FE2cKSG6IyYXg6PT5EEU1%2F2023-12-10_20-56-54.png?alt=media&#x26;token=46cc7e51-eb28-4925-9842-50b3d91255bf" alt=""><figcaption></figcaption></figure>

* Questa sezione determina quali dati sono visibili e come sono organizzati nella tua tabella.
* Fai clic su una colonna per accedere a tutte le proprietà di quella colonna specifica.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FNlSXCo4bj0fPee0FFPtt%2F2023-12-10_20-58-01.png?alt=media&#x26;token=b0626d49-1d47-42be-a092-08baf64024ef" alt=""><figcaption></figcaption></figure>

#### Configurazione delle proprietà delle colonne

* **Tipo di dato:** Regola il tipo di visualizzazione del campo (ad es. testo, numero, data) per garantire una corretta rappresentazione dei dati.
* **Linkify:** Abilita il collegamento dei dati della cella ad altri record o URL per una navigazione rapida.
* **Attributi della cella:** Personalizza l'allineamento e le icone delle celle per creare una tabella più intuitiva e visivamente accattivante.
* **Modificabile:** Decidi se una colonna deve essere modificabile direttamente nella tabella.
* **Filtrabile e ricercabile:** Abilita il filtraggio e la ricerca per colonna per una gestione efficiente dei dati.
* **Nascosto:** Scegli di nascondere alcune colonne, utile per dati sensibili o meno rilevanti.
* **Ordinabile:** Consenti agli utenti di ordinare i dati in base alla colonna specificata.
* **Nascondi azioni predefinite:** Scegli di nascondere le azioni preimpostate per un aspetto più pulito.
* **A capo del testo:** Abilita il testo a capo per una migliore leggibilità nelle colonne strette.
* **Imposta larghezza colonna:** Specifica la larghezza di ciascuna colonna per ottenere un layout equilibrato e ordinato.

#### Aggiunta di azioni di riga

Ecco un tutorial interattivo guidato su come aggiungere azioni di riga alla Data Table.

{% @arcade/embed flowId="db617gnzKCL8QA22aziq" url="<https://app.arcade.software/share/db617gnzKCL8QA22aziq>" %}

***

## Altre impostazioni di configurazione

### Impostazioni di base

**Nascondi intestazione tabella**

* Questa opzione ti consente di rimuovere l'intestazione della tabella per un aspetto più pulito e minimalista.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FqSHMEKEbljIMwDFR7JQw%2F2023-12-10_21-00-20.png?alt=media&#x26;token=2a5788ad-e9d1-421c-a1a8-159567f6a6d4" alt=""><figcaption></figcaption></figure>

**Nascondi colonne checkbox**

* Abilita questa impostazione per nascondere le colonne checkbox, solitamente usate per la selezione delle righe in scenari multi-azione.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FBSnbhKLYW291nhWopETy%2F2023-12-10_21-01-29.png?alt=media&#x26;token=e156517b-4d21-4a1c-bbe3-3acc91e8f267" alt=""><figcaption></figcaption></figure>

**Mostra colonna numero di riga**

* Attivala per visualizzare una colonna che numeri ciascuna riga, utile per un facile riferimento ai dati.

### Configurazione intestazione

**Titolo e sottotitolo**

* Personalizza l'intestazione con un titolo e un sottotitolo per fornire contesto o informazioni riepilogative sui dati della tabella.

**Nome e dimensione icona**

* Valorizza l'intestazione con un'icona, selezionandone tipo e dimensione per un'enfasi visiva.

**È unita**

* Questa impostazione determina se l'intestazione è visivamente collegata al corpo della tabella, influenzando il design complessivo.

**Azioni dell'intestazione**

* Configura azioni (aggiungi, elimina o funzioni personalizzate) direttamente accessibili dall'intestazione della tabella.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FdlHeul0BOJuSLxlwxlrr%2F2023-12-05_08-55-05.png?alt=media&#x26;token=7569d3b6-f011-41fe-85cd-44eba513cced" alt=""><figcaption></figcaption></figure>

### Pulsanti azione nell'intestazione

* Implementa pulsanti di azione nell'intestazione della tabella per aggiungere nuovi record, esportare dati o altre azioni personalizzate, migliorando l'interazione e l'efficienza dell'utente.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FpflegSFq3ppt9e1bFJpT%2F2023-12-05_09-00-09.png?alt=media&#x26;token=33633798-ff4e-4812-8075-71ba4deafbed" alt=""><figcaption></figcaption></figure>

#### Configura l'interazione sul pulsante

Configura l'interazione quando gli utenti premono il pulsante di azione dell'intestazione nella sezione 'On Click'. Per capire come funziona l'interazione 'Navigate', [clicca qui](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/pannello-delle-proprieta/interazioni/naviga) per maggiori informazioni.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FP3G4hQaPYgAYh4qxlE6V%2F2023-12-10_21-05-18.png?alt=media&#x26;token=2617f41f-3045-4cf0-83e2-5ae3455deef4" alt=""><figcaption></figcaption></figure>

#### Tutorial

{% content-ref url="<https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/experience-cloud-components/create-an-export-to-button-on-the-data-table>" %}
[Create an Export To button on the Data Table](https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/experience-cloud-components/create-an-export-to-button-on-the-data-table)
{% endcontent-ref %}

### Attributi di paginazione

* Configura le impostazioni di paginazione, come il numero di elementi per pagina e lo stile di paginazione, per gestire come i dati vengono visualizzati e consultati nelle tabelle più grandi.

{% hint style="info" %}
In modalità Query, i dati vengono visualizzati in set di 25 record per mantenere prestazioni ottimali del sito. Pertanto, configurare la paginazione può essere vantaggioso.
{% endhint %}

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FTYV8JFlB7hI8aXbiio5z%2F2023-12-05_09-16-35.png?alt=media&#x26;token=fcd3ecdc-5c47-4ae2-8140-947a219bd9b9" alt=""><figcaption></figcaption></figure>

### Configurazione del motore di ricerca

* **Segnaposto:** Imposta un testo segnaposto per la casella di ricerca per guidare gli utenti su cosa possono cercare.
* **Posizione:** Scegli la posizione della casella di ricerca all'interno del layout della tabella per un'accessibilità ottimale.
* **Valore di ricerca predefinito:** Predefinisci un valore di ricerca per filtrare i dati della tabella al caricamento.

{% hint style="info" %}
Per visualizzare la casella di ricerca, almeno una colonna deve essere contrassegnata come 'Ricercabile'.
{% endhint %}

<div><figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FNxORNYAA6GqNWdTGaNvL%2F2023-12-05_08-56-31.png?alt=media&#x26;token=4dcc78d0-e09b-4058-a130-da98a081cbe1" alt=""><figcaption></figcaption></figure> <figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FjwElPRwuNrGJbdSHAdZO%2F2023-12-05_08-57-12.png?alt=media&#x26;token=9145311c-b2b7-49f6-b82c-d1c721f9f77c" alt=""><figcaption><p>Almeno una colonna deve essere impostata su "Ricercabile" per visualizzare la casella di ricerca.</p></figcaption></figure></div>

## Impostazioni

{% tabs %}
{% tab title="🎛️ Generale" %}

| Nome                                              | Descrizione                                                                                          |
| ------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| **Nascondi intestazione tabella**                 | Attiva per nascondere l'intestazione della tabella                                                   |
| **Nascondi colonna checkbox**                     | Rimuovi la colonna usata per le caselle di selezione delle righe                                     |
| **Mostra colonna numero di riga**                 | Mostra una colonna con il numero della riga                                                          |
| **Offset numero riga**                            | Imposta il numero iniziale per la numerazione delle righe                                            |
| **Selezione massima righe**                       | Limita il numero massimo di righe selezionabili                                                      |
| **Nascondi barra inferiore**                      | Nascondi la barra inferiore, solitamente usata per le azioni e la visualizzazione delle informazioni |
| **Mostra numero di elementi selezionati**         | Mostra il conteggio degli elementi attualmente selezionati                                           |
| **Sola lettura**                                  | Rendi la tabella non interattiva, impedendo modifiche o selezioni                                    |
| **Consenti modifica su tutte le colonne**         | Abilita la modifica per tutte le colonne                                                             |
| **Consenti filtro su tutte le colonne**           | Abilita le opzioni di filtro per tutte le colonne                                                    |
| **Consenti a capo su tutte le colonne**           | Consenti il testo a capo in tutte le colonne                                                         |
| **Nascondi azioni predefinite**                   | Nascondi azioni predefinite come modifica o eliminazione                                             |
| **Modalità larghezze colonne**                    | Scegli tra 'fixed' o 'auto' per l'impostazione della larghezza delle colonne                         |
| **Larghezza massima/minima colonna**              | Imposta limiti massimi e minimi per le larghezze delle colonne                                       |
| **Numero massimo di righe per il testo a capo**   | Definisci il numero massimo di righe per il testo a capo nelle celle                                 |
| **Ridimensionamento colonna disabilitato**        | Disabilita la possibilità di ridimensionare le colonne                                               |
| **Passo di ridimensionamento**                    | Imposta l'incremento per il ridimensionamento delle colonne                                          |
| **Direzione ordinamento/ordinamento predefinito** | Scegli 'asc' o 'desc' per la direzione iniziale dell'ordinamento                                     |
| **Mostra ordinato per valore**                    | Mostra quale colonna viene attualmente usata per l'ordinamento                                       |
| **Titolo/sottotitolo intestazione**               | Imposta un titolo e un sottotitolo per l'intestazione della tabella                                  |
| **Nome/dimensione icona intestazione**            | Aggiungi un'icona all'intestazione con dimensione personalizzabile                                   |
| **L'intestazione è unita**                        | Scegli di collegare visivamente l'intestazione al corpo della tabella                                |
| **Nascondi/disabilita azioni intestazione**       | Controlla visibilità e interattività delle azioni dell'intestazione                                  |
| **Pulsanti azione visibili nell'intestazione**    | Specifica quali pulsanti di azione sono visibili nell'intestazione                                   |
| **Azioni dell'intestazione**                      | Aggiungi azioni personalizzate all'intestazione della tabella                                        |
| {% endtab %}                                      |                                                                                                      |

{% tab title="⏩️ Paginazione e ricerca" %}

### Attributi di paginazione

| Nome                              | Descrizione                                            |
| --------------------------------- | ------------------------------------------------------ |
| **Mostra paginazione**            | Attiva la visualizzazione dei controlli di paginazione |
| **Numero di elementi per pagina** | Imposta quanti elementi visualizzare per pagina        |

### Opzioni contenitore pillole

* Mostra un contenitore per gli elementi selezionati, spesso usato con la selezione delle righe.

### Opzioni motore di ricerca

| Nome                              | Descrizione                                              |
| --------------------------------- | -------------------------------------------------------- |
| **Segnaposto**                    | Imposta il testo segnaposto per l'input di ricerca       |
| **Posizione**                     | Definisci la posizione della barra di ricerca            |
| **Valore di ricerca predefinito** | Precompila la barra di ricerca con un valore predefinito |
| {% endtab %}                      |                                                          |

{% tab title="🗄️ Filtraggio e origine dati" %}

| Nome                      | Descrizione                                                                                                          |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| **Opzioni di filtraggio** | Configura il filtraggio da visualizzare come popover per ciascuna colonna.                                           |
| **Origine dati**          | Seleziona tra 'manual' e 'query' per compilare i dati della tabella.                                                 |
| **Colonne**               | Definisci e aggiungi colonne alla tabella dati, personalizzando le proprietà e il comportamento di ciascuna colonna. |
| {% endtab %}              |                                                                                                                      |

{% tab title="🎨 Stile" %}

### Intestazione

| Nome                                     | Descrizione                                                                                               |
| ---------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| **Colore di sfondo**                     | Imposta il colore dello sfondo dell'intestazione.                                                         |
| **Colore del bordo**                     | Definisce il colore del bordo dell'intestazione.                                                          |
| **Dimensione bordo**                     | Regola lo spessore del bordo.                                                                             |
| **Stile bordo**                          | Seleziona lo stile (solido, puntinato, tratteggiato, ecc.) del bordo.                                     |
| **Raggio bordo**                         | Arrotonda gli angoli dell'intestazione.                                                                   |
| **Colore bordo inferiore (è unita)**     | Specifica il colore del bordo inferiore quando l'intestazione è visivamente unita al corpo della tabella. |
| **Dimensione bordo inferiore (è unita)** | Determina lo spessore del bordo inferiore unito.                                                          |
| **Stile bordo inferiore (è unita)**      | Imposta lo stile per il bordo inferiore unito.                                                            |
| **Padding e margine**                    | Controlla lo spazio interno (padding) e esterno (margin) dell'intestazione.                               |

### Titolo intestazione

| Nome                | Descrizione                                                         |
| ------------------- | ------------------------------------------------------------------- |
| **Colore**          | Imposta il colore del testo del titolo.                             |
| **Dimensione font** | Regola la dimensione del testo del titolo.                          |
| **Peso font**       | Altera il grassetto del testo del titolo.                           |
| **Stile font**      | Applica uno stile specifico (corsivo, normale) al testo del titolo. |

### Sottotitolo intestazione

| Nome                | Descrizione                                      |
| ------------------- | ------------------------------------------------ |
| **Colore**          | Definisce il colore del testo del sottotitolo.   |
| **Dimensione font** | Regola la dimensione del testo del sottotitolo.  |
| **Peso font**       | Controlla lo spessore del testo del sottotitolo. |
| **Stile font**      | Imposta lo stile del testo del sottotitolo.      |

### Icona intestazione

| Nome                              | Descrizione                                                 |
| --------------------------------- | ----------------------------------------------------------- |
| **Colore di sfondo**              | Imposta il colore di sfondo dell'icona.                     |
| **Colore in primo piano**         | Cambia il colore dell'icona stessa.                         |
| **Colore in primo piano utility** | Regola il colore utility per contrasto o enfasi.            |
| **Raggio bordo**                  | Arrotonda gli angoli dell'icona per un aspetto più morbido. |

### Contenitore pillole

| Nome                            | Descrizione                                                                                         |
| ------------------------------- | --------------------------------------------------------------------------------------------------- |
| **Colore sfondo pillola/hover** | Imposta il colore di sfondo degli elementi pillola, con un colore diverso al passaggio del mouse.   |
| **Colore testo pillola/hover**  | Cambia il colore del testo all'interno della pillola, con un colore diverso al passaggio del mouse. |
| **Interlinea pillola**          | Regola l'interlinea all'interno della pillola per l'allineamento del testo.                         |

### Avatar

| Nome                                    | Descrizione                                                                                                                                      |
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Adattamento oggetto immagine avatar** | Determina come l'immagine dell'avatar deve adattarsi al suo contenitore. Le opzioni includono 'fill', 'contain', 'cover', 'none' e 'scale-down'. |

### Pulsanti di paginazione

| Nome                      | Descrizione                                                                                           |
| ------------------------- | ----------------------------------------------------------------------------------------------------- |
| **Impostazioni di stile** | Personalizza l'aspetto dei pulsanti di paginazione, inclusi colore, dimensione e proprietà del bordo. |

### Piè di pagina

| Nome                 | Descrizione                                      |
| -------------------- | ------------------------------------------------ |
| **Colore di sfondo** | Imposta il colore di sfondo del piè di pagina.   |
| **Colore del bordo** | Definisce il colore del bordo del piè di pagina. |
| **Dimensione bordo** | Regola lo spessore del bordo.                    |
| **Stile bordo**      | Seleziona lo stile del bordo.                    |
| **Raggio bordo**     | Arrotonda gli angoli del piè di pagina.          |
| {% endtab %}         |                                                  |
| {% endtabs %}        |                                                  |

## Esempi di casi d'uso

### Esempio 1: elenco Account migliorato e contatti correlati

{% @arcade/embed flowId="sxcJn4NliMFN6qTRk5Mi" url="<https://app.arcade.software/share/sxcJn4NliMFN6qTRk5Mi>" %}

Offri ai tuoi partner un modo potente e intuitivo per esplorare i dati degli account, con ricerca inline, filtraggio e un pannello contatti in tempo reale che si aggiorna durante la navigazione.

***

#### **Cosa otterrai**

* **Elenco account ricercabile e filtrabile:** Consenti ai partner di trovare rapidamente gli account per nome o settore usando i controlli di ricerca e filtro integrati.
* **Record collegati in linea:** Rendi i nomi degli account cliccabili in modo che i partner possano passare direttamente alle pagine di dettaglio del record.
* **Pannello contatti correlati in tempo reale:** Visualizza una seconda tabella che si aggiorna automaticamente per mostrare i contatti associati all'account selezionato.
* **Risultati paginati:** Mantieni l'interfaccia pulita e performante limitando i record visibili per pagina.

***

#### **Prima di iniziare**

* **Layout pagina a due colonne:** Assicurati che la pagina Elenco Account in Experience Builder abbia già un layout a due colonne pronto a ricevere entrambi i componenti.

***

#### **Come configurarlo**

{% stepper %}
{% step %}

#### **Aggiungi la prima AX - Datatable alla tua pagina**

* Trascina un componente AX - Datatable nella colonna sinistra della pagina Elenco Account in Experience Builder.
  {% endstep %}

{% step %}

#### **Scegli un'origine dati**

* Seleziona **Query Accounts** come origine dati per questo componente.
  {% endstep %}

{% step %}

#### **Imposta le mappature dati**

* Aggiungi le seguenti colonne: Name, Industry, Owner.FullName e Phone.
* Abilita **Linkify** nella colonna Name in modo che i nomi degli account diventino link cliccabili.
* Imposta **Industry** come campo filtro.
* Imposta **Nome** come campo di ricerca.
  {% endstep %}

{% step %}

#### **Configura il componente**

* Imposta il **Nome API** su `AccountsTable`.
* Imposta **Selezione massima righe** su `1` in modo che possa essere selezionato un solo account alla volta.
* Abilita la paginazione e imposta il **Numero massimo di record** su `10`.
  {% endstep %}

{% step %}

#### **Personalizza l'intestazione**

* Imposta il **Titolo intestazione** su `Account`.
* Imposta il **Icona intestazione** su `standard:account_info`.
  {% endstep %}

{% step %}

#### **Aggiungi la seconda AX - Datatable alla tua pagina**

* Trascina un secondo componente AX - Datatable nella colonna destra della stessa pagina.
  {% endstep %}

{% step %}

#### **Scegli un'origine dati per la tabella contatti**

* Seleziona **Query Contacts** come origine dati.
* Aggiungi un filtro in modo che **AccountId** sia uguale a `{{AccountsTable.selectedRecord.Id}}`, collegando i risultati di questa tabella all'account attualmente selezionato.
  {% endstep %}

{% step %}

#### **Imposta le mappature dati**

* Aggiungi le seguenti colonne: Name e Title.
  {% endstep %}

{% step %}

#### **Configura il componente**

* Imposta il **Nome API** su `relatedContactsTable`.
  {% endstep %}

{% step %}

#### **Personalizza l'intestazione**

* Imposta il **Titolo intestazione** su `Contatti correlati`.
* Imposta il **Icona intestazione** su `standard:contact`.
  {% endstep %}

{% step %}

#### **Anteprima della pagina**

* Fai clic su Anteprima in Experience Builder, seleziona una riga dell'account e conferma che la tabella Contatti correlati si aggiorni dinamicamente per riflettere il record selezionato.
  {% endstep %}
  {% endstepper %}

***

#### **Link**

{% content-ref url="../tutorial/componenti-reattivi/tabelle-dati-collegate" %}
[tabelle-dati-collegate](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/tutorial/componenti-reattivi/tabelle-dati-collegate)
{% endcontent-ref %}

***

### Esempio 2: Opportunità correlate in una pagina Account

{% @arcade/embed flowId="tZa89LmaWt8n5CoQhwB8" url="<https://app.arcade.software/share/tZa89LmaWt8n5CoQhwB8>" %}

Offri agli utenti commerciali una vista d'insieme di ogni opportunità collegata a un account, proprio dove serve, senza mai lasciare la pagina del record.

***

#### **Cosa otterrai**

* **Vista customer 360 più ricca:** Mostra i dati chiave delle opportunità direttamente nella pagina Account, così gli utenti commerciali hanno una visione completa in un unico posto.
* **Pagine record completamente strutturate:** Crea pagine dense e ricche di informazioni che eliminano la necessità di passare tra schede o oggetti per gestire una pipeline.

***

#### **Prima di iniziare**

* **Pagina record Account con componenti esistenti:** Assicurati che la pagina record Account in Experience Builder includa già i dettagli del record, un banner e un layout a colonne pronto ad ospitare il nuovo componente.

***

#### **Come configurarlo**

{% stepper %}
{% step %}

#### **Aggiungi AX - Datatable alla tua pagina Account**

* Trascina un componente AX - Datatable nella pagina record Account in Experience Builder.
  {% endstep %}

{% step %}

#### **Scegli un'origine dati**

* Seleziona **Query Opportunities** come origine dati per questo componente.
  {% endstep %}

{% step %}

#### **Imposta le mappature dati**

* Aggiungi le seguenti colonne: Name, Stage e Amount.
* Abilita **Linkify** nella colonna Name in modo che i nomi delle opportunità diventino link cliccabili.
  {% endstep %}

{% step %}

#### **Configura il componente**

* Imposta il **Nome API** su `RelatedOpportunities`.
* Aggiungi un filtro in modo che **AccountId** sia uguale a `{!Item.id}`, limitando i risultati all'account attualmente visualizzato.
  {% endstep %}

{% step %}

#### **Personalizza l'intestazione**

* Imposta il **Titolo intestazione** su `Opportunità`.
* Imposta il **Stile intestazione** su `Titolo 2`.
* Imposta il **Icona intestazione** su `standard:opportunity`.
  {% endstep %}

{% step %}

#### **Anteprima della pagina**

* Fai clic su Anteprima in Experience Builder e vai a un record Account per confermare che nella tabella compaiano solo le opportunità correlate a quell'account.
  {% endstep %}
  {% endstepper %}