> 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/experience-components/ax-list.md).

# AX - Elenco

## Panoramica

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

Usalo per mostrare agli utenti del portale insiemi di record filtrati, come i loro ordini, casi, contratti o qualsiasi dato correlato, con il pieno controllo sui campi visualizzati su ogni scheda. Gli utenti possono cercare, filtrare, scorrere i risultati con la paginazione e fare clic sulle schede per passare ai record. Recupera i 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 prodotti o qualsiasi situazione in cui gli utenti del portale debbano sfogliare e cercare tra i loro record Salesforce.

{% hint style="success" %}
Avonni List è un [Componente dati reattivo](/experience-cloud/experience-cloud-it/per-iniziare/reactive-components.md)
{% endhint %}

<figure><img src="/files/99077eaa4320eba94e0792d685090516070d5451" alt=""><figcaption></figcaption></figure>

## Configurazione dell'elenco

Comprendere il processo di configurazione, in particolare le sezioni Origine dati e Mappature, è fondamentale per utilizzare l'elenco in modo efficace.

### Configurazione dell'origine dati

La sezione Origine dati è dove colleghi Avonni List ai tuoi dati Salesforce. Hai due opzioni di Origine dati.

<figure><img src="/files/a3f357a8e0dadda95ff1c50c7b27591c7ccc6b79" 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 per dataset dinamici, in tempo reale e di grandi dimensioni. |

### Configurazione delle mappature dei dati

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

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

<figure><img src="/files/8b85c6e316b7f9734eb43f747b40a0316c13fb56" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/3fb59e9ffafb089446781c87aa3b6cff82277faa" alt=""><figcaption></figcaption></figure>

### Configurazione dell'aspetto

#### Configurazione del divisore degli elementi

La funzione Divisore elemento è progettata per migliorare la struttura visiva dell'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">Divisore</th><th width="309">Descrizione</th><th>Illustrazione</th></tr></thead><tbody><tr><td><strong>In alto</strong></td><td>Consente di inserire un divisore nella parte superiore di ogni elemento dell'elenco.</td><td><img src="/files/f045ba588796eee4eb74009bd934b2c2ffe7496a" alt=""></td></tr><tr><td><strong>In basso</strong></td><td>Aggiunge una linea divisoria nella parte inferiore di ogni elemento dell'elenco.</td><td><img src="/files/8abbafa60448d018429cad703f7c54a8f69fa3a9" alt=""></td></tr><tr><td><strong>Intorno</strong></td><td>Inserisce linee divisorie sia sopra sia sotto ogni elemento dell'elenco.</td><td><img src="/files/4d6918ea5739d8c9662dadef57717df1331e6417" alt=""></td></tr><tr><td><strong>Scheda</strong></td><td>Colloca ogni elemento dell'elenco nel proprio contenitore simile a una scheda, separato da divisori.</td><td><img src="/files/9a751741b28e250af6ebd14752444099488507f4" alt=""></td></tr></tbody></table>

#### Opzioni di layout

La funzionalità Opzioni di layout all'interno del componente Avonni List offre la possibilità di definire la presentazione dei dati nell'elenco. Questo si ottiene selezionando il numero desiderato di colonne in cui organizzare i dati, con opzioni disponibili da una a dodici colonne.

<figure><img src="/files/55c2ffe5b98b6117a11dd0000070654ef65af5a1" alt=""><figcaption></figcaption></figure>

Inoltre, il componente Avonni List offre una personalizzazione avanzata grazie alla possibilità di specificare configurazioni di colonna in funzione delle dimensioni dello schermo del contenitore. Questa funzione consente di regolare con precisione l'aspetto dell'elenco su vari dispositivi, garantendo una visualizzazione coerente e intuitiva su schermi piccoli, medi e grandi.

<figure><img src="/files/92c453d8b3edb2530da09ceffbcc4fc4d225c623" 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.

<figure><img src="/files/76b6c0a089fdeb8d08421cd063b6e6d19d311900" alt=""><figcaption></figcaption></figure>

**Regola la variante**

