Répéteur
Aperçu
Le composant Repeater crée des sections dynamiques et répétées à partir de votre source de données. Il fonctionne comme une boucle : vous concevez un modèle une fois avec des composants Avonni, et le Repeater génère ce modèle pour chaque enregistrement de votre requête ou variable.
Principales fonctionnalités
Contrôle complet de la mise en page: Contrairement aux vues de liste standard avec des colonnes fixes, vous définissez exactement comment chaque élément s'affiche—combinez Texte, Indicateurs, Avatars, Boutons, Barres de progression, et plus encore dans n'importe quel agencement
Liaison de données: Accédez aux données de l'enregistrement courant avec
{!Repeater1.CurrentRecord.FieldName}ou aux objets liés via{!Repeater1.CurrentRecord.Account.Name}Requêtes imbriquées: Les composants à l'intérieur du Repeater peuvent avoir leurs propres sources de données—placez un Metric qui additionne les Opportunités enfants pour chaque Compte dans la boucle
Contrôles intégrés: Comprend la pagination, la recherche, le filtrage et des mises en page réactives prêtes à l'emploi
Applications courantes
Affichages d'enregistrements sous forme de cartes, galeries de produits, annuaires consultables, sections de tableaux de bord, vues de données agrégées, files d'approbation et bibliothèques de ressources.
Restriction: Les composants d'affichage de données ne peuvent pas être ajoutés au Repeater pour optimiser les performances.
Démarrage rapide : afficher les opportunités à forte valeur dans une grille visuelle
Scénario: Votre équipe commerciale doit rapidement identifier quels prospects valent la peine d'être poursuivis. Au lieu de parcourir une vue de liste simple, vous allez créer un tableau de bord visuel qui affiche les opportunités à forte valeur (10k$+) en phase de prospection sous forme de cartes faciles à scanner.
Ce que vous allez construire: Une grille de cartes à 3 colonnes où chaque carte affiche l'icône, le nom et la valeur de l'affaire—filtrée automatiquement pour les affaires en phase de prospection supérieures à 10k$.
Temps de réalisation: 5 minutes.
Ajoutez le Repeater à votre composant dynamique
Ouvrez l'application Avonni Dynamic Components et créez un nouveau composant dynamique (ou ouvrez-en un existant). Depuis la bibliothèque de composants, faites glisser le Repeater sur votre canevas.
Connectez vos données
Définissez la source de données sur Requête
Cliquez sur le constructeur de requêtes pour créer une nouvelle requête sur l' Opportunité objet
Ajoutez vos filtres pour restreindre les données :
Montant supérieur à 10000
(Optionnel) Triez par Montant décroissant pour afficher d'abord les plus grosses affaires
Cliquez Terminé pour enregistrer votre requête
Construisez votre carte d'opportunité
Passons à la partie amusante—créons une carte soignée pour chaque opportunité :
Faites glisser un Objet Média composant dans l'emplacement du Repeater
Dans l'emplacement gauche de l'Objet Média, ajoutez un Avatar composant :
Définissez le nom de l'icône de secours sur
standard:opportunityDéfinissez les initiales sur
{!Repeater1.CurrentRecord.Name}(cela affichera les premières lettres du nom de l'opportunité) et réglez-le sur « Initial Auto Formatted »
Dans la zone de contenu principal de l'Objet Média, ajoutez un Texte composant :
Définissez la valeur sur
{!Repeater1.CurrentRecord.Name}Mettez-le en gras en utilisant les options de formatage
Sous ce texte, ajoutez un Indicateur composant :
Définissez l'étiquette sur « Valeur de l'affaire »
Définissez la valeur sur
{!Repeater1.CurrentRecord.Amount}Activez le formatage monétaire
Ajoutez une icône comme
utility:moneybagpour l'attrait visuel
Personnalisez la mise en page du Repeater
Rendez votre tableau de bord visuellement organisé et professionnel :
Configurez la mise en grille Dans la Section Mise en page:
Définissez Nombre de colonnes sur 3 (dispose les opportunités en une grille de 3 colonnes)
Définissez Séparateur sur Carte style (ajoute une séparation visuelle entre chaque carte d'opportunité)
Ajoutez un titre au tableau de bord Dans la Section en-tête:
Définissez Titre sur quelque chose de descriptif comme « Prospects à forte valeur » ou « Pipeline prioritaire »
(Optionnel) Ajoutez une Légende comme « Phase de prospection • 10k$+ »
Ceci crée un tableau de bord soigné et facile à scanner au lieu d'une simple liste empilée
Enregistrez et ajoutez-le à une page Lightning
Maintenant que votre composant dynamique est construit et enregistré, vous devez le placer sur une page Lightning afin que les utilisateurs puissent le voir. Lightning App Builder utilise un conteneur générique AX - Dynamic Component que vous ferez glisser sur la page, puis configurerez pour afficher votre composant spécifique
Cliquez Enregistrer dans le générateur de composants dynamiques, puis Activez votre composant
Ouvrez Lightning App Builder et naviguez vers la page où vous voulez le tableau de bord (page d'accueil, page Opportunités, etc.)
Depuis la liste des composants à gauche, faites glisser le AX - Dynamic Component sur votre page
Dans le Panneau des propriétés à droite, utilisez le menu déroulant pour sélectionner votre composant dynamique nouvellement créé dans la liste des composants disponibles
Enregistrer et Activez la page
Votre tableau de bord de prospection à forte valeur est maintenant en ligne ! Les commerciaux peuvent désormais rapidement repérer les affaires à prioriser sans parcourir des vues de liste.
Voilà ! Vous venez de créer un tableau de bord d'opportunités professionnel affichant les noms d'opportunités, les avatars et les valeurs des affaires dans une mise en page attrayante en cartes—une carte pour chaque enregistrement renvoyé par votre requête. Une fois votre composant dynamique enregistré, vous pouvez le placer sur n'importe quelle page Lightning (pages Compte, page d'accueil, pages d'applications personnalisées) et il affichera automatiquement vos opportunités.
À partir d'ici, vous pouvez améliorer davantage vos cartes en ajoutant des boutons (pour naviguer vers les enregistrements), des indicateurs supplémentaires (date de clôture, probabilité) ou des badges d'état (indicateurs d'étape avec couleurs).
Comment fonctionne le Repeater : concepts de base
Avant d'entrer dans la configuration détaillée, comprendre ces trois concepts de base vous aidera à configurer efficacement le Repeater.
Flux de configuration
Suivez ce flux pour configurer n'importe quel composant Repeater :
Étape 1 : Ajouter et nommer le composant Faites glisser le Repeater sur le canevas de votre composant dynamique. Dans le panneau des propriétés, définissez un nom API clair (par ex. « ContactRepeater », « OppCards ») car vous y ferez référence dans les liaisons.
Principe clé: Le Répéteur est un outil de multiplication. Tout ce que vous construisez dans l'emplacement est multiplié par le nombre d'enregistrements de votre source de données. Concevez un élément correctement, et le Répéteur s'occupe du reste.
Configuration
Propriétés de base
La section Propriétés de base définit comment votre Répéteur se connecte aux données et affiche le contenu répété. Ces paramètres déterminent quels enregistrements sont affichés, comment ils sont filtrés et comment les utilisateurs interagissent avec les données.
Nom API
Texte
Identifiant unique (utilisé dans les liaisons comme {!Repeatable1.CurrentRecord.Field}).
OppRepeater
Source de données
Sélectionner
Source de la répétition : variable (depuis une ressource Variable) ou requête (requête Salesforce).
requête (objet Opportunity).
Mappages de données
Paramètres
Sous-options : Filtres (conditions réactives), Champs de recherche (pour les colonnes recherchables), Message Aucun Résultat (texte personnalisé si vide).
Filtres : Stage = "Closed Won" ; Message : "Aucune opportunité trouvée."
Bonne pratique : Utilisez des requêtes pour les données Salesforce ; mappez les filtres aux Variables pour un contrôle dynamique.
Mise en page
La section Mise en page contrôle la façon dont les sections répétées sont affichées dans votre composant. Ces options vous permettent d'agencer le contenu de manière réactive sur différentes tailles d'écran — que vous conceviez un formulaire à une seule colonne, un tableau de bord multi-colonnes ou une grille dynamique.
Alignement
Sélectionner
Flux de section : vertical (empilé) ou horizontal (grille).
horizontal.
Nombre de colonnes
Sélectionner
Colonnes par défaut : 1, 2, 3, 4, 6, 12.
3.
Nombre de colonnes Petit
Sélectionner
Colonnes pour petits écrans/conteneurs.
1.
Nombre de colonnes Moyen
Sélectionner
Colonnes pour écrans/conteneurs moyens.
2.
Nombre de colonnes Grand
Sélectionner
Colonnes pour grands écrans/conteneurs.
4.
Séparateur
Basculer/Sélectionner
Ajouter des séparateurs entre les sections (par ex., lignes ou espaces).
Activé, style : "solid".
En-tête
La section En-tête vous permet de définir un en-tête riche et informatif pour votre Répéteur. Cet en-tête peut inclure un titre, un sous-titre, des icônes ou avatars, et des boutons d'action, offrant aux utilisateurs un contexte immédiat et des contrôles interactifs. Vous pouvez aussi afficher des métadonnées telles que le nombre d'éléments et relier visuellement l'en-tête à son contenu.
Titre
Texte
Texte principal de l'en-tête.
"Opportunities"
Légende
Texte (Optionnel)
Sous-texte sous le titre.
"Active deals"
Avatar
Paramètres
Sous-options : Image (URL), Nom d'icône de secours (icône SLDS), Initiales (texte).
Icône : standard:opportunity
Texte d'aide
Texte (Optionnel)
Info-bulle d'orientation.
"Cliquer pour voir les détails."
Est joint
Booléen
Relie visuellement l'en-tête au contenu (par ex., pas de bordure inférieure).
Activé.
Afficher le nombre d'éléments
Booléen
Affiche le nombre d'éléments (par ex., "5 éléments").
Activé.
Action
Paramètres
Ajouter des boutons d'en-tête pour les actions (configurer dans Interactions).
Bouton "Ajouter".
Masquer les actions
Booléen
Masque les boutons d'action.
Désactivé.
Désactiver les actions
Booléen
Désactive les boutons d'action.
Désactivé.
Pagination, Filtre et Recherche
Cette section améliore la navigation et la gestion des données pour les éléments répétés, en particulier avec de grands ensembles de données. Ces contrôles aident les utilisateurs à localiser, parcourir par pages et affiner facilement les éléments qu'ils voient.
Afficher la pagination
Booléen
Active la pagination ; définissez le Nombre d'éléments par page (par ex., 10).
Nombre d'éléments par page
Nombre (si pagination activée)
Éléments affichés par page.
Type de filtre
Sélectionner
Affichage du filtre : horizontal (en ligne), popover (menu déroulant), panneau (latéral).
Afficher la recherche
Booléen
Ajoute une barre de recherche ; utilise les Champs de recherche mappés.
Panneau latéral
Les paramètres du panneau latéral contrôlent où apparaissent les contrôles de filtre et de recherche lorsqu'on utilise le type de filtre "panneau". Plutôt que d'afficher les filtres en ligne avec votre contenu, le panneau crée une barre latérale rétractable pour un agencement plus épuré.
Position
Sélectionner
Emplacement du panneau : gauche ou droite.
droite.
Est fermé
Booléen
État initial : Activé = replié.
Activé.
Masquer le bouton bascule
Booléen
Masque le bouton bascule d'ouverture/fermeture.
Désactivé.
Libellé du bouton Réinitialiser
Texte
Libellé du bouton de réinitialisation dans le panneau.
"Effacer".
Quand utiliser le panneau latéral
Vous avez plusieurs options de filtre et voulez garder votre zone de contenu principale épurée
Les utilisateurs ont besoin d'accéder aux filtres mais n'ont pas besoin qu'ils soient visibles en permanence
Vous créez un annuaire ou catalogue consultable où les filtres sont secondaires par rapport à la navigation
Comment ça marche
Dans le Filtrer section, définissez Type de filtre sur "panneau"
Configurer le panneau latéral Position (gauche ou droite)
Définissez Est fermé sur Activé si vous voulez que le panneau soit replié par défaut
Les utilisateurs cliquent sur le bouton bascule pour ouvrir/fermer le panneau de filtre
Astuce: Utilisez la position du panneau du côté opposé à vos actions principales. Par exemple, si vous avez des boutons d'action sur le côté droit des cartes, placez le panneau de filtre à gauche pour éviter l'encombrement visuel
Exemples
Exemple 1 : Lister les responsables de compte par montant total d'opportunités
Affichez une liste des responsables de compte et le montant total des opportunités clôturées cette année. Cet exemple utilise le Répéteur Avonni pour itérer une requête et le composant Avonni Metric pour afficher les résultats pour chaque responsable.
Configurer la source de données
Dans le panneau des propriétés du Répéteur, localisez la section Propriétés de base et définissez la Source de données sur "Requête". Cliquez sur le bouton de configuration pour ouvrir le générateur de requêtes. Dans le générateur de requêtes :
Sélectionnez l' Utilisateur objet dans le menu déroulant des objets
Ajoutez un filtre pour limiter aux responsables de compte : cliquez sur "Ajouter un filtre" et définissez UserRole.Name égal à "Account Executive" (ou utilisez Profile.Name si votre organisation structure les rôles différemment)
Optionnellement, ajoutez un autre filtre comme IsActive égal à "True" pour n'afficher que les utilisateurs actifs
Cliquez sur "Terminé" pour enregistrer votre requête
Le Répéteur récupérera désormais tous les responsables de compte actifs dans votre organisation.
Insérer une métrique à l'intérieur du Repeatable
Depuis la bibliothèque de composants, faites glisser le Avonni Metric composant dans la zone d'emplacement du Répéteur (la section vide étiquetée "Déposez les composants ici"). Une fois placé, cliquez sur le composant Metric pour ouvrir son panneau de propriétés. Dans la section Propriétés de base :
Définissez la Source de données sur "Requête"
Cliquez sur le bouton de configuration de la requête
Sélectionnez l' Opportunité objet
Dans la section Champ, choisissez Montant dans le menu déroulant
Définissez la fonction d'agrégation sur SUM (cela calculera le total de tous les montants d'opportunité)
Laissez les filtres vides pour l'instant — nous ajouterons le filtre critique à l'étape suivante
Cliquez sur "Terminé" pour enregistrer
À ce stade, la Metric interroge toutes les opportunités de votre organisation, mais nous devons la filtrer pour n'afficher que les opportunités de chaque utilisateur spécifique.
Filtrer par utilisateur
C'est l'étape cruciale qui relie chaque Metric à son responsable de compte correspondant. Avec le composant Metric toujours sélectionné, retournez à sa configuration de requête :
Cliquez sur "Ajouter un filtre" dans le générateur de requêtes
Définissez le champ du filtre sur OwnerId (c'est le champ qui suit qui possède chaque opportunité)
Définissez l'opérateur sur "Égale"
Pour la valeur, cliquez sur l'icône formule/variable et saisissez :
{!Repeater1.CurrentRecord.Id}(si le Nom API de votre Répéteur est différent de "Repeater1", utilisez ce nom à la place)Cliquez sur "Terminé"
Cette liaison garantit qu'à mesure que le Répéteur parcourt chaque responsable de compte, la Metric ne compte que les opportunités appartenant à cet utilisateur spécifique. {!Repeater1.CurrentRecord.Id} référence dynamiquement l'ID de l'utilisateur courant à chaque itération..
Ajuster les paramètres de la métrique
Maintenant que les données circulent correctement, peaufinez l'apparence de la Metric pour une meilleure lisibilité :
Activer l'avatar (optionnel) :
Dans le panneau de propriétés de la Metric, faites défiler jusqu'à la section Avatar
Activez "Afficher l'avatar"
Définissez le type d'avatar sur "Initiales"
Définissez la valeur des initiales sur
{!Repeater1.CurrentRecord.Name}pour afficher les initiales de l'utilisateurCela crée un identifiant visuel pour chaque responsable de compte
Mettre à jour les libellés:
Définissez le libellé sur quelque chose de descriptif comme "Pipeline total" ou "Montant clôturé gagné"
Ajoutez éventuellement un sous-libellé avec
{!Repeater1.CurrentRecord.Name}pour afficher le nom du responsable
Formater la valeur:
Dans la section Formatage de la valeur, définissez le type de format sur "Devise"
Choisissez votre symbole monétaire ($ pour USD, € pour EUR, etc.)
Définissez le nombre de décimales (généralement 0 pour des montants entiers)
Ajouter des éléments visuels:
Dans la section Icône, ajoutez une icône comme
utility:moneybagouutility:trendingChoisissez une couleur d'icône qui correspond à votre image de marque
Envisagez d'ajouter une couleur de fond ou un style de variante (succès, avertissement) basé sur des seuils de performance
Résultat final
Une fois tout configuré, vous aurez une liste propre et répétable de composants Metric — chacun affichant le montant total des opportunités clôturées pour un responsable de compte différent. La mise en page se met à jour dynamiquement en fonction de votre requête Utilisateur, faisant de ceci un moyen puissant de visualiser la performance de l'équipe en temps réel.
Exemple 2 : Annuaire des employés
Cet exemple affiche une liste de Contacts liés à l'ID d'enregistrement de la page Compte courante, en utilisant le composant Avonni Repeatable pour afficher un Media Object, un Avatar et un Bouton pour chaque contact.
Appliquer un filtre par ID de compte courant
Ajoutez un filtre uniquement pour afficher les contacts liés au Compte courant.
Utilisez le ID d'enregistrement du contexte de la page Compte pour cela
Remarque
Assurez-vous que le nom de la page cible est défini sur le Compte objet.
Cela permet au composant d'accéder à l'ID d'enregistrement correct lorsqu'il est utilisé dans un contexte dynamique
Ajuster les paramètres de mise en page répétable
Pour contrôler l'apparence de l'annuaire des employés, les Paramètres de mise en page répétable sont configurés pour offrir une présentation propre et structurée. La mise en page utilise un alignement vertical, ce qui signifie que les informations de chaque contact sont empilées verticalement dans sa section. L'affichage est organisé en grille à 3 colonnes, permettant à plusieurs contacts d'apparaître côte à côte sur la page. De plus, un séparateur de type carte est appliqué entre chaque élément pour séparer et organiser visuellement le contenu pour une meilleure lisibilité.
Ajoutez le bouton Avonni à l'emplacement droit du media object
À l'intérieur du Objet Média, placez un Bouton Avonni dans le emplacement droit pour agir en tant qu'appel à l'action pour chaque contact. Étiquetez le bouton "Voir", et configurez son interaction au clic pour diriger les utilisateurs vers la page d'enregistrement du contact sélectionné. Pour ce faire, définissez l'interaction sur : Naviguer → Page d'enregistrement → Objet Contact → Voir
Considérations clés
Accès aux données : Dans les emplacements, utilisez {!API_Name.CurrentRecord.Field} pour l'élément courant ; interrogez les enregistrements enfants pour les agrégats.
Performance : Limitez les requêtes pour les grands ensembles de données ; utilisez la pagination pour éviter les problèmes de chargement.
Design réactif : Testez les paramètres de colonne sur différentes tailles d'appareils.
Actions et interactions : Les actions d'en-tête peuvent déclencher des flux, et des panneaux latéraux sont disponibles pour les modifications par élément.
Gestion des résultats vides : Personnalisez le message pour les états vides afin de guider les utilisateurs.
Dépannage des problèmes courants
Résumé
Le composant Avonni Repeater est votre solution idéale pour créer des listes et grilles dynamiques et pilotées par les données dans Salesforce sans écrire de code. En combinant une source de données flexible avec des composants en emplacements, vous pouvez créer tout, depuis de simples listes de contacts jusqu'à des cartes de tableau de bord sophistiquées avec métriques, actions et fonctionnalités interactives.
Ce qui rend le Répétiteur puissant
Modèles véritablement flexibles : Contrairement aux composants répétitifs standard de Salesforce, le Répétiteur vous permet de placer n'importe quelle combinaison de composants Avonni dans son emplacement — mélangez Texte, Métriques, Avatars, Boutons, Media Objects et plus encore pour créer exactement la mise en page dont vous avez besoin
Liaison de données intelligente : Accédez aux données de l'enregistrement courant avec une syntaxe d'attribut simple comme
{!Repeater1.CurrentRecord.FieldName}, et faites même référence aux objets liés via la notation par points (par exemple,{!Repeater1.CurrentRecord.Account.Name})Fonctionnalités prêtes pour l'entreprise : La pagination intégrée, la recherche, le filtrage et les mises en page réactives garantissent que vos sections répétées fonctionnent parfaitement avec de grands ensembles de données et sur tous les appareils
Agrégations sans code : Combinez le Répétiteur avec des composants Métrique pour afficher des valeurs calculées (sommes, moyennes, comptes) pour chaque élément répété — parfait pour afficher les totaux par chargé de compte, les résumés par département ou les analyses de portefeuille
Quand utiliser le Répétiteur
Créer des mises en page de cartes personnalisées qui vont au-delà de ce que proposent les vues de liste standard
Créer des sections de tableau de bord qui se répètent pour différentes catégories (ventes par région, opportunités par étape, cas par priorité)
Afficher les enregistrements parents avec des données agrégées des enfants (comptes avec valeur totale d'opportunités, contacts avec nombre de cas)
Concevoir des annuaires filtrés et consultables (listes d'employés, catalogues de produits, bibliothèques de ressources)
Remplacer plusieurs composants statiques par une seule solution dynamique pilotée par les données
Étapes suivantes et ressources associées
Composant Avonni Query : Apprenez à construire des requêtes avancées avec filtres, tri et relations pour alimenter votre Répétiteur
Guide des mappages de données : Comprenez comment configurer les filtres, les champs de recherche et les conditions réactives pour le contrôle dynamique des données
Composant Media Object : Découvrez comment créer des mises en page de carte structurées avec avatars, zones de contenu et emplacements d'actions
Composant Métrique : Maîtrisez l'agrégation des données et l'affichage de valeurs formatées (devise, pourcentages, nombres) dans vos sections répétées
Le Répétiteur transforme la façon dont vous affichez les données Salesforce — vous offrant la flexibilité visuelle du développement personnalisé avec la rapidité et la maintenabilité d'une configuration sans code
Mis à jour
Ce contenu vous a-t-il été utile ?