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 set di record filtrati—come i loro ordini, casi, contratti o qualsiasi dato correlato—con pieno controllo su quali campi appaiono su ogni scheda. Gli utenti possono cercare, filtrare, navigare tra le pagine dei risultati e fare clic sulle schede per andare ai record. Recupera dati da qualsiasi oggetto standard o personalizzato in Experience Builder.
Perfetto per la cronologia ordini dei clienti, elenchi di casi, librerie di documenti, cataloghi di prodotti o ovunque gli utenti del portale debbano sfogliare e cercare tra i loro record Salesforce.
L'Avonni List è un Componente Dati Reattivo
Configurazione della Lista
Comprendere il processo di configurazione, in particolare le sezioni Origine dati e Mappature, è fondamentale per usare efficacemente la Lista.
Configurazione dell'origine dati
La sezione Origine dati è dove colleghi l'Avonni List ai tuoi dati Salesforce. Hai due opzioni per l'Origine dati.
Origine dati manuale
Inserisci manualmente la Lista nella tabella dei dati.
Ideale per dati non dinamici, test e demo.
Query
Crea una query per popolare automaticamente la Lista con i dati di Salesforce.
Adatta per set di dati dinamici, in tempo reale e di grandi dimensioni.
Configurazione delle mappature dei dati
Dai vita alla tua lista nella sezione Mappature dati definendola e personalizzandola.
Fai clic sul 'Aggiungi colonne' pulsante per selezionare il campo che desideri visualizzare come etichetta nella Lista.
Quindi, puoi incorporare elementi aggiuntivi accanto ai tuoi dati primari. Questo può includere componenti visivi come immagini, avatar o anche campi aggiuntivi per fornire più contesto o dettaglio a ciascun elemento della lista.
Configurazione dell'aspetto
Configurazione del divisore degli elementi
La funzione Divisore elemento è progettata per migliorare la struttura visiva della tua lista introducendo divisori tra gli elementi. Questo attributo ti consente di personalizzare come ogni elemento della lista è separato dagli altri.
In alto
Consente di posizionare un divisore nella parte superiore di ogni elemento della lista.
Inferiore
Aggiunge una linea divisoria nella parte inferiore di ogni elemento della lista.
Intorno
Posiziona linee divisorie sia sopra che sotto ogni elemento della lista.
Scheda
Colloca ogni elemento della lista all'interno del proprio contenitore simile a una scheda, separato da divisori.
Opzioni di layout
La funzione Opzioni di layout all'interno del componente Avonni List consente di definire la presentazione dei dati nella lista. Ciò si ottiene selezionando il numero desiderato di colonne in cui i dati devono essere organizzati, con opzioni disponibili da una a dodici colonne.
Inoltre, il componente Avonni List offre personalizzazioni avanzate attraverso la possibilità di specificare configurazioni delle colonne in base alla dimensione dello schermo del contenitore. Questa funzione permette di regolare precisamente l'aspetto della lista sui vari dispositivi, garantendo una visualizzazione coerente e facile da usare su schermi piccoli, medi e grandi.
Opzioni di layout dei campi
La sezione Attributi campo ti consente di definire il numero di colonne che ciascun campo occuperà all'interno del contenitore, dandoti un controllo granulare sul layout e sull'aspetto del contenuto della lista.
Regola la variante
La proprietà "variant" nel componente Avonni List viene utilizzata per modificare l'aspetto di come le informazioni dei campi vengono visualizzate. Di seguito sono elencati i valori disponibili per la proprietà "variant", ciascuno con il proprio stile unico.
Standard: Questa è l'impostazione predefinita in cui l'etichetta è visualizzata sopra il campo. È un layout classico e ampiamente utilizzato, che fornisce una chiara separazione tra l'etichetta e il contenuto del campo.
Etichetta nascosta: Opta per questa variante quando desideri un design minimalista. L'etichetta non viene visualizzata, offrendo un aspetto più pulito. È ideale per moduli in cui il contesto o il testo segnaposto rende ovvio lo scopo del campo o quando lo spazio è limitato.
Etichetta in linea: In questa variante, l'etichetta è posizionata in linea con il campo, tipicamente a sinistra. Questo layout che ottimizza lo spazio funziona bene nei moduli dove lo spazio orizzontale è più abbondante di quello verticale. È anche utile quando si desidera ottenere un design del modulo più compatto.
Etichetta impilata: Questa variante posiziona l'etichetta direttamente sopra il campo. Quando il campo è in focus o compilato, l'etichetta si sposta verso l'alto. È un design moderno spesso usato nelle interfacce mobili e nelle applicazioni web, dove aiuta a risparmiare spazio verticale e mantenere un'estetica pulita e ordinata.
Opzioni immagine
Altre impostazioni
Filtri
Il "Opzione di filtro" ti consente di aggiungere un menu dei filtri. Quando questa funzione è abilitata, tutti i campi designati come filtri verranno visualizzati in questo popover, mantenendo la lista ordinata e concentrata.
Paginazione
L'area "Opzioni di paginazione" ti consente di suddividere elenchi lunghi in parti più piccole nel componente Avonni List. Puoi scegliere quanti elementi vengono mostrati su ogni pagina e come appaiono i controlli. Questo rende più facile gestire elenchi estesi.
Ricerca
Utilizza l'attributo 'Campi di ricerca' per definire quali campi all'interno del componente Lista devono essere ricercabili, permettendo agli utenti di trovare rapidamente le informazioni necessarie.
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 Lista. Puoi personalizzare questa funzione modificando il testo segnaposto e regolando la posizione della casella di ricerca secondo necessità.
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:
Interazioni
Il "Sezione Al clic" ti consente di definire cosa accadrà quando gli utenti interagiscono con il componente lista facendo clic su un elemento.
Ecco le interazioni disponibili per il componente Lista:
Esplora ogni sezione per ottenere informazioni su come configurare queste funzionalità e migliorare l'interattività per i tuoi utenti finali all'interno del componente Avonni List.
Aspetto e stile
Il componente Avonni List per i siti Experience Cloud offre opzioni di personalizzazione complete per il suo aspetto, permettendoti di allinearlo perfettamente con l'estetica del tuo sito.
Ecco gli attributi di stile disponibili per la personalizzazione nella Avonni List:
Bordo: Regola lo spessore del bordo, lo stile e il colore per definire o evidenziare i confini della lista.
Dimensione: Personalizza la dimensione complessiva della lista, inclusi larghezza e altezza, per adattarla al tuo layout.
Spaziatura: Controlla lo spazio tra gli elementi della lista, le intestazioni e il corpo della lista per migliorare la leggibilità e l'appeal visivo.
Intestazione: Stilizza la sezione dell'intestazione, inclusi titolo, didascalia e avatar, per renderla visivamente distinta e informativa.
Titolo dell'intestazione: Personalizza il font, la dimensione e il colore del titolo per farlo risaltare o allinearlo al tema del tuo sito.
Didascalia dell'intestazione: Stilizza la didascalia sotto il titolo dell'intestazione per una descrizione concisa o un contesto sulla lista.
Avatar dell'intestazione: Includi e stila un avatar o un'immagine nell'intestazione per una rappresentazione visiva o branding.
Elemento: Regola l'aspetto dei singoli elementi della lista, inclusi sfondo, allineamento e spaziatura.
Allineamento verticale dell'elemento: Controlla l'allineamento verticale degli elementi della lista per un aspetto coerente e rifinito.
Intestazione dell'elemento: Personalizza l'aspetto delle intestazioni degli elementi all'interno della lista per una chiara segmentazione e leggibilità.
Descrizione dell'elemento: Stilizza il testo della descrizione dell'elemento per fornire informazioni dettagliate in modo visivamente gradevole.
Sfondo dell'elemento: Imposta il colore di sfondo o l'immagine per gli elementi della lista per differenziare o evidenziare le singole voci.
Campi dell'elemento: Stilizza i campi all'interno di ogni elemento, come modificare il font o il colore, per chiarezza e gerarchia visiva.
Valore dei campi dell'elemento: Personalizza la presentazione dei valori dei campi per una chiara rappresentazione dei dati.
Etichetta dei campi dell'elemento: Stilizza le etichette dei campi per distinguerle dai valori e migliorare la leggibilità.
Pulsanti di paginazione: Stilizza i pulsanti di paginazione per navigare nella lista, assicurandoti che siano facili da usare e coerenti con l'estetica del tuo sito.
Piè di pagina: Personalizza la sezione del piè di pagina per informazioni o azioni aggiuntive correlate alla lista, assicurandoti che completi il design complessivo.
Ultimo aggiornamento
È stato utile?