AX - Galerie
Aperçu
AX - Galerie est un composant Experience Cloud qui affiche des images et du contenu selon quatre styles de mise en page sur les pages des sites Experience : carrousel (diaporama), onglets (sections organisées), grille (multi-colonnes) ou galerie (présentation d’images).
Utilisez-le pour afficher des photos de produits, des portfolios de projets, des images d’études de cas, des collections de ressources ou tout autre contenu visuel que les utilisateurs du portail doivent parcourir. Configurez le style de mise en page, la navigation et les sources d’images dans Experience Builder sans code.
Prise en main
Utilisez ce tutoriel simple pour apprendre les bases du composant Galerie et commencer à créer vos cas d’usage.
Configuration
Source de données
La Source de données est l’endroit où vous définissez le contenu de votre galerie. AX - Gallery prend en charge deux types de sources de données : Manuel et Requête. (Définissez un Nom de l'API pour donner au composant un identifiant unique, et Position du média pour placer le média de chaque élément par rapport à son contenu.)
Manuel
Téléchargez ou saisissez chaque élément de la galerie directement dans le composant. Chaque image ajoutée via le sélecteur de source média crée un nouveau fichier dans votre bibliothèque Salesforce Files.
Galeries ponctuelles avec du contenu statique qui change rarement (hero de page d’accueil, vitrine produit fixe, démonstrations).
Requête
Récupérez dynamiquement les éléments depuis un objet Salesforce (Product, Knowledge, ContentVersion, objet personnalisé…). La galerie se met à jour automatiquement lorsque les enregistrements sous-jacents changent.
Tout contenu qui doit rester synchronisé avec les données Salesforce, être renouvelé régulièrement ou être géré par une équipe non technique en dehors d’Experience Builder.
Choisir entre Manuel et Requête
Le mode Manuel crée un tout nouveau fichier dans la bibliothèque à chaque fois que vous téléchargez une image. Il ne fait pas référence aux fichiers déjà existants dans Salesforce Files. Si vous devez réutiliser ou mettre à jour le contenu de votre galerie sans rouvrir le panneau Propriétés, utilisez Requête à la place.
Partage des données avec Avonni AX - Gallery
Respect des règles de partage des données Salesforce :
Respect des paramètres de l’organisation : Les composants Avonni respectent pleinement les configurations de partage des données et les paramètres d’accès existants de votre organisation Salesforce.
Politique de non-interférence : Ces composants ne modifient ni n’affectent en aucune manière vos règles de partage des données prédéfinies.
Visibilité et accès contrôlés : La possibilité de consulter et d’interagir avec les enregistrements via les composants Avonni est régie par les paramètres de partage et les autorisations utilisateur définis par votre organisation
Utilisation de fichiers Salesforce Files existants comme source média
La Source média dans AX - Gallery est flexible quant aux données que vous lui fournissez. Vous pouvez le mapper à une URL, à un ContentDocumentId ou à un chemin de téléchargement complet de Salesforce Files. Le composant détecte automatiquement les ContentDocumentId et les résout vers l’URL d’aperçu correcte au moment de l’affichage.
C’est ainsi que vous conservez une galerie pointant vers des fichiers dans la bibliothèque Salesforce Files sans jamais les recharger via le composant.
Un champ contenant un ContentDocumentId (commençant par 069…)
La dernière version du fichier est résolue et affichée. Le composant détecte automatiquement les 069… IDs.
Le champ standard VersionDataURL lors de la requête sur ContentVersion
Le fichier est téléchargé et affiché. Recommandé lorsque votre objet source est ContentVersion.
Un URL Shepherd construite avec une expression telle que /sfc/servlet.shepherd/version/download/{{Record.Id}}
La version exacte référencée dans l’URL est affichée. Utile pour la construction d’URL personnalisées.
Un URL publique (image externe hébergée ailleurs)
L’image est chargée depuis la source externe.
Comment le configurer en mode Requête
Dans le Source de données, sélectionnez Requête et choisissez votre objet source (
ContentVersion, un objet personnalisé contenant des références de fichiers, ou tout objet avec un champ image).Appliquez un filtre qui identifie quels enregistrements doivent apparaître (par convention de titre, étiquette, champ personnalisé, valeur de liste de sélection, etc.).
Dans Mappages de données, mappez Source média en fonction de votre objet source :
Requête sur ContentVersion : mappez la source média au champ standard
Version Data URL.Requête sur un objet personnalisé avec un champ ContentDocumentId : mappez la source média directement vers ce champ (le composant détecte automatiquement les
069…IDs et les résout).Requête sur tout objet avec un champ d’URL d’image complet : mappez la source média directement vers ce champ.
Une fois configuré, la mise à jour du contenu de votre galerie se résume à remplacer les fichiers dans la bibliothèque Salesforce Files ou à mettre à jour le champ de référence sur vos enregistrements.
Aperçu d’Experience Builder
Les images pointant vers Salesforce Files peuvent ne pas s’afficher dans l’aperçu d’Experience Builder, car le générateur ne s’authentifie pas en tant qu’utilisateur du portail. Elles s’afficheront correctement une fois connecté au site publié en tant qu’utilisateur de la communauté
Variante
Carrousel
La variante Carrousel offre une manière dynamique et attrayante de mettre en valeur votre contenu, vos images ou vos cartes. Elle est conçue pour afficher les éléments successivement sous forme de diaporama, ce qui en fait un excellent choix pour mettre en avant du contenu vedette, des images de produits ou des annonces importantes.
Quand l’utiliser : Utilisez la variante Carrousel lorsque vous souhaitez :
Attirer l’attention des utilisateurs avec une présentation visuellement attrayante.
Afficher plusieurs éléments ou images de manière économe en espace.
Créer des bannières rotatives ou des sections de contenu vedette sur votre site.
Fonctionnalités :
Contrôles de navigation : Naviguez dans le carrousel à l’aide de contrôles intuitifs tels que des boutons fléchés ou des points de pagination.
Option de lecture automatique : Configurez le carrousel pour faire défiler les éléments automatiquement, avec la possibilité de mettre en pause et de reprendre.
Apparence personnalisable : Adaptez l’apparence et le style du carrousel à la conception de votre site en ajustant des éléments tels que les effets de transition et la durée d’affichage.
Onglets
La variante Onglets introduit une approche organisée et structurée de la présentation du contenu. Cette variante est idéale pour catégoriser les informations, offrant une mise en page propre et structurée qui permet aux utilisateurs de naviguer rapidement entre les différentes sections de contenu et d’y accéder.
Quand l’utiliser : Envisagez la variante Onglets lorsque vous devez :
Présenter des informations catégorisées dans un format clair et segmenté.
Permettre aux utilisateurs de basculer facilement entre différentes sections de contenu sans quitter la page.
Organiser du contenu tel que des spécifications de produit, des catégories de services ou des onglets d’information de manière conviviale.
Fonctionnalités :
Contenu segmenté : Organisez votre contenu en onglets clairement définis, afin que les utilisateurs puissent trouver et consulter facilement différentes sections.
Navigation conviviale : Permettez aux utilisateurs de passer d’un onglet à l’autre en toute fluidité, pour une expérience fluide et intuitive.
Conception personnalisable : Adaptez l’apparence des onglets à votre image de marque et à l’esthétique de votre site en modifiant des éléments tels que les libellés des onglets, la mise en page et les palettes de couleurs.
Grille
Présente le contenu dans une mise en page structurée en plusieurs colonnes. Chaque élément occupe une cellule dans la grille.
Quand l’utiliser : Idéal pour afficher une collection d’éléments auxquels on souhaite accorder la même importance, tels que :
Listes de produits
Profils des membres de l’équipe
Aperçus d’articles de blog
Fonctionnalités
Nombre de colonnes personnalisable
Possibilité de définir l’espacement (écart) entre les éléments
Options pour les images, titres, descriptions et boutons d’appel à l’action dans chaque cellule de la grille
Galerie
Une mise en page axée sur le visuel qui met en avant les images.
Quand l’utiliser : Idéal pour mettre en valeur du contenu basé sur des images, comme :
Portfolios photo
Galeries de produits
Contenu vedette centré sur l’image
Fonctionnalités
Accent mis sur de grandes images de haute qualité
Options pour inclure des légendes ou une fonctionnalité de visionneuse pour zoomer sur les images
Possibilité de mises en page créatives et d’effets de survol
Interactions
La section « Lien vers » détermine ce qui se passe lorsqu’un utilisateur clique sur un élément de votre galerie Avonni. Utilisez-la pour diriger les utilisateurs vers des pages détaillées, ouvrir de nouveaux contenus ou déclencher d’autres actions.
Exemple :
Par exemple, présentez des maisons vedettes dans une galerie et permettez aux utilisateurs de cliquer sur chaque image pour voir plus de détails sur une page séparée.
Style
Les attributs de style vous permettent de contrôler l’apparence visuelle de chaque élément de la galerie. Les paramètres sont regroupés selon ce qu’ils affectent.
S’applique à toutes les variantes (Carrousel, Onglets, Grille, Galerie).
Taille
Largeur et hauteur globales de la galerie.
Bordure
Style, largeur et couleur de la bordure autour de la galerie.
Légende
Style du texte de légende affiché sur chaque élément.
Titre
Style du texte du titre sur chaque élément.
Contenu
Style de la zone de contenu principale à l’intérieur de chaque élément.
Média
La manière dont les images et les vidéos sont affichées (ajustement, alignement, dimensionnement).
S’applique uniquement lorsque Variante est défini sur Carrousel.
Élément du diaporama
Arrière-plan, alignement et espacement de chaque élément du carrousel.
Titre de l’élément du diaporama
Police, taille et couleur des titres des éléments.
Description de l’élément du diaporama
Police, taille et couleur des descriptions des éléments.
Image du diaporama
Taille et bordure des images à l’intérieur de chaque élément.
Indicateur actif du diaporama
Style de l’indicateur pour l’élément actuellement affiché.
Indicateur inactif du diaporama
Style des indicateurs pour les éléments non actifs.
Bouton de navigation du diaporama
Style des boutons de navigation précédent/suivant.
S’applique uniquement lorsque Variante est défini sur Onglets.
Onglet
Style de chaque onglet individuel.
Bordure de l’onglet
Bordure autour de chaque onglet.
Bordure de l’onglet actif/au survol
Bordure de l’onglet actif et au survol.
Arrière-plan des onglets
Couleur ou image d’arrière-plan des onglets.
Libellé de l’onglet
Police, taille et couleur des libellés d’onglet.
Sous-titre de l’onglet
Police, taille et couleur des sous-titres d’onglet.
Dépannage
Les images ne s’aperçoivent pas dans Experience Builder mais s’affichent correctement sur le site publié
Experience Builder ne s’authentifie pas en tant qu’utilisateur du portail, il ne peut donc pas récupérer les images depuis Salesforce Files pendant l’aperçu.
Comportement attendu. Connectez-vous au site publié en tant qu’utilisateur de la communauté pour vérifier que les images s’affichent correctement.
« Aucun aperçu disponible » apparaît en mode Manuel
L’image téléchargée n’a pas été marquée comme lien public, donc les utilisateurs du portail ne peuvent pas la charger.
Téléchargez à nouveau l’image et cochez lien public au moment du téléchargement, ou passez en mode Requête où les règles de partage standard s’appliquent.
Le mode Manuel vous oblige à recharger chaque fois que vous souhaitez modifier une image
Le mode Manuel est un téléverseur direct — il ne fait pas référence aux fichiers Salesforce Files existants.
Utilisez Requête le mode avec ContentVersion ou un objet personnalisé contenant des références de fichiers. Voir Utilisation de fichiers Salesforce Files existants comme source média ci-dessus.
La galerie est vide pour les utilisateurs du portail mais fonctionne dans l’aperçu d’Experience Builder
Le profil de l’utilisateur du portail n’a pas l’accès à l’objet interrogé ou aux fichiers référencés.
Vérifiez les autorisations d’objet du profil, la sécurité au niveau du champ et l’accès à la bibliothèque/au partage sur ContentVersion ou l’objet source.
Les images ne s’affichent pas du tout (ni dans l’aperçu ni sur le site publié)
Media Source est mappé à un champ qui ne contient pas une référence de fichier valide (ContentDocumentId commençant par 069…, le Version Data URL champ sur ContentVersion, ou une URL d’image publique).
Vérifiez le contenu réel du champ mappé. Lors d’une requête sur ContentVersion, utilisez le champ standard Version Data URL Pour les objets personnalisés, stockez un ContentDocumentId (commençant par 069…) et mappez directement la source média vers ce champ.
La galerie affiche les bons titres mais toutes les images sont cassées
Media Source est mappé à un champ qui ne contient pas de ContentDocumentId ni d’URL valide.
Dans les mappages de données, vérifiez que Media Source pointe vers un champ ContentDocumentId, une URL Shepherd ou une URL d’image publique valide.
Cas d'utilisation
Exemple 1 : Carrousel des actualités clients
Tenez vos clients informés et engagés en présentant vos derniers articles directement sur la page d’accueil de votre Experience Cloud. Le composant AX Gallery facilite l’affichage d’un carrousel d’actualités dynamique et riche en images qui se met à jour automatiquement au fur et à mesure de la publication de nouveaux contenus.
Ce que vous allez accomplir
Du contenu récent en un coup d’œil : Mettez en avant vos articles Knowledge les plus récents sur la page d’accueil, avec des images, afin que les visiteurs ne manquent aucune mise à jour.
Navigation sans effort : Laissez les clients faire défiler les actualités de l’entreprise dans une mise en page de carrousel claire et structurée.
Filtrage ciblé : Affichez uniquement les articles News en exploitant un champ de liste de sélection personnalisé, afin que le carrousel reste ciblé et pertinent.
Avant de commencer
ImageId__cchamp : Créez un champ Texte sur l’objet Knowledge pour stocker l’ID de document de contenu de l’image de chaque article.Type__cchamp : Créez un champ Liste de sélection sur l’objet Knowledge pour catégoriser les articles, en vous assurant que la News existe et est appliquée à vos articles.
Comment le configurer
Configurez votre source de données
Créez une nouvelle requête dans la configuration de la source de données.
Sélectionnez Knowledge comme objet (veillez à sélectionner la deuxième option Knowledge dans la liste).
Ajoutez un filtre : Type__c égal à
News.Définissez l’ordre de tri sur Date de création, décroissant afin que vos articles les plus récents apparaissent toujours en premier.
Exemple 2 : Galerie de produits clients
Offrez à vos clients un moyen visuellement convaincant de découvrir votre catalogue de produits, directement depuis votre page d’accueil. En combinant le composant AX Gallery avec vos données Product, vous pouvez créer un carrousel accrocheur qui met en avant les produits vedettes et guide les visiteurs directement vers les pages de détails des produits.
Ce que vous allez accomplir
Une vitrine produit visuelle : Affichez des écouteurs vedettes dans un carrousel riche en images qui donne envie de parcourir.
Navigation fluide : Permettez aux clients de passer facilement du carrousel aux pages de détails de chaque produit.
Une expérience d’accueil sélectionnée avec soin : Mettez en avant les produits les plus importants en ne présentant sur la page d’accueil que votre catalogue vedette.
Avant de commencer
Type__cchamp : Créez un champ Liste de sélection sur l’objet Product2 et assurez-vous que le Headphone existe, afin de pouvoir filtrer le carrousel sur les bons produits.ContentDocumentId__cchamp : Créez un champ Texte sur l’objet Product2 pour stocker l’URL de l’image de chaque produit.
Comment le configurer
Mis à jour
Ce contenu vous a-t-il été utile ?