La proprietà "variant" nel componente Avonni list viene usata 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 usato, che offre una chiara separazione tra l'etichetta e il contenuto del campo.
2. **Etichetta nascosta**: Scegli 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 rende evidente lo scopo del campo oppure 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 vuoi ottenere un design del modulo più compatto.
4. **Etichetta impilata**: 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 usato nelle interfacce mobile e nelle applicazioni web, dove aiuta a risparmiare spazio verticale e a mantenere un'estetica pulita e ordinata.

<figure><img src="/files/c09c7962c9fd19cda2dd4e4a2172db1718286780" alt=""><figcaption></figcaption></figure>

#### Opzioni immagine

## Altre impostazioni

### Filtri

Il "**`Opzione di filtro`**" 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="/files/b004c139d75bdbaebbfc3a908741c81d85698d82" 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 facilita la gestione di elenchi estesi.

<figure><img src="/files/06c9d5b646b9055fbba66c1bd2b996c253aebb1a" 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.

<figure><img src="/files/db04ede1c15bcb4f4362d49dba08288f31648881" alt=""><figcaption></figcaption></figure>

**Attivazione della ricerca**: Per attivare la funzione 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 funzione modificando il testo segnaposto e regolando la posizione della casella di ricerca in base alle esigenze.

<figure><img src="/files/0619fc80dd91af2cc5ac9f2e558487b109ae938c" 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 posizione per impostare la collocazione della barra di ricerca. Le opzioni includono:

## Interactions

Il "**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="/files/c28b96d34a3f83503699ff313327d1e457c2e6c6" alt=""><figcaption></figcaption></figure>

Ecco le interazioni disponibili per il componente List:

* [Mostra notifica toast](/experience-cloud/experience-cloud-it/pannello-proprieta/interactions/show-toast.md)
* [Naviga](/experience-cloud/experience-cloud-it/pannello-proprieta/interactions/navigate.md)
* [Apri finestra modale di avviso](/experience-cloud/experience-cloud-it/pannello-proprieta/interactions/open-alert-modal.md)
* [Apri conferma](/experience-cloud/experience-cloud-it/pannello-proprieta/interactions/open-confirm.md)
* [Apri dialogo Flow](/experience-cloud/experience-cloud-it/pannello-proprieta/interactions/open-flow-dialog.md)

Esplora ogni sezione per acquisire informazioni sulla configurazione di queste funzionalità e sul miglioramento dell'interattività per gli utenti finali all'interno del componente Avonni List.

## Aspetto dello stile

Il componente Avonni List per Experience Cloud Sites offre ampie opzioni di personalizzazione per il suo aspetto, consentendoti di adattarlo perfettamente all'estetica del tuo sito.

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 adattarlo 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'appeal visivo.
4. **Intestazione:** Stilizza la sezione dell'intestazione, inclusi titolo, didascalia e avatar, per renderla visivamente distinta e informativa.
5. **Titolo dell'intestazione:** Personalizza font, dimensione e colore del titolo per metterlo in risalto o allinearlo al tema del tuo sito.
6. **Didascalia dell'intestazione:** Stilizza la didascalia sotto il titolo dell'intestazione per fornire una descrizione concisa o un contesto sull'elenco.
7. **Avatar dell'intestazione:** Includi e personalizza un avatar o 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:** Stilizza il testo della descrizione dell'elemento per fornire informazioni dettagliate in modo visivamente gradevole.
12. **Sfondo dell'elemento:** Imposta il colore o l'immagine di sfondo per gli elementi dell'elenco per differenziare o evidenziare singole voci.
13. **Campi dell'elemento:** Stilizza i campi all'interno di ciascun 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:** Stilizza le etichette dei campi per distinguerle dai valori e migliorare la leggibilità.
16. **Pulsanti di paginazione:** Stilizza i pulsanti di paginazione per la navigazione dell'elenco, assicurandoti che siano facili da usare e in linea con l'estetica del tuo sito.
17. **Piè di pagina:** Personalizza la sezione del piè di pagina per informazioni aggiuntive o azioni relative all'elenco, assicurandoti che completi il design complessivo.


---

# 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/experience-components/ax-list.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.