# AX - Elenco

## Panoramica

**AX - Elenco** è un componente di Experience Cloud che visualizza i record di Salesforce come schede personalizzabili in layout a griglia o elenco nelle pagine dei siti Experience.

Usalo per mostrare agli utenti del portale insiemi di record filtrati, come i loro ordini, casi, contratti o qualsiasi dato correlato, con pieno controllo sui campi visualizzati su თითო scheda. Gli utenti possono cercare, filtrare, scorrere i risultati con la paginazione e fare clic sulle schede per navigare ai record. Recupera dati da qualsiasi oggetto standard o personalizzato in Experience Builder.

Perfetto per la cronologia degli ordini dei clienti, gli elenchi dei casi, le librerie di documenti, i cataloghi di prodotti o qualsiasi area in cui gli utenti del portale debbano sfogliare e cercare nei propri record Salesforce.

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

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fpt2IfBa0lYKIcPqkp9r4%2FAvonni%20Components%204.2.webp?alt=media&#x26;token=bfa921dd-9ffe-457d-a418-9bd6afe5a723" alt=""><figcaption></figcaption></figure>

## Configurazione dell'Elenco

Comprendere il processo di configurazione, in particolare le sezioni Origine Dati e Mappature, è fondamentale per utilizzare efficacemente l'Elenco.

### Configurazione dell'Origine Dati

La sezione Origine Dati è il punto in cui colleghi l'Avonni List ai tuoi dati Salesforce. Hai due opzioni di Origine Dati.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FbPNBH8BWbxiRQWP0nvC2%2F2024-02-04_15-01-30.png?alt=media&#x26;token=6d86abef-43ac-4b13-8490-d197f0fc154f" alt=""><figcaption></figcaption></figure>

| Tipo di Origine Dati     | Descrizione                                                                  | Caso d'uso                                                            |
| ------------------------ | ---------------------------------------------------------------------------- | --------------------------------------------------------------------- |
| **Origine Dati Manuale** | Inserisci manualmente l'Elenco nella tabella dati.                           | Ideale per dati non dinamici, test e demo.                            |
| **Query**                | Crea una query per compilare automaticamente l'Elenco con i dati Salesforce. | Adatto a set di dati dinamici, in tempo reale e di grandi dimensioni. |

### Configurazione delle Mappature Dati

Dai vita al tuo elenco nella sezione Mappature Dati definendolo e personalizzandolo.

* Fai clic sul pulsante '**Aggiungi Colonne**' per selezionare il campo che desideri visualizzare come etichetta nell'Elenco.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FsuXTMbmTsztyn3eSA11F%2F2024-02-04_14-49-35.png?alt=media&#x26;token=0b2c9073-24b6-477d-bbdd-d32f7987f043" alt=""><figcaption></figcaption></figure>

* Quindi, puoi incorporare elementi aggiuntivi insieme ai tuoi dati principali. Questo può includere componenti visivi come immagini, avatar o persino campi aggiuntivi per fornire più contesto o dettagli a ogni elemento dell'elenco.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fc32Ky8kXM5Bec7yYKlV1%2F2024-02-04_14-52-53.png?alt=media&#x26;token=a9b956a2-f67f-4f5e-bdcc-f389ada8ecd7" alt=""><figcaption></figcaption></figure>

### Configurazione dell'aspetto

#### Configurazione del Separatore degli Elementi

La funzionalità Separatore degli Elementi è progettata per migliorare la struttura visiva del tuo elenco introducendo divisori tra gli elementi. Questo attributo ti consente di personalizzare il modo in cui ogni elemento dell'elenco è separato dagli altri.

<table><thead><tr><th width="125.33333333333331">Separatore</th><th width="309">Descrizione</th><th>Illustrazione</th></tr></thead><tbody><tr><td><strong>In alto</strong></td><td>Ti consente di posizionare un separatore nella parte superiore di ogni elemento dell'elenco.</td><td><img src="broken-reference" alt=""></td></tr><tr><td><strong>In basso</strong></td><td>Aggiunge una linea di separazione nella parte inferiore di ogni elemento dell'elenco.</td><td><img src="broken-reference" alt=""></td></tr><tr><td><strong>Intorno</strong></td><td>Posiziona linee di separazione sia sopra sia sotto ogni elemento dell'elenco. </td><td><img src="broken-reference" alt=""></td></tr><tr><td><strong>Scheda</strong></td><td>Inserisce ogni elemento dell'elenco all'interno di un contenitore simile a una scheda, separato da divisori.</td><td><img src="broken-reference" alt=""></td></tr></tbody></table>

#### Opzioni di layout

La funzionalità Opzioni di Layout all'interno del componente Avonni List consente di definire la presentazione dei dati nell'elenco. Ciò avviene selezionando il numero desiderato di colonne in cui i dati devono essere organizzati, con opzioni disponibili da una a dodici colonne.&#x20;

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FUF0NVgdHNfCVLdEPeKIr%2F2024-02-07_21-24-47.png?alt=media&#x26;token=aa9fb4b6-7f17-402b-a6f5-1a00a4c751d8" alt=""><figcaption></figcaption></figure>

