Liste

Affichage et gestion des données

Pour commencer avec le composant Avonni List, vous devez d'abord le connecter à vos données et configurer la manière dont elles sont affichées.

Connectez vos données

Avant de créer votre liste, vous devez indiquer au composant Avonni List où récupérer les données qu'il doit afficher. Vous avez plusieurs options, selon la source et la nature de vos données :

Manuel

Saisissez les données directement dans la configuration du composant.

Variable

Ceci est utile pour les données qui changent en fonction des interactions de l'utilisateur ou d'une autre logique du composant.

Requête

C'est l'option la plus courante pour afficher des enregistrements Salesforce.

Liste de sélection

Récupérez les données dynamiquement à partir d'un champ de liste de sélection standard ou personnalisé dans Salesforce.

Mapper vos données à la liste

Lorsque vous utilisez une source de données dynamique pour votre liste, vous devrez configurer la Mappages de données section pour indiquer au composant comment créer des listes à partir de vos données.

Pensez-y comme à un traducteur : les mappages de données garantissent que les bonnes informations provenant de vos données Salesforce.

Pourquoi les mappages de données sont-ils importants ?

Sans mappage des données, la liste ne saurait pas quelle partie de vos données utiliser. Cela pourrait entraîner l'affichage d'informations incorrectes ou non pertinentes.

Comment fonctionnent les mappages de données ?

