> 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-gallery.md). # AX - Gallery ## Panoramica **AX - Gallery** è un componente di Experience Cloud che visualizza immagini e contenuti in quattro stili di layout nelle pagine dei siti Experience: carosello (presentazione), schede (sezioni organizzate), griglia (multicolonna) o galleria (vetrina di immagini). Usalo per mostrare foto di prodotti, portfolio di progetti, immagini di case study, raccolte di risorse o qualsiasi contenuto visivo che gli utenti del portale devono consultare. Configura lo stile del layout, la navigazione e le origini delle immagini in Experience Builder senza codice.
*** ## Per iniziare Usa questo semplice tutorial per imparare le basi del componente Gallery e iniziare a creare i tuoi casi d'uso. {% @arcade/embed url="" flowId="QrGyk84126ycSIM6P0oX" %} *** ## Connetti ai dati di Salesforce La **Origine dati** è il punto in cui definisci il contenuto della tua galleria. AX - Gallery supporta due tipi di origini dati: **Manuale** e **Query**.
| Tipo di origine dati | Descrizione | Quando usarlo | | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Manuale** | Carica o inserisci ogni elemento della galleria direttamente nel componente. Ogni immagine aggiunta tramite il selettore Media Source crea un **nuovo** file nella tua libreria Salesforce Files. | Gallerie una tantum con contenuto statico che cambia raramente (hero della landing page, vetrina prodotto fissa, demo). | | **Query** | Recupera dinamicamente gli elementi da un oggetto Salesforce (Product, Knowledge, ContentVersion, oggetto personalizzato…). La galleria si aggiorna automaticamente quando i record sottostanti cambiano. | Qualsiasi contenuto che deve rimanere sincronizzato con i dati Salesforce, ruotare regolarmente o essere gestito da un team non tecnico esterno a Experience Builder. | {% hint style="info" %} #### **Scegliere tra Manuale e Query** La modalità Manuale crea un **file completamente nuovo** nella libreria ogni volta che carichi un'immagine. Non fa riferimento ai file già esistenti in Salesforce Files. Se devi riutilizzare o aggiornare il contenuto della galleria senza riaprire il pannello Proprietà, usa **Query** invece. {% endhint %} #### Condivisione del modello con Avonni AX - Gallery **Aderenza alle regole di condivisione dei dati di Salesforce:** * **Rispetto delle impostazioni dell'organizzazione:** I componenti Avonni sono pienamente conformi alle configurazioni di condivisione dei dati e alle impostazioni di accesso esistenti della tua organizzazione Salesforce. * **Politica di non interferenza:** Questi componenti non modificano né influenzano in alcun modo le regole di condivisione dei dati predefinite. * **Visibilità e accesso controllati:** La possibilità di visualizzare e interagire con i record tramite i componenti Avonni è regolata dalle impostazioni di condivisione e dalle autorizzazioni utente definite dalla tua organizzazione *** ### Utilizzare i Salesforce Files esistenti come origine media La **Origine media** campo in AX - Gallery è flessibile rispetto a ciò che gli fornisci. Puoi mapparlo a un URL, a un ContentDocumentId o a un percorso completo di download dei Salesforce Files. Il componente rileva automaticamente i ContentDocumentId e li risolve nel corretto URL di anteprima al momento del rendering. Questo è il modo in cui fai puntare una galleria ai file nella **libreria Salesforce Files** senza dover mai ricaricare tramite il componente. | Cosa inserisci in Origine media | Cosa rende la galleria | | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | | Un campo contenente un **ContentDocumentId** (inizia con `069…`) | L'ultima versione del file viene risolta e visualizzata. Il componente rileva automaticamente gli `069…` ID. | | Il campo standard **VersionDataURL** quando si interroga `ContentVersion` | Il file viene scaricato e visualizzato. Consigliato quando il tuo oggetto sorgente è ContentVersion. | | Un **Shepherd URL** costruito con un'espressione come `/sfc/servlet.shepherd/version/download/{{Record.Id}}` | Viene visualizzata la versione esatta indicata nell'URL. Utile per la costruzione di URL personalizzati. | | Un **URL pubblico** (immagine esterna ospitata altrove) | L'immagine viene caricata dalla fonte esterna. | #### **Come configurarlo in modalità Query** 1. Nel **Origine dati**, seleziona **Query** e scegli il tuo oggetto sorgente (`ContentVersion`, un oggetto personalizzato che contiene riferimenti ai file, o qualsiasi oggetto con un campo immagine). 2. Applica un filtro che identifichi quali record devono apparire (in base a convenzione del titolo, tag, campo personalizzato, valore di picklist, ecc.). 3. In **Mappature dei dati**, mappa **Origine media** in base al tuo oggetto sorgente : * **Se interroghi ContentVersion :** mappa Origine media al campo standard `Version Data URL` campo. * **Se interroghi un oggetto personalizzato con un campo ContentDocumentId :** mappa Origine media direttamente a quel campo (il componente rileva automaticamente gli `069…` ID e li risolve). * **Se interroghi qualsiasi oggetto con un campo URL completo dell'immagine :** mappa Origine media direttamente a quel campo. Una volta configurato, aggiornare il contenuto della galleria è semplice come sostituire i file nella libreria Salesforce Files o aggiornare il campo di riferimento sui tuoi record. {% hint style="info" %} #### Anteprima di Experience Builder Le immagini che puntano a Salesforce Files potrebbero non essere visualizzate nell'anteprima di Experience Builder perché il builder non si autentica come utente del portale. Verranno visualizzate correttamente una volta effettuato l'accesso al sito pubblicato come utente della community {% endhint %} *** ## Impostazione di una variante ### **Carosello** La variante Carousel offre un modo dinamico e coinvolgente per mostrare i tuoi contenuti, immagini o schede. È progettata per visualizzare gli elementi in sequenza in formato presentazione, rendendola una scelta eccellente per evidenziare contenuti in evidenza, immagini di prodotto o annunci importanti.
**Quando usarlo:** Utilizza la variante Carousel quando vuoi: * Catturare l'attenzione degli utenti con una presentazione visivamente accattivante. * Visualizzare più elementi o immagini in modo efficiente in termini di spazio. * Creare banner a rotazione o sezioni di contenuti in evidenza sul tuo sito. **Caratteristiche:** * **Controlli di navigazione:** Naviga nel carosello con controlli intuitivi come pulsanti freccia o punti di paginazione. * **Opzione di riproduzione automatica:** Imposta il carosello in modo che scorra automaticamente gli elementi, con la possibilità di mettere in pausa e riprendere. * **Aspetto personalizzabile:** Adatta l'aspetto del carosello al design del tuo sito regolando elementi come effetti di transizione e durata della visualizzazione. ### **Schede** La variante Tabs introduce un approccio organizzato e tabulato alla presentazione dei contenuti. Questa variante è ideale per categorizzare le informazioni, offrendo un layout pulito e strutturato che consente agli utenti di navigare rapidamente e accedere a diverse sezioni di contenuto.
**Quando usarlo:** Considera la variante Tabs quando devi: * Presentare informazioni categorizzate in un formato chiaro e suddiviso. * Consentire agli utenti di passare facilmente da una sezione di contenuto all'altra senza lasciare la pagina. * Organizzare contenuti come specifiche di prodotto, categorie di servizio o schede informative in modo intuitivo per l'utente. **Caratteristiche:** * **Contenuto suddiviso:** Organizza il tuo contenuto in schede chiaramente definite, rendendo semplice per gli utenti trovare e visualizzare le diverse sezioni. * **Navigazione intuitiva:** Consenti agli utenti di passare da una scheda all'altra senza soluzione di continuità, garantendo un'esperienza fluida e intuitiva. * **Design personalizzabile:** Adatta l'aspetto delle schede al tuo branding e all'estetica del sito modificando elementi come etichette delle schede, layout e combinazioni di colori. ### **Griglia** Presenta i contenuti in un layout strutturato a più colonne. Ogni elemento occupa una cella all'interno della griglia. **Quando usarlo:** Ideale per visualizzare una raccolta di elementi in cui si desidera dare uguale enfasi, come ad esempio: * Elenco prodotti * Profili dei membri del team * Anteprime di post del blog **Caratteristiche** * Numero di colonne personalizzabile * Possibilità di definire la spaziatura (gap) tra gli elementi * Opzioni per immagini, titoli, descrizioni e pulsanti call-to-action all'interno di каждой cella della griglia ### **Galleria** Un layout orientato alla componente visiva che mette in evidenza le immagini. **Quando usarlo:** Ideale per evidenziare contenuti basati su immagini, come: * Portfolio fotografici * Gallerie di prodotti * Contenuti in evidenza incentrati sulle immagini **Caratteristiche** * Focus su immagini grandi e di alta qualità * Opzioni per includere didascalie o funzionalità lightbox per ingrandire le immagini * Possibilità di layout creativi ed effetti al passaggio del mouse *** ## Interactions La sezione "Link a" determina cosa accade quando un utente fa clic su un elemento della tua Avonni Gallery. Usala per indirizzare gli utenti a pagine dettagliate, aprire nuovi contenuti o attivare altre azioni. **Esempio:** * Ad esempio, mostra case in evidenza in una galleria e consenti agli utenti di fare clic su ciascuna immagine per visualizzare maggiori dettagli in una pagina separata. *** ## Aspetto dello stile Gli attributi di stile ti consentono di controllare l'aspetto visivo di ogni elemento della galleria. Le impostazioni sono raggruppate in base a ciò che influenzano.
### Impostazioni generali della galleria Si applicano a tutte le varianti (Carousel, Tabs, Grid, Gallery). | Impostazione | Cosa controlla | | -------------- | ----------------------------------------------------------------------------------- | | **Dimensione** | Larghezza e altezza complessive della galleria. | | **Bordo** | Stile, larghezza e colore del bordo attorno alla galleria. | | **Didascalia** | Stile del testo della didascalia mostrata su ogni elemento. | | **Titolo** | Stile del testo del titolo su ogni elemento. | | **Contenuto** | Stile dell'area di contenuto principale all'interno di ciascun elemento. | | **Media** | Come vengono visualizzate immagini e video (adattamento, allineamento, dimensioni). | ### Variante Carousel Si applica solo quando **Variante** è impostato su `Carosello`. | Impostazione | Cosa controlla | | ------------------------------------------------- | ------------------------------------------------------------------ | | **Elemento della presentazione** | Sfondo, allineamento e spaziatura di ogni elemento del carosello. | | **Titolo dell'elemento della presentazione** | Carattere, dimensione e colore dei titoli degli elementi. | | **Descrizione dell'elemento della presentazione** | Carattere, dimensione e colore delle descrizioni degli elementi. | | **Immagine della presentazione** | Dimensioni e bordo delle immagini all'interno di ciascun elemento. | | **Indicatore attivo della presentazione** | Stile dell'indicatore per l'elemento attualmente visualizzato. | | **Indicatore inattivo della presentazione** | Stile degli indicatori per gli elementi non attivi. | | **Pulsante di navigazione della presentazione** | Stile dei pulsanti di navigazione precedente/successivo. | ### Variante Tabs Si applica solo quando **Variante** è impostato su `Schede`. | Impostazione | Cosa controlla | | -------------------------------------- | ------------------------------------------------------------ | | **Scheda** | Stile di ciascuna scheda individuale. | | **Bordo della scheda** | Bordo attorno a ciascuna scheda. | | **Bordo della scheda attiva/in hover** | Bordo per la scheda attiva e per lo stato hover. | | **Sfondo della scheda** | Colore o immagine di sfondo per le schede. | | **Etichetta della scheda** | Carattere, dimensione e colore delle etichette delle schede. | | **Sottotitolo della scheda** | Carattere, dimensione e colore dei sottotitoli delle schede. | *** ## Risoluzione dei problemi | Problema | Causa | Soluzione | | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Le immagini non vengono visualizzate in anteprima in Experience Builder ma vengono mostrate correttamente nel sito pubblicato** | Experience Builder non si autentica come utente del portale, quindi non può recuperare le immagini da Salesforce Files durante l'anteprima. | Comportamento previsto. Accedi al sito pubblicato come utente della community per verificare che le immagini vengano renderizzate correttamente. | | **Appare "Nessuna anteprima disponibile" in modalità Manuale** | L'immagine caricata non è stata contrassegnata come collegamento pubblico, quindi gli utenti del portale non possono caricarla. | Ricarica l'immagine e seleziona **Collegamento pubblico** al momento del caricamento, oppure passa alla modalità Query dove si applicano le regole standard di condivisione. | | **La modalità Manuale ti obbliga a ricaricare ogni volta che vuoi modificare un'immagine** | La modalità Manuale è un caricatore diretto: non fa riferimento ai Salesforce Files esistenti. | Usa **Query** la modalità con ContentVersion o un oggetto personalizzato che contiene riferimenti ai file. Vedi *Utilizzare i Salesforce Files esistenti come origine media* sopra. | | **La galleria è vuota per gli utenti del portale ma funziona nell'anteprima di Experience Builder** | Il profilo dell'utente del portale non dispone dell'accesso all'oggetto interrogato o ai file referenziati. | Controlla i permessi dell'oggetto del profilo, la sicurezza a livello di campo e l'accesso alla Libreria/condivisione su `ContentVersion` o sull'oggetto sorgente. | | **Le immagini non vengono visualizzate affatto (né in anteprima né nel sito pubblicato)** | Origine media è mappata a un campo che non contiene un riferimento valido al file (ContentDocumentId che inizia con `069…`, il `Version Data URL` campo su ContentVersion, o un URL pubblico dell'immagine). | Verifica cosa contiene realmente il campo mappato. Quando interroghi ContentVersion, usa il campo standard `Version Data URL` campo. Per gli oggetti personalizzati, memorizza un ContentDocumentId (che inizia con `069…`) e mappa Origine media direttamente a quel campo. | | **La galleria mostra titoli corretti ma tutte le immagini sono danneggiate** | Origine media è mappata a un campo che non contiene un ContentDocumentId o un URL valido. | Nelle mappature dei dati, conferma che Origine media punti a un campo ContentDocumentId, a un URL shepherd o a un URL pubblico valido dell'immagine. | *** ## Esempi di casi d'uso ### Esempio 1: Carosello Notizie per i clienti {% @arcade/embed url="" flowId="pOjxSsq8rQ3YgZFvjMgr" %} Tieni i tuoi clienti informati e coinvolti mostrando i tuoi ultimi articoli direttamente nella home page di Experience Cloud. Il componente AX Gallery rende facile visualizzare un carosello di notizie dinamico e ricco di immagini che si aggiorna automaticamente man mano che vengono pubblicati nuovi contenuti. *** #### **Cosa otterrai** * **Contenuti freschi a colpo d'occhio:** Metti in evidenza i tuoi articoli Knowledge più recenti nella home page, completi di immagini, così i visitatori non perderanno mai un aggiornamento. * **Navigazione senza sforzo:** Permetti ai clienti di scorrere le notizie aziendali in un layout a carosello pulito e strutturato. * **Filtraggio mirato:** Mostra solo gli articoli News sfruttando un campo picklist personalizzato, mantenendo il carosello focalizzato e pertinente. *** #### **Prima di iniziare** * **`ImageId__c` campo:** Crea un campo di testo sull'oggetto Knowledge per memorizzare il Content Document ID dell'immagine di ogni articolo. * **`Type__c` campo:** Crea un campo picklist sull'oggetto Knowledge per categorizzare gli articoli, assicurandoti che il **News** valore esista e sia applicato ai tuoi articoli. *** #### **Come configurarlo** {% stepper %} {% step %} #### **Aggiungi il componente alla tua pagina** * Trascina il **AX Gallery** componente nella pagina desiderata in Experience Builder. {% endstep %} {% step %} #### **Personalizza la visualizzazione del componente** * Imposta l' **Titolo** su `Carosello News`. * Imposta l' **Didascalia** su `Sfoglia i nostri articoli settimanali`. * Imposta l' **Numero di colonne** su `3`. {% endstep %} {% step %} #### **Configura la tua origine dati** * Crea una nuova query nella configurazione dell'origine dati. * Seleziona **Knowledge** come oggetto (assicurati di selezionare la seconda opzione Knowledge nell'elenco). * Aggiungi un filtro: **Type\_\_c uguale a** `News`. * Imposta l'ordinamento su **Data di creazione, decrescente** così i tuoi articoli più recenti appariranno sempre per primi. {% endstep %} {% step %} #### **Configura la mappatura dei dati** * Mappa **Titolo** a Knowledge `Titolo` campo. * Mappa **Origine media** su `ImageId__c` per recuperare le immagini degli articoli. * Imposta l' **Velocità di riproduzione** su `5`. {% endstep %} {% step %} #### **Visualizza l'anteprima del tuo lavoro** * Usa l'anteprima di Experience Builder per confermare che il tuo carosello mostri gli articoli, le immagini e il layout corretti prima della pubblicazione. {% endstep %} {% endstepper %} *** ### Esempio 2: galleria Prodotti per i clienti {% @arcade/embed url="" flowId="aIu9ZNuteXdewe19LJL0" %} Offri ai tuoi clienti un modo visivamente coinvolgente per scoprire il catalogo dei prodotti, direttamente dalla home page. Combinando il componente AX Gallery con i dati dei prodotti, puoi creare un carosello accattivante che mette in risalto i prodotti in evidenza e guida i visitatori direttamente alle pagine dei dettagli del prodotto. *** #### **Cosa otterrai** * **Una vetrina visiva dei prodotti:** Mostra cuffie in evidenza in un carosello ricco di immagini che invoglia alla navigazione. * **Navigazione fluida:** Consenti ai clienti di passare dal carosello direttamente alle singole pagine dei dettagli del prodotto con facilità. * **Un'esperienza homepage curata:** Metti in risalto i prodotti più importanti mostrando in homepage solo il catalogo in evidenza. *** #### **Prima di iniziare** * **`Type__c` campo:** Crea un campo Picklist sull'oggetto Product2 e assicurati che il **Headphone** valore esista, così puoi filtrare il carosello sui prodotti giusti. * **`ContentDocumentId__c` campo:** Crea un campo di testo sull'oggetto Product2 per memorizzare l'URL dell'immagine di ogni prodotto. *** #### **Come configurarlo** {% stepper %} {% step %} #### **Aggiungi il componente alla tua pagina** * Trascina il **AX Gallery** componente nella pagina desiderata in Experience Builder. {% endstep %} {% step %} #### **Personalizza la visualizzazione del componente** * Imposta l' **Titolo** su `Carosello Prodotti`. * Imposta l' **Didascalia** su `Scopri i nostri prodotti in evidenza!` * Imposta l' **Numero di colonne** su `3`. {% endstep %} {% step %} #### **Configura la tua origine dati** * Crea una nuova query nella configurazione dell'origine dati. * Seleziona **Prodotto** come oggetto. {% endstep %} {% step %} #### **Configura la mappatura dei dati** * Mappa **Titolo** al `Nome prodotto` campo. * Mappa **Origine media** su `ContentDocumentId__c` per visualizzare l'immagine di ciascun prodotto. * Imposta l' **Velocità di riproduzione** su `5`. {% endstep %} {% step %} #### **Visualizza l'anteprima del tuo lavoro** * Usa l'anteprima di Experience Builder per confermare che i tuoi prodotti, le immagini e il layout del carosello appaiano come previsto prima della pubblicazione. {% endstep %} {% endstepper %} --- # 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-gallery.md?ask=&goal= ``` `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.