AX - Gallery
Panoramica
AX - Gallery è un componente di Experience Cloud che mostra immagini e contenuti in quattro stili di layout nelle pagine dei siti Experience: carosello (slideshow), 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 realizzare i tuoi casi d'uso.
Connettersi ai dati Salesforce
La Origine dati è il punto in cui definisci il contenuto della tua galleria. AX - Gallery supporta due tipi di origine dati: Manuale e Query.
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 contenuti statici che cambiano raramente (hero della landing page, vetrina prodotti 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.
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à presenti in Salesforce Files. Se devi riutilizzare o aggiornare il contenuto della galleria senza riaprire il pannello Proprietà, usa Query invece.
Condivisione del modello con Avonni AX - Gallery
Rispetto delle regole di condivisione dei dati Salesforce:
Rispetto delle impostazioni dell'organizzazione: I componenti Avonni sono pienamente conformi alle configurazioni di condivisione dei dati e alle impostazioni di accesso già presenti nella tua organizzazione Salesforce.
Politica di non interferenza: Questi componenti non modificano né influenzano in alcun modo le 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 e dalle autorizzazioni utente definite nella tua organizzazione
Utilizzare i file Salesforce esistenti come origine multimediale
La Origine multimediale Il 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 file Salesforce. Il componente rileva automaticamente gli ContentDocumentId e li risolve nell'URL di anteprima corretto al momento del rendering.
Ecco come mantieni una galleria puntata ai file nella libreria Salesforce Files senza dover mai ricaricare tramite il componente.
Un campo contenente un ContentDocumentId (inizia con 069…)
Viene risolta e visualizzata la versione più recente del file. Il componente rileva automaticamente gli 069… ID.
Il campo standard VersionDataURL quando si esegue una query su ContentVersion
Il file viene scaricato e visualizzato. Consigliato quando l'oggetto sorgente è ContentVersion.
Un URL Shepherd creato 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 dall'origine esterna.
Come configurarlo in modalità Query
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).Applica un filtro che identifichi quali record devono apparire (per convenzione nel titolo, tag, campo personalizzato, valore di picklist, ecc.).
In Mapping dei dati, mappa Origine multimediale in base al tuo oggetto sorgente :
Query di ContentVersion : mappa Media Source al campo standard
Version Data URL.Query su un oggetto personalizzato con un campo ContentDocumentId : mappa Media Source direttamente a quel campo (il componente rileva automaticamente
069…gli ID e li risolve).Query su qualsiasi oggetto con un campo URL immagine completo : mappa Media Source 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 record.
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 eseguito l'accesso al sito pubblicato come utente della community
Impostare una variante
Carosello
La variante Carosello offre un modo dinamico e coinvolgente per presentare i tuoi contenuti, immagini o schede. È progettata per mostrare gli elementi in sequenza in formato slideshow, rendendola un'ottima scelta per evidenziare contenuti in primo piano, immagini di prodotto o annunci importanti.
Quando usarlo: Usa la variante Carosello quando vuoi:
Catturare l'attenzione degli utenti con una presentazione visivamente accattivante.
Mostrare più elementi o immagini in modo efficiente in termini di spazio.
Creare banner rotanti o sezioni di contenuti in evidenza sul tuo sito.
Funzionalità:
Controlli di navigazione: Naviga nel carosello con controlli intuitivi come pulsanti freccia o indicatori di paginazione.
Opzione di riproduzione automatica: Imposta il carosello in modo che scorra automaticamente tra gli elementi, con la possibilità di mettere in pausa e riprendere.
Aspetto personalizzabile: Adatta l'aspetto e la sensazione del carosello al design del tuo sito regolando elementi come gli effetti di transizione e la durata della visualizzazione.
Schede
La variante Schede 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 Schede quando devi:
Presentare informazioni categorizzate in un formato chiaro e segmentato.
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 servizi o schede informative in modo intuitivo per l'utente.
Funzionalità:
Contenuto segmentato: Organizza i contenuti 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 interruzioni, garantendo un'esperienza fluida e intuitiva.
Design personalizzabile: Adatta l'aspetto delle schede al tuo branding e all'estetica del sito modificando elementi come le etichette delle schede, il layout e le 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 mostrare una raccolta di elementi in cui si desidera dare pari evidenza, ad esempio:
Elenco prodotti
Profili dei membri del team
Anteprime di articoli del blog
Funzionalità
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 ogni cella della griglia
Galleria
Un layout orientato al visual 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
Funzionalità
Focus su immagini grandi e di alta qualità
Opzioni per includere didascalie o funzionalità lightbox per ingrandire le immagini
Potenziale per layout creativi ed effetti al passaggio del mouse
Interazioni
La sezione "Link a" determina cosa succede 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 in una galleria case in evidenza e consenti agli utenti di fare clic su ciascuna immagine per visualizzare maggiori dettagli in una pagina separata.
Aspetto stilistico
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 (Carosello, Schede, Griglia, Galleria).
Dimensione
Larghezza e altezza complessive della galleria.
Bordo
Stile, larghezza e colore del bordo attorno alla galleria.
Didascalia
Stile del testo della didascalia mostrato su ogni elemento.
Titolo
Stile del testo del titolo su ogni elemento.
Contenuto
Stile dell'area del contenuto principale all'interno di ogni elemento.
Media
Come vengono visualizzate immagini e video (adattamento, allineamento, dimensionamento).
Variante Carosello
Si applica solo quando Variante è impostato su Carosello.
Elemento slideshow
Sfondo, allineamento e spaziatura di ciascun elemento del carosello.
Titolo elemento slideshow
Carattere, dimensione e colore dei titoli degli elementi.
Descrizione elemento slideshow
Carattere, dimensione e colore delle descrizioni degli elementi.
Immagine slideshow
Dimensione e bordo delle immagini all'interno di ciascun elemento.
Indicatore attivo slideshow
Stile dell'indicatore dell'elemento attualmente visualizzato.
Indicatore inattivo slideshow
Stile degli indicatori per gli elementi non attivi.
Pulsante di navigazione slideshow
Stile dei pulsanti di navigazione precedente/successivo.
Variante Schede
Si applica solo quando Variante è impostato su Schede.
Scheda
Stile di ogni singola scheda.
Bordo scheda
Bordo attorno a ciascuna scheda.
Bordo scheda attiva/in hover
Bordo per la scheda attiva e lo stato al passaggio del mouse.
Sfondo scheda
Colore di sfondo o immagine per le schede.
Etichetta scheda
Carattere, dimensione e colore delle etichette delle schede.
Sottotitolo scheda
Carattere, dimensione e colore dei sottotitoli delle schede.
Risoluzione dei problemi
Le immagini non vengono mostrate in anteprima in Experience Builder ma vengono visualizzate 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 visualizzate correttamente.
"Nessuna anteprima disponibile" appare in modalità Manuale
L'immagine caricata non è stata contrassegnata come link pubblico, quindi gli utenti del portale non possono caricarla.
Ricarica l'immagine e seleziona Link 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 cambiare un'immagine
La modalità Manuale è un uploader diretto — non fa riferimento ai file Salesforce esistenti.
Usa la modalità Query con ContentVersion o un oggetto personalizzato che contiene riferimenti ai file. Vedi Utilizzare i file Salesforce esistenti come origine multimediale sopra.
La galleria è vuota per gli utenti del portale ma funziona nell'anteprima di Experience Builder
Il profilo dell'utente del portale non ha accesso all'oggetto interrogato o ai file referenziati.
Controlla le autorizzazioni 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é nell'anteprima né nel sito pubblicato)
Media Source è mappato 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 esegui query su ContentVersion, usa il campo standard Version Data URL Per gli oggetti personalizzati, memorizza un ContentDocumentId (che inizia con 069…) e mappa Media Source direttamente a quel campo.
La galleria mostra i titoli corretti ma tutte le immagini sono interrotte
Media Source è mappato a un campo che non contiene un ContentDocumentId o un URL valido.
In Mapping dei dati, conferma che Media Source 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 di notizie per i clienti
Tieni i tuoi clienti informati e coinvolti mostrando i tuoi ultimi articoli direttamente nella home page di Experience Cloud. Il componente AX Gallery rende semplice visualizzare un carosello di notizie dinamico e ricco di immagini che si aggiorna automaticamente quando vengono pubblicati nuovi contenuti.
Cosa otterrai
Contenuti freschi a colpo d'occhio: Metti in evidenza gli articoli Knowledge più recenti nella home page, completi di immagini, così i visitatori non si perderanno nessun aggiornamento.
Navigazione senza sforzo: Permetti ai clienti di scorrere le notizie aziendali in un layout 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__ccampo: Crea un campo di tipo Testo sull'oggetto Knowledge per memorizzare il Content Document ID dell'immagine di ciascun articolo.Type__ccampo: 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
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'ordine di ordinamento su Data di creazione, decrescente così i tuoi articoli più recenti appariranno sempre per primi.
Esempio 2: Galleria prodotti per i clienti
Offri ai tuoi clienti un modo visivamente efficace per scoprire il tuo catalogo prodotti, direttamente dalla home page. Combinando il componente AX Gallery con i dati dei prodotti, puoi creare un carosello accattivante che mette in evidenza i prodotti in primo piano e guida i visitatori direttamente alle pagine di dettaglio dei prodotti.
Cosa otterrai
Una vetrina prodotti visiva: Mostra cuffie in evidenza in un carosello ricco di immagini che incoraggia la navigazione.
Navigazione fluida: Consenti ai clienti di passare dal carosello direttamente alle singole pagine di dettaglio dei prodotti con facilità.
Un'esperienza home page curata: Metti in evidenza i prodotti più importanti mostrando solo il catalogo in primo piano nella home page.
Prima di iniziare
Type__ccampo: Crea un campo Picklist sull'oggetto Product2 e assicurati che il Headphone valore esista, in modo da poter filtrare il carosello sui prodotti corretti.ContentDocumentId__ccampo: Crea un campo di tipo Testo sull'oggetto Product2 per memorizzare l'URL dell'immagine per ogni prodotto.
Come configurarlo
Ultimo aggiornamento
È stato utile?