Dans la section Mappages de données, vous établirez la connexion entre les champs de vos données Salesforce et les attributs correspondants de la liste. En sélectionnant quel champ correspond à quel attribut (par exemple, le champ "Nom du compte" pour l'attribut "Libellé"), vous vous assurez que chaque puce affiche correctement les informations issues de vos données Salesforce.

Variant de la liste

Le variant la propriété vous permet de définir le style et la mise en page globaux de votre Avonni List. La sélection d'un variant spécifique vous permettra d'adapter l'apparence de la liste à votre contenu et à vos préférences de design.

Variant disponible

Base (Par défaut)

Il s'agit de la vue standard de la liste. Les éléments sont affichés dans un format de liste verticale, idéal pour les informations détaillées et différents types de contenu.

Sur une seule ligne

Ce variant présente les éléments de la liste horizontalement sur une seule rangée, vous permettant de naviguer entre les éléments à l'aide de flèches gauche et droite. Il est pratique pour afficher des informations concises ou maximiser l'espace lorsque la place verticale est limitée.

Checklist

Ce variant spécialisé transforme la liste en format liste de contrôle. Chaque élément inclut une case à cocher pour la sélection, ce qui le rend idéal pour des listes de tâches interactives ou des sélections de préférences.

Choisir le bon variant

• De base : C'est lorsque vous devez présenter des informations détaillées pour chaque élément de la liste, y compris plusieurs champs ou des médias enrichis.

• Sur une seule ligne : Pour des points de données concis ou lorsque vous souhaitez une mise en page de liste compacte.

• Checklist: Lorsque vous avez besoin d'une saisie utilisateur sous forme de sélections ou de cases cochées

Configuration des séparateurs

L'attribut Diviseur est conçu pour améliorer la structure visuelle de votre liste en introduisant des séparateurs entre les éléments.

Cet attribut vous permet de personnaliser la manière dont chaque élément de la liste est séparé des autres.

Diviseur	Description	Illustration
Haut	Vous permet de placer un séparateur en haut de chaque élément de la liste.
Bas	Ajoute une ligne de séparation en bas de chaque élément de la liste.
Autour	Place des lignes de séparation à la fois au-dessus et en dessous de chaque élément de la liste.
Carte	Place chaque élément de la liste dans son propre conteneur de type carte, séparé par des diviseurs.

Élément cliquable

Si activé, tous les éléments de la liste deviennent cliquables.

⚠️

Configurer correctement l'interaction correctement est essentielle pour que les éléments cliquables fonctionnent efficacement. La fonctionnalité cliquable améliore l'interaction de l'utilisateur avec la liste d'éléments.

Configuration de la mise en page

Nombre de colonnes

La fonctionnalité de mise en page vous permet de concevoir des listes qui s'adaptent parfaitement aux différentes tailles d'écran. Vous pouvez contrôler facilement le nombre de colonnes dans lesquelles vos éléments de liste sont disposés, garantissant un affichage optimal sur des appareils allant des grands moniteurs de bureau aux écrans compacts de smartphones.

Personnalisation de la mise en page

• Nombre de colonnes : Choisissez le nombre de colonnes que vous souhaitez que vos éléments de liste occupent. Vous avez la flexibilité de sélectionner entre une et douze colonnes.

• Design réactif : Affinez la mise en page pour différentes tailles d'écran. Par exemple, vous pouvez préférer une seule colonne pour les téléphones mobiles afin d'optimiser la lisibilité tout en utilisant plusieurs colonnes sur des écrans plus grands pour afficher davantage de contenu simultanément.

Actions

Le composant Avonni List peut intégrer des actions au sein de votre liste, le transformant d'un composant d'affichage en une interface interactive engageante.

Où ajouter des actions

Niveau élément

Améliorez chaque élément de la liste avec des éléments cliquables tels que des boutons ou des liens. Ces actions peuvent déclencher la navigation vers une page d'enregistrement détaillée, ouvrir une fenêtre contextuelle pour l'édition ou exécuter toute autre logique de flux personnalisée.

Niveau média

Si votre liste inclut des images ou des vidéos, vous pouvez intégrer des actions directement dans ces éléments médias. Par exemple, cliquer sur une image de produit pourrait ouvrir une page de détail du produit, ou appuyer sur une miniature vidéo pourrait lancer la lecture.

Propriétés

En-tête

La section En-tête vous donne le contrôle sur l'apparence et la fonctionnalité de l'en-tête de votre liste.

Section en-tête sur une liste

Attribut	Description
Titre	Définissez un titre signifiant pour votre liste. Il présente le contenu de la chronologie et constitue un élément clé de la hiérarchie visuelle.
Légende	Utilisez le champ de légende pour ajouter une brève description ou des informations supplémentaires pour votre liste. Cela peut être particulièrement utile pour fournir du contexte ou des détails additionnels sur les données du tableau.
Icône	Ajoutez une icône à votre en-tête pour améliorer son attrait visuel ou pour aider à transmettre l'objet ou le contenu de la liste d'un coup d'œil.
Est joint	Cette propriété donne à l'en-tête une bordure inférieure carrée et sans ombre lorsqu'elle est activée. Cela permet à l'en-tête de se fondre parfaitement avec un autre composant, donnant l'impression que la liste est un élément continu et unifié.

Boutons

Ajoutez des boutons interactifs à votre en-tête pour permettre des actions spécifiques depuis le volet d'interaction. Cela fournit des fonctionnalités supplémentaires et améliore l'engagement des utilisateurs avec la liste.

---

Liste de contrôle

Lorsque vous optez pour le "Checklist" variant dans le composant Avonni List, un nouvel ensemble d'options de personnalisation devient disponible, vous permettant d'adapter l'apparence et le comportement de votre checklist interactive.

Paramètres clés de la checklist

• Barré lors de la vérification: Activez ce commutateur pour appliquer un style barré aux éléments qui ont été cochés. Ce repère visuel fournit un retour immédiat à l'utilisateur et l'aide à suivre sa progression.

• Afficher le compteur de cases cochées: Activez cette option pour afficher un compteur en temps réel indiquant le nombre d'éléments cochés. Cela est utile lorsque les utilisateurs doivent évaluer rapidement combien d'éléments ont été sélectionnés ou complétés.

---

Attributs d'avatar

La section Attributs d'avatar vous permet de personnaliser l'apparence et le positionnement des avatars au sein de chaque élément de votre Avonni List.

Attribut	Description	Options
Variante	Modifiez la forme de l'avatar pour chaque élément de la liste	Cercle, Carré, Vide
Taille de l'icône	Ajustez la taille de l'icône avatar pour correspondre à vos besoins de design	Petit pour le minimalisme, Grand pour l'accentuation
Position	Définissez le placement de l'avatar dans chaque élément de la liste	Gauche, Haut-Gauche, Bas-Gauche, Droite, Haut-Droite, Bas-Droite, À gauche du titre
Position de présence	Personnalisez l'emplacement de l'icône de présence, indiquant le statut de l'utilisateur, par rapport à l'avatar.	Haut-Gauche, Haut-Droite, Bas-Gauche, Bas-Droite

---

Attributs de l'image

Une image peut être ajoutée à n'importe quel élément. Les attributs d'image vous permettent de personnaliser les attributs d'image pour vos éléments. Vous pouvez définir la position, attributs de, hauteur et Recadrer options.

Le Source de données des valeurs de liste de sélection ne prend pas en charge les images.

Attributs de champ

La section Attributs de champ vous permet de définir le nombre de colonnes que chaque champ occupera dans le conteneur, vous offrant un contrôle granulaire sur la mise en page et l'apparence du contenu de votre liste.

Comment l'utiliser

1 - Définir les champs: Ajoutez les champs que vous souhaitez afficher sur votre composant Avonni List - naviguez jusqu'à l'attribut 'Fields'. Vous pouvez le trouver en bas du panneau Propriétés.

2 - Spécifier l'étendue des colonnes: Utilisez la section Attributs de champs pour spécifier le nombre de colonnes que les champs ajoutés doivent occuper.

Variants pour les champs

La propriété "variant" dans le composant Avonni List modifie l'apparence des informations du champ. Voici les valeurs disponibles pour la propriété "variant", chacune avec un style unique.

• Standard : C'est la façon habituelle, où le libellé se situe au-dessus du champ. C'est facile à lire.

• Libellé masqué : Utilisez ceci si vous voulez un aspect très épuré. Le libellé est caché, ce qui est idéal lorsque l'espace est limité ou que la fonction du champ est déjà évidente.

• Libellé en ligne : Le libellé se trouve à côté du champ, généralement à gauche. Cela est utile lorsque vous disposez de plus d'espace horizontal que vertical.

• Libellé empilé : Le libellé commence au-dessus du champ et remonte lorsque vous cliquez dessus ou commencez à taper. C'est un style moderne qui économise de l'espace, particulièrement sur les appareils mobiles.

---

Pagination

La zone « Options de pagination » vous permet de diviser de longues listes en parties plus petites dans le composant Avonni List. Vous pouvez choisir combien d'éléments sont affichés par page et à quoi ressemblent les contrôles, ce qui facilite la gestion des listes volumineuses.

Principales caractéristiques

Fonction	Description	Options
Afficher la pagination	Contrôlez la visibilité des contrôles de pagination en bas de la liste.	Activer ou désactiver
Nombre d'éléments par page	Spécifiez combien d'éléments afficher par page.	Plage de 1 à 200, en fonction de la densité des données et des besoins en expérience utilisateur.
Alignement de la pagination	Choisissez l'alignement des contrôles de pagination.	Gauche, Centré, Droite
Personnaliser les icônes et les libellés des boutons	Personnalisez les icônes et les libellés des boutons de pagination (Premier, Dernier, Suivant, Précédent).	Adaptez-vous à différentes langues ou alignez-vous sur l'image de marque et le style de l'application.

Trier

Pour permettre aux utilisateurs de trier les éléments de votre liste, activez l'option "Trier". Lorsqu'elle est activée, un indicateur visuel clair (généralement une icône) apparaîtra sur chaque élément, signalant que la liste peut être réordonnée.

Comment activer l'option triable

Exemple d'icône triable en position gauche

Ajout de filtres

Ajouter des champs en tant que filtres

Pour ajouter des champs en tant que filtres à votre liste, localisez la section "Attributs de filtre" dans le panneau des propriétés. Cette section vous permet de sélectionner les champs que vous souhaitez utiliser pour le filtrage.

Comment ajouter des filtres

Option de filtrage

L"FiltreLa section "" vous permet d'ajouter un menu de filtres qui apparaît sous forme de popover. Lorsque cette fonctionnalité est activée, tous les champs désignés comme filtres seront affichés dans ce popover, gardant la liste dégagée et ciblée.

• Ouvrez le Component Builder

• Faites défiler jusqu'à la section Filtre

• Sélectionnez la manière dont vous souhaitez afficher les filtres.

---

Type de filtre

L'Avonni List propose trois options de filtrage pour rationaliser votre expérience de navigation des données. Chaque option est conçue pour s'adapter à différentes préférences d'utilisateur et tailles d'écran.

Name	Description	Illustration
Horizontale	Ces filtres apparaissent directement au-dessus du tableau de données, disposés en ligne horizontale. Cette disposition est idéale pour accéder rapidement aux filtres et les appliquer sans obstruer la vue du tableau de données.
Popover	Cette option permet de cacher les filtres derrière des icônes ou des boutons cliquables ; lorsqu'on clique, une petite interface flottante (un popover) apparaît, contenant les options de filtre.
Panneau latéral	Les filtres dans un panneau latéral se trouvent à gauche ou à droite de votre tableau de données, accessibles via un panneau pouvant être développé ou réduit.

Options du menu de filtre du panneau latéral

Lors de la configuration de votre composant Avonni List pour utiliser un filtre de type « Panneau », vous pouvez présenter les options de filtrage dans un panneau latéral pratique. Ce panneau offre des paramètres de personnalisation supplémentaires, décrits ci-dessous :

Où apparaît le panneau de filtre

• Position (Gauche ou Droite) : Le panneau de filtre se déploie depuis le côté de l'écran. Choisissez la position qui convient le mieux à votre conception.

Comment le panneau de filtre démarre

• Est fermé : Décidez si vous souhaitez que le panneau de filtre soit caché ou visible lorsque l'écran se charge pour la première fois.

  • Vrai : Le panneau commence masqué. C'est utile si vous voulez d'abord vous concentrer sur le tableau de données.

  • Faux : Le panneau commence ouvert, encourageant les utilisateurs à filtrer immédiatement.

Afficher ou masquer le bouton bascule

• Masquer le bouton bascule : Contrôlez si les utilisateurs voient un bouton pour ouvrir et fermer le panneau de filtre.

  • Vrai : Le bouton est masqué. Utilisez ceci si vous souhaitez que le panneau s'ouvre et se ferme automatiquement en fonction d'autres actions de votre flux (comme cliquer sur une icône de filtre).

  • Faux : Le bouton est toujours visible afin que les utilisateurs puissent contrôler le panneau.

---

Recherche

Le commutateur "Recherchable" vous permet de spécifier si les enregistrements d'une colonne particulière peuvent être recherchés. Lorsqu'il est activé, une barre de recherche est mise à disposition. De plus, vous pouvez définir un texte d'indication pour la barre de recherche et déterminer sa position parmi les valeurs disponibles : gauche, droite, centre et remplissage.

Activation de la recherche: Pour rendre une colonne recherchable, activez l'option "Recherchable" dans les paramètres de configuration de votre composant Avonni List.

Définir le texte d'indication: Personnalisez la barre de recherche en ajoutant un texte d'indication pour guider les utilisateurs.

Positionnement de la barre de recherche: Utilisez l'attribut de position pour définir l'emplacement de la barre de recherche. Les options incluent :

• gauche: Aligne la barre de recherche à gauche.

• droite: Aligne la barre de recherche à droite.

• centre: Centre la barre de recherche.

• fill: Étend la barre de recherche pour remplir l'espace disponible.

Bonnes pratiques

• Utilisez un texte d'indication descriptif pour guider les utilisateurs sur ce qu'ils peuvent rechercher.

• Choisissez une position pour la barre de recherche qui s'harmonise avec la mise en page globale de votre composant de liste.

---

Interactions

Interactions définir ce qui se passera lorsque les utilisateurs interagiront avec l'Avonni List.

Voici les interactions disponibles pour le composant Liste :

Au clic sur un élément

Décidez ce qui se passe lorsqu'un utilisateur clique sur un élément de la liste. Cela pourrait être :

• Aller vers une page avec plus de détails sur cet élément.

• Ouvrir une fenêtre contextuelle pour modifier les informations de l'élément.

• Faire autre chose que vous avez conçu dans votre flux.

Au clic sur une action

Si vous avez ajouté des boutons à vos éléments de liste (comme "Modifier" ou "Voir les détails"), vous pouvez choisir ce qui se passe lorsque ces boutons sont cliqués. Cela peut inclure :

• Mettre à jour les informations de cet élément.

• Ouvrir un nouvel écran.

• Déclencher des actions spécifiques dans votre flux.

Au clic sur une action d'en-tête

Si vous avez des boutons dans l'en-tête de la liste, vous pouvez personnaliser ce qui se passe lorsqu'ils sont cliqués. Cela pourrait être :

• Filtrer la liste pour n'afficher que certains éléments.

• Trier les éléments différemment.

• Autres actions qui ont du sens pour votre liste.

Au clic sur une action média

Si vos éléments de liste ont des images ou des vidéos avec des boutons (comme un bouton "Lire"), vous pouvez décider ce qui se passe lorsque quelqu'un clique sur ces boutons.

Au réordre

Si vous permettez aux utilisateurs de réorganiser les éléments de votre liste, vous pouvez déclencher des actions chaque fois qu'ils le font. Par exemple, vous pourriez automatiquement mettre à jour un champ en arrière-plan pour suivre le nouvel ordre des éléments.

Assurez-vous d'avoir défini un champ "Order By" dans les paramètres de la liste pour que cela fonctionne. Cela activera l'option "Mettre à jour l'ordre des enregistrements" dans les paramètres d'interaction.

Style

Le composant Avonni List offre de vastes options de style pour vous aider à l'intégrer parfaitement dans votre Salesforce.

Mise en page

• Marge : Contrôlez l'espacement autour de l'ensemble de la liste.

• Rembourrage : Ajustez l'espace entre les éléments de la liste et leur conteneur.

• Taille : Choisissez une taille prédéfinie (Petit, Moyen, Grand) ou personnalisez les dimensions.

• Bordure : Ajouter ou modifier des bordures autour du conteneur de la liste.

En-tête

Éléments

Pagination

Pied de page

Checklist