Inoltre, il componente Avonni List offre una personalizzazione avanzata tramite la possibilità di specificare configurazioni di colonna in base alle dimensioni dello schermo del contenitore. Questa funzionalità consente di regolare con precisione l'aspetto dell'elenco su diversi dispositivi, garantendo una visualizzazione coerente e intuitiva su schermi piccoli, medi e grandi.&#x20;

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F3dTwkrWEQzbdIGV6TwHa%2F2024-02-07_21-25-19.png?alt=media&#x26;token=48d5c695-2f82-487e-bc3a-f08a81169fc7" alt="" width="375"><figcaption></figcaption></figure>

#### Opzioni di layout dei campi

La sezione Attributi dei Campi ti consente di definire il numero di colonne occupate da ciascun campo all'interno del contenitore, offrendoti un controllo granulare sul layout e sull'aspetto del contenuto dell'elenco.&#x20;

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FrerSxvfhSCDCOBOF6uAp%2F2024-02-07_21-27-15.png?alt=media&#x26;token=e7ecb311-fd51-4271-b601-b45a2fa7d809" alt=""><figcaption></figcaption></figure>

**Regola la variante**

La proprietà "variant" nel componente elenco Avonni viene utilizzata per modificare l'aspetto con cui vengono visualizzate le informazioni dei campi. Di seguito sono riportati i valori disponibili per la proprietà "variant", ciascuno con il proprio stile unico.

1. **Standard**: Questa è l'impostazione predefinita in cui l'etichetta viene visualizzata sopra il campo. È un layout classico e ampiamente utilizzato, che fornisce una chiara separazione tra l'etichetta e il contenuto del campo.
2. **Etichetta Nascosta**: Opta per questa variante quando desideri un design minimalista. L'etichetta non viene visualizzata, offrendo un aspetto più pulito. È ideale per i moduli in cui il contesto o il testo segnaposto rendono evidente lo scopo del campo o quando lo spazio è limitato.
3. **Etichetta In linea**: In questa variante, l'etichetta è posizionata in linea con il campo, in genere a sinistra. Questo layout efficiente in termini di spazio funziona bene nei moduli in cui lo spazio orizzontale è più abbondante di quello verticale. È utile anche quando si desidera ottenere un design del modulo più compatto.
4. **Etichetta Sovrapposta**: Questa variante posiziona l'etichetta direttamente sopra il campo. Quando il campo è attivo o compilato, l'etichetta si sposta verso l'alto. È un design moderno, spesso utilizzato nelle interfacce mobili e nelle applicazioni web, dove aiuta a risparmiare spazio verticale e a mantenere un'estetica pulita e ordinata.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FHsOhZBf72KG2HfCgthFE%2F2024-02-07_21-28-52.png?alt=media&#x26;token=96b20a77-af03-43c8-9acb-5b09db482cd0" alt=""><figcaption></figcaption></figure>

#### Opzioni immagine

## Altre impostazioni

### Filtri

L'"**`Opzione di Filtro`**" ti consente di aggiungere un menu filtro. Quando questa funzionalità è abilitata, tutti i campi designati come filtri verranno visualizzati in questo popover, mantenendo l'elenco ordinato e focalizzato.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F5az4m93BFO7sn6RyKV0d%2F2024-02-04_16-32-15.png?alt=media&#x26;token=87feb3fb-af0e-4547-a17a-dbc7295ee9c8" alt=""><figcaption></figcaption></figure>

### Paginazione

L'area "Opzioni di Paginazione" ti consente di suddividere gli elenchi lunghi in parti più piccole nel componente Avonni List. Puoi scegliere quanti elementi vengono mostrati in ogni pagina e l'aspetto dei controlli. Questo rende più facile gestire elenchi estesi.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FzeK9JTrAHa50bc1g2xJV%2F2024-02-04_16-33-26.png?alt=media&#x26;token=e1518494-b96c-44b7-860e-dfdd62a3eb52" alt=""><figcaption></figcaption></figure>

### Ricerca

Utilizza l'attributo 'Campi di Ricerca' per definire quali campi all'interno del componente List devono essere ricercabili, consentendo agli utenti di individuare rapidamente le informazioni necessarie.&#x20;

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F06qOPZmtykLJ5oDM6MBC%2F2024-02-04_16-37-32.png?alt=media&#x26;token=2010499d-9896-4ab4-9fc4-76e33e9e006b" alt=""><figcaption></figcaption></figure>

