Liste d’images
Aperçu
Le composant Image List affiche des images soit à partir d'entrées manuelles, soit via des requêtes Salesforce dans quatre styles de mise en page distincts : grille de base, quilted, woven ou masonry. Les utilisateurs peuvent parcourir, rechercher et filtrer les images tandis que des actions optionnelles sur les éléments leur permettent d'interagir avec des éléments individuels. Configurez tout via le panneau Propriétés — du nombre de colonnes responsive aux images de secours pour les sources manquantes.
Cas d'utilisation
Afficher des galeries d'images produit sur les pages d'enregistrement Produit, où les représentants commerciaux doivent voir toutes les photos disponibles.
Construire des pages d'annuaire d'équipe avec des photos d'employés qui renvoient à leurs profils utilisateur.
Créer des vitrines de portfolio sur les Experience Sites pour que les partenaires ou les clients puissent parcourir des exemples de projets.
Afficher des photos de biens dans des annonces immobilières pour que les agents examinent l'inventaire disponible.
Présenter des collections de photos d'événements issues de campagnes marketing avec filtrage par type d'événement ou par date.
Afficher des bibliothèques d'actifs où les utilisateurs peuvent rechercher et filtrer les images par catégorie, nom ou attributs personnalisés.
Démarrage rapide : afficher les photos de Contacts sur une page Compte
Créez une galerie d'images fonctionnelle affichant tous les Contacts associés au Compte courant. Cela utilise des objets Salesforce standard afin que vous puissiez suivre l'exemple dans n'importe quelle organisation.
Prérequis: Vos Contacts doivent avoir des photos. S'ils n'ont pas PhotoUrl renseigné, vous pouvez utiliser l'icône utilisateur standard comme image de secours, ou télécharger des photos sur quelques Contacts de test d'abord.
Créer un nouveau composant dans Dynamic Components
Ouvrez l'application Avonni Dynamic Components depuis l'App Launcher
Cliquez sur Nouveau composant
Donnez un nom à votre composant (par ex. « Galerie de photos des contacts »)
Définir Objet de la page cible sur Compte — cela indique au composant qu'il fonctionnera sur les pages d'enregistrement Compte et vous donne accès à la variable
$Componentpour référencer les champs de l'enregistrement courant.
Configurer la source de données
Dans le panneau Propriétés à droite :
Définir Source de données sur Requête
Cliquez sur Créer une requête
Pour Objet, sélectionnez Contact
Sous Filtres, ajoutez :
AccountId = '$Component.RecordId'Pour Trier par, sélectionnez LastName avec la direction Ascendant
Cliquez sur Terminé pour enregistrer la requête
Mapper vos champs
Dans la section Mappages de données :
Étiquette: Sélectionnez
Name(affiche le nom complet du Contact sous chaque photo)Description: Sélectionnez
Titre(affiche leur intitulé de poste)Source de l'image: Sélectionnez
PhotoUrl(le champ photo standard du Contact)
Remarque
Étiquette et Description sont optionnels. Seule la Source de l'image est requise pour afficher la galerie. Utilisez Étiquette et Description lorsque vous souhaitez montrer un contexte supplémentaire à côté de chaque image — laissez-les vides pour un affichage plus épuré, uniquement image.
Configurer la mise en page
Dans la section Contenu :
Variante: Sélectionnez
Masonrypour une mise en grille propre
Autres options de mise en page :
Quilted — Alterne entre des images à valeur ajoutée plus grandes et des images plus petites, créant une hiérarchie visuelle
Woven — Motif entrelacé qui tisse les images en lignes alternées pour un rendu équilibré
Base —
Dans la section Mise en page :
Nombre de colonnes:
4Nombre de colonnes (petit conteneur):
2Nombre de colonnes (conteneur moyen):
3Nombre de colonnes (grand conteneur):
4
Ajouter une interaction au clic
Rendre les photos de contact cliquables pour naviguer vers l'enregistrement Contact :
Cliquez sur l'onglet Interactions dans le panneau Propriétés
Sous Clic sur l'élément, cliquez sur Ajouter un clic sur l'élément
Dans la boîte de dialogue d'interaction, configurez :
Type: Sélectionnez
NaviguerType de référence de page: Sélectionnez
Page d'enregistrementNom API de l'objet: Sélectionnez
ContactId de l'enregistrement: Sélectionnez
Enregistrement : Id(l'ID du Contact cliqué)Nom de l'action: Saisissez
AfficherOuvrir un onglet de console: Laissez désactivé
Cliquez sur Enregistrer
Désormais, lorsque les utilisateurs cliquent sur une photo de contact, ils naviguent directement vers la page d'enregistrement de ce Contact
Paramètres de configuration
Source de données
Le paramètre Source de données détermine d'où proviennent vos images. Choisissez Manuel pour définir les images directement dans la configuration du composant, ou Requête pour extraire des images dynamiquement à partir des enregistrements Salesforce
Mode
Manuel (contenu statique) ou Requête (enregistrements Salesforce)
Requête
Éléments en mode Manuel
En mode Manuel, vous définissez chaque image directement dans la configuration du composant. Cela fonctionne bien pour des galeries statiques où les images ne changent pas souvent, comme un ensemble fixe d'icônes produit, des bannières d'équipe ou des graphiques pédagogiques.
Étiquette
Nom d'affichage pour l'image
"Vue avant du produit"
Description
Texte de détail supplémentaire affiché avec l'image
"Photo haute résolution montrant..."
Image
URL du fichier image
/resource/products/widget.png
Name
Identifiant interne de l'élément
product-front-01
Mappages de données en mode Requête
En mode Requête, vous connectez les champs Salesforce à l'affichage de la liste d'images. Chaque mappage indique au composant quel champ contient les données pour cet élément — par exemple quel champ contient l'URL de l'image ou l'étiquette d'affichage.
Étiquette
Champ contenant le nom d'affichage
Name, Title__c
Description
Champ contenant le texte de détail
Description__c, Caption__c
Source de l'image
Champ contenant l'URL de l'image
PhotoUrl__c, ImageURL__c
Filtres
Champ pour les valeurs de filtre
Category__c, Type__c
Champs de recherche
Champs à interroger lors de la recherche
Name, Description__c
Contenu
Ces paramètres contrôlent l'apparence générale et le comportement de la liste d'images, y compris la variante de mise en page à utiliser et la manière dont les utilisateurs interagissent avec les éléments.
Variante
Style de mise en page pour les images
Base, Quilted, Woven, Masonry
Afficher le nombre d'éléments
Afficher le nombre total d'images
true / false
Éléments cliquables
Autoriser les utilisateurs à cliquer/taper sur les images
true / false REMARQUE: assurez-vous de configurer l'interaction pour rendre cela fonctionnel
Explication des variantes de mise en page :
Base — Une grille propre et uniforme où toutes les images s'affichent à la même taille. Idéal pour un contenu cohérent comme des portraits ou des vignettes produit.
Quilted — Une mise en page structurée qui alterne entre des images principales plus grandes et des images de soutien plus petites. Crée une hiérarchie visuelle tout en gardant une sensation organisée.
Woven — Un motif entrelacé qui tisse les images ensemble en lignes alternées. Ajoute de l'intérêt visuel tout en gardant un aspect équilibré et symétrique.
Masonry — Une mise en page en style Pinterest en quinconce où les images conservent leurs proportions naturelles. Idéale pour du contenu varié comme des travaux de portfolio, des photos lifestyle ou des images générées par les utilisateurs
En-tête
Ajoutez une zone d'en-tête au-dessus de votre liste d'images avec un titre, une légende, un avatar et des boutons d'action. Utilisez ceci pour étiqueter votre galerie et fournir des actions rapides, comme télécharger de nouvelles images ou changer les options d'affichage.
Titre
Texte principal de l'en-tête
"Galerie de produits"
Légende
Texte secondaire sous le titre
"Cliquez sur une image pour voir les détails"
Image d'avatar
URL de l'avatar/logo de l'en-tête
/resource/logo.png
Est joint
Style visuel reliant l'en-tête au corps
true / false
Actions
Actions de boutons dans la zone d'en-tête
Ajouter une action → Étiquette : "Téléverser"
Boutons d'actions visibles
Nombre d'actions affichées avant débordement
2
Masquer les actions
Masquer toutes les actions de l'en-tête
true / false
Désactiver les actions
Griser les actions de l'en-tête
true / false
Mise en page
Contrôlez le nombre de colonnes affichées selon les tailles d'écran. Définir des valeurs différentes pour les conteneurs petit, moyen et grand assure que votre galerie s'affiche correctement sur mobile, tablette et bureau.
Nombre de colonnes
Nombre de colonnes par défaut
4
Nombre de colonnes (petit conteneur)
Colonnes sur petits écrans
1
Nombre de colonnes (conteneur moyen)
Colonnes sur écrans moyens
2
Nombre de colonnes (grand conteneur)
Colonnes sur grands écrans
4
Image
Configurez la façon dont les images individuelles sont rendues dans la galerie. Définissez une image de secours pour les images manquantes, contrôlez le positionnement de l'image et définissez comment les images sont recadrées pour s'adapter à leurs conteneurs.
Image de secours
URL à afficher lorsque la source de l'image est invalide ou vide
/resource/placeholder.png
Position
Où l'image apparaît dans l'élément
Haut, Bas, Gauche, Droite
Ajustement du recadrage
Comment les images s'adaptent dans leur conteneur
Cover, Contain, Fill
Position du recadrage X
Alignement horizontal des images recadrées
Gauche, Centre, Droite
Position du recadrage Y
Alignement vertical des images recadrées
Haut, Centre, Bas
Actions
.Ajoutez des actions qui apparaissent sur les éléments d'image individuels, comme afficher les détails, télécharger ou modifier. Chaque action peut déclencher une interaction différente lorsqu'on clique
Configurez chaque action d'élément avec une étiquette, une icône et une interaction à déclencher lors du clic.
Pagination
Pour les galeries comportant de nombreuses images, la pagination répartit la collection en pages pour améliorer les temps de chargement et faciliter la navigation. Les utilisateurs naviguent entre les pages à l'aide des contrôles de pagination.
Afficher la pagination
Afficher les contrôles de pagination
true / false
Nombre d'éléments par page
Images affichées avant pagination
12
Filtre
Permettez aux utilisateurs de restreindre la galerie en filtrant sur les valeurs des champs mappés. Choisissez l'emplacement des contrôles de filtre en fonction de la disposition de votre page et de l'importance que vous souhaitez donner au filtrage.
Type
Où apparaissent les contrôles de filtre
Horizontal, Panneau, Popover
Recherche
Activez un champ de recherche qui permet aux utilisateurs de trouver des images en tapant des mots-clés. La recherche correspond aux champs que vous avez spécifiés dans le mappage de données Champs de recherche.
Panneau latéral
Configurez un panneau latéral optionnel pour les filtres, les détails ou du contenu additionnel. Le panneau peut apparaître de part et d'autre et peut démarrer réduit pour économiser de l'espace.
Position
De quel côté apparaît le panneau
Gauche, Droite
Est fermé
Le panneau démarre réduit
true / false
Masquer le bouton bascule
Supprimer le bouton d'extension/réduction
true / false
Étiquette du bouton de réinitialisation
Texte pour l'action de réinitialisation du filtre
"Tout effacer"
Message Aucun résultat
Personnalisez le message que voient les utilisateurs lorsqu'aucune image ne correspond à leurs critères de recherche ou de filtre. Un message utile guide les utilisateurs à ajuster leurs filtres ou à essayer d'autres termes de recherche.
Interactions
Définissez ce qui se passe lorsque les utilisateurs interagissent avec les images de votre galerie. L'onglet Interactions vous permet de configurer des réponses aux clics et aux actions sans écrire de code.
Déclencheurs disponibles
Clic sur l'élément
Se déclenche lorsqu'un utilisateur clique sur une image (nécessite que Éléments cliquables soit activé)
Naviguer vers une page de détail, ouvrir un aperçu en plus grande taille ou afficher des informations associées
Clic sur action d'élément
Se déclenche lorsqu'un utilisateur clique sur un bouton d'action sur un élément d'image
Télécharger l'image, modifier les détails ou supprimer l'enregistrement
Clic sur action d'en-tête
Se déclenche lorsqu'un utilisateur clique sur un bouton d'action dans l'en-tête
Téléverser de nouvelles images, changer les paramètres d'affichage ou exporter la galerie
Configuration des interactions
Sélectionnez l'élément Image List sur votre canevas
Cliquez sur l'onglet Interactions dans le panneau Propriétés
Choisissez un déclencheur (Clic sur élément, Clic sur action d'élément ou Clic sur action d'en-tête)
Cliquez sur Ajouter une action et sélectionnez votre type d'interaction
Configurez les paramètres de l'action et enregistrez
Schémas d'interaction courants
Naviguer vers l'enregistrement au clic
Permettez aux utilisateurs de cliquer sur une image pour voir l'enregistrement complet :
Définir Éléments cliquables à Activé dans les paramètres de Contenu
Dans Interactions, sélectionnez Clic sur l'élément
Ajouter une action → Naviguer
Définir la cible sur Page d'enregistrement
Mappez l'ID de l'enregistrement sur le champ ID de votre enregistrement d'image
Ouvrir un aperçu en taille réelle dans un panneau
Afficher une version agrandie de l'image dans un panneau latéral :
Définir Éléments cliquables à Activé dans les paramètres de Contenu
Dans Interactions, sélectionnez Clic sur l'élément
Ajouter une action → Ouvrir le panneau de composant dynamique
Sélectionnez un composant dynamique configuré pour afficher l'image complète
Passez l'URL de la source de l'image en tant que variable d'entrée
Exemple : créer une galerie de photos produit
Ce tutoriel vous explique comment créer une galerie de photos de style Pinterest qui s'affiche sur les pages d'enregistrement Produit. Les utilisateurs pourront parcourir les images produit, filtrer par catégorie et cliquer sur les photos pour effectuer des actions.
Ce que vous allez construire
Une galerie en disposition masonry affichant toutes les photos associées au Produit courant. La galerie inclut des filtres horizontaux par catégorie, une pagination pour les collections étendues et des images cliquables.
Où elle apparaîtra
Une fois que vous aurez construit et déployé ce composant, il apparaîtra sur les pages d'enregistrement Produit dans Lightning Experience. Lorsqu'un utilisateur ouvre n'importe quel enregistrement Produit, il voit la galerie de photos montrant toutes les images liées à ce Produit spécifique. Le composant filtre automatiquement pour n'afficher que les photos appartenant au Produit consulté
Prérequis
Cet exemple suppose que vous disposez d'un objet personnalisé pour stocker les photos produit. Si vous n'en avez pas, créez un objet personnalisé appelé Photo Produit (Nom API : Product_Photo__c) avec ces champs
Nom de la photo
Name
Texte (standard)
Produit
ProductId__c
Lookup (vers Product2)
URL de la photo
PhotoURL__c
URL
Légende
Caption__c
Texte
Catégorie
Category__c
Liste de sélection (par ex. Vue avant, Vue latérale, Détail, Lifestyle)
Ordre de tri
SortOrder__c
Nombre
Créer un nouveau composant dans Dynamic Components
Ouvrez l'application Avonni Experiences depuis l'App Launcher
Cliquez sur Commencer sur la carte Dynamic Components
Cliquez sur Nouveau composant
Donnez un nom à votre composant (par ex. « Galerie de photos produit »)
Définir Objet de la page cible sur Produit — cela indique au composant qu'il fonctionnera sur les pages d'enregistrement Produit et vous donne accès à la variable
$Componentpour référencer les champs de l'enregistrement courant
Configurer la source de données
Avec l'élément Image List sélectionné, configurez la requête dans le panneau Propriétés :
Définir Source de données sur Requête
Cliquez sur Créer une requête
Objet: Sélectionnez
Product_Photo(l'objet personnalisé que vous avez créé dans les Prérequis)Filtres: Ajoutez
ProductId__c = '{{$Component.recordId}}'— cela filtre les photos pour n'afficher que les enregistrements où le lookup Produit correspond à l'enregistrement Produit que l'utilisateur consulte actuellementTrier par: Sélectionnez
SortOrder__cavec la direction AscendantCliquez sur Terminé
Mapper vos champs
Dans la section Mappages de données section, connectez vos champs Salesforce à l'affichage de la galerie :
Étiquette: Sélectionnez
Nom de la photo— affiche le nom de la photo sous chaque imageDescription: Sélectionnez
Caption__c— affiche un contexte supplémentaire pour la photoSource de l'image: Sélectionnez
PhotoURL__c— l'image réelle à afficherFiltres: Sélectionnez
Category__c— permet de filtrer par cette liste de sélection
Configurer les colonnes responsives
Dans la section Mise en page section, configurez le nombre de colonnes affichées selon les tailles d'écran :
Nombre de colonnes (petit conteneur):
1— colonne unique sur mobileNombre de colonnes (conteneur moyen):
2— deux colonnes sur tablettesNombre de colonnes (grand conteneur):
3— trois colonnes sur bureau
Ajouter une interaction au clic
Désormais, lorsque les utilisateurs cliquent sur une photo dans la galerie, ils naviguent directement vers la page d'enregistrement de cette Photo produit
Cliquez sur l'onglet Interactions dans le panneau Propriétés
Sous Clic sur l'élément, cliquez sur Ajouter un clic sur l'élément
Dans la boîte de dialogue d'interaction, configurez :
Type: Sélectionnez
NaviguerType de référence de page: Sélectionnez
Page d'enregistrementNom API de l'objet: Sélectionnez
Photo ProduitId de l'enregistrement: Sélectionnez
Enregistrement : Id(l'ID de l'enregistrement d'image cliqué)Nom de l'action: Saisissez
AfficherOuvrir un onglet de console: Laissez désactivé
Cliquez sur Enregistrer
Ce que vous devriez voir
Votre galerie affiche les photos produit dans une disposition masonry, avec des images de hauteurs variées élégamment agencées. Au-dessus de la galerie, des boutons de filtrage horizontaux permettent aux utilisateurs de filtrer par catégorie (Vue avant, Vue latérale, etc.). Les contrôles de pagination apparaissent en bas lorsqu'il y a plus de 9 photos.
Mis à jour
Ce contenu vous a-t-il été utile ?