**Attivazione della Ricerca**: Per attivare la funzionalità di ricerca, vai alla sezione Ricerca e attiva l'interruttore 'Mostra Ricerca'. Questa azione introdurrà una casella di ricerca all'interno del componente List. Puoi personalizzare questa funzionalità modificando il testo segnaposto e regolando la posizione della casella di ricerca secondo necessità.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FIaNqX8MljJ6BiCs2dVfY%2F2024-02-04_16-38-23.png?alt=media&#x26;token=d4d4509a-054f-4864-9b6e-ffc876e413d7" alt=""><figcaption></figcaption></figure>

**Impostazione del Testo Segnaposto**: Personalizza la barra di ricerca aggiungendo un testo segnaposto per guidare gli utenti.

**Posizionamento della Barra di Ricerca**: Usa l'attributo di posizione per impostare la collocazione della barra di ricerca. Le opzioni includono:

## Interazioni

L'"**Sezione Al Clic**" ti consente di definire cosa accadrà quando gli utenti interagiscono con il componente elenco facendo clic su un elemento.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FgU5pBJZqt1tHVmeY8EPp%2F2024-02-04_20-37-16.png?alt=media&#x26;token=1929d1aa-7c5a-42dc-84b5-81459adb889a" alt=""><figcaption></figcaption></figure>

Ecco le interazioni disponibili per il componente List:

* [Mostra Toast](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/pannello-delle-proprieta/interazioni/mostra-toast)
* [Naviga](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/pannello-delle-proprieta/interazioni/naviga)
* [Apri Finestra di Avviso](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/pannello-delle-proprieta/interazioni/apri-finestra-modale-di-avviso)
* [Apri Conferma](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/pannello-delle-proprieta/interazioni/apri-conferma)
* [Apri Dialogo Flusso](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/pannello-delle-proprieta/interazioni/apri-finestra-di-dialogo-del-flusso)

Esplora ogni sezione per ottenere informazioni sulla configurazione di queste funzionalità e migliorare l'interattività per gli utenti finali all'interno del componente Avonni List.

## Aspetto grafico

Il componente Avonni List per i siti Experience Cloud offre opzioni complete di personalizzazione del suo aspetto, consentendoti di allinearlo perfettamente all'estetica del tuo sito.&#x20;

Ecco gli attributi di stile disponibili per la personalizzazione in Avonni List:

1. **Bordo:** Regola lo spessore, lo stile e il colore del bordo per definire o evidenziare i confini dell'elenco.
2. **Dimensione:** Personalizza la dimensione complessiva dell'elenco, inclusi larghezza e altezza, per adattarla al tuo layout.
3. **Spaziatura:** Controlla lo spazio tra gli elementi dell'elenco, le intestazioni e il corpo dell'elenco per migliorare la leggibilità e l'impatto visivo.
4. **Intestazione:** Definisci lo stile della sezione intestazione, inclusi titolo, didascalia e avatar, per renderla visivamente distinta e informativa.
5. **Titolo dell'Intestazione:** Personalizza il font, la dimensione e il colore del titolo per farlo risaltare o allinearlo al tema del tuo sito.
6. **Didascalia dell'Intestazione:** Definisci lo stile della didascalia sotto il titolo dell'intestazione per una descrizione concisa o un contesto sull'elenco.
7. **Avatar dell'Intestazione:** Includi e definisci lo stile di un avatar o di un'immagine nell'intestazione per una rappresentazione visiva o per il branding.
8. **Elemento:** Regola l'aspetto dei singoli elementi dell'elenco, inclusi sfondo, allineamento e spaziatura.
9. **Allineamento Verticale dell'Elemento:** Controlla l'allineamento verticale degli elementi dell'elenco per un aspetto coerente e rifinito.
10. **Intestazione dell'Elemento:** Personalizza l'aspetto delle intestazioni degli elementi all'interno dell'elenco per una chiara segmentazione e leggibilità.
11. **Descrizione dell'Elemento:** Definisci lo stile del testo della descrizione dell'elemento per fornire informazioni dettagliate in modo visivamente accattivante.
12. **Sfondo dell'Elemento:** Imposta il colore o l'immagine di sfondo per gli elementi dell'elenco per differenziare o evidenziare le singole voci.
13. **Campi dell'Elemento:** Definisci lo stile dei campi all'interno di ogni elemento, ad esempio modificando font o colore, per chiarezza e gerarchia visiva.
14. **Valore dei Campi dell'Elemento:** Personalizza la presentazione dei valori dei campi per una chiara rappresentazione dei dati.
15. **Etichetta dei Campi dell'Elemento:** Definisci lo stile delle etichette dei campi per distinguerle dai valori e migliorare la leggibilità.
16. **Pulsanti di Paginazione:** Definisci lo stile dei pulsanti di paginazione per navigare nell'elenco, assicurandoti che siano facili da usare e in linea con l'estetica del tuo sito.
17. **Piè di pagina:** Personalizza la sezione piè di pagina per informazioni o azioni aggiuntive relative all'elenco, assicurandoti che si integri con il design complessivo.