AX - Table de données
Aperçu
AX - Tableau de données est un composant Experience Cloud qui affiche vos enregistrements Salesforce dans un tableau interactif sur les pages Experience Sites (anciennement Community Cloud).
Utilisez-le pour montrer aux utilisateurs du portail des jeux de données filtrés avec un contrôle total sur les colonnes, le tri, la recherche et la pagination. Récupérez des enregistrements depuis n’importe quel objet standard ou personnalisé et permettez aux utilisateurs externes de consulter, rechercher et interagir avec des données pertinentes pour leur compte ou leur profil.
Idéal pour les portails clients qui affichent l’historique des commandes, les portails partenaires qui affichent l’historique des commandes, les portails partenaires affichant des enregistrements partagés, ou les sites en libre-service où les utilisateurs doivent trouver et consulter leurs propres données.
La Data Table Avonni est un Composant de données réactif
Premiers pas
Utilisez ce tutoriel simple pour apprendre les bases du composant Data Table et commencer à créer vos cas d’usage.
Tutoriels
Connectez votre Data Table aux données Salesforce
Source de données
La section Source de données est l’endroit où vous connectez la Data Table Avonni à vos données Salesforce. Vous avez deux options.
Source de données manuelle
Saisissez manuellement les données dans la table de données.
Idéal pour les données non dynamiques, les tests et les démonstrations.
Requête
Créez une requête pour remplir automatiquement la table avec les données Salesforce.
Adapté aux jeux de données dynamiques, en temps réel et volumineux.
Collection CMS
Affichez de manière fluide vos collections CMS dans des Data Tables pour des mises à jour dynamiques du contenu.
Créez des listes de ressources ou des flux d’actualités se mettant à jour automatiquement.
En mode Requête, les données sont affichées par lots de 25 enregistrements afin de maintenir des performances optimales du site.
Configuration du mappage des données
Vous donnez vie à votre table de données dans la section Mappage des données en définissant et personnalisant ses colonnes.
Partage du modèle de données avec Avonni Data Table
Respect des règles de partage de données Salesforce :
Respect des paramètres de l’organisation : Les composants Avonni sont entièrement conformes aux configurations de partage de données et aux paramètres d’accès existants de votre organisation Salesforce.
Politique de non-ingérence : Ces composants ne modifient ni n’affectent en aucune façon vos règles de partage de données préétablies.
Visibilité et accès contrôlés : La possibilité de consulter des enregistrements et d’interagir avec eux via les composants Avonni est régie par les paramètres de partage et les autorisations utilisateur définis par votre organisation
Ajout de colonnes
Cliquez sur le bouton « Add Columns » pour sélectionner les champs de votre source de données à afficher comme colonnes dans la table de données.
Cette section détermine quelles données sont visibles et comment elles sont organisées dans votre tableau.
Cliquez sur une colonne pour accéder à toutes les propriétés de cette colonne spécifique.
Configuration des propriétés de colonne
Type de données : Ajustez le type d’affichage du champ (par ex. texte, nombre, date) afin d’assurer une représentation correcte des données.
Créer un lien : Autorisez la liaison des données de cellule vers d’autres enregistrements ou URL pour une navigation rapide.
Attributs de cellule : Personnalisez l’alignement des cellules et les icônes pour créer un tableau plus intuitif et plus attrayant visuellement.
Modifiable : Décidez si une colonne doit être modifiable directement dans le tableau.
Filtrable et recherchable : Activez le filtrage et la recherche par colonne pour une gestion efficace des données.
Masqué : Choisissez de masquer certaines colonnes, utile pour les données sensibles ou moins pertinentes.
Triable : Autorisez les utilisateurs à trier les données par la colonne spécifiée.
Masquer les actions par défaut : Choisissez de masquer les actions prédéfinies pour un rendu plus épuré.
Retour à la ligne du texte : Activez le retour à la ligne du texte pour une meilleure lisibilité dans les colonnes étroites.
Définir la largeur de la colonne : Indiquez la largeur de chaque colonne pour obtenir une mise en page équilibrée et organisée.
Ajout d’actions de ligne
Voici un tutoriel interactif guidé sur l’ajout d’actions de ligne à la Data Table.
Autres paramètres de configuration
Paramètres de base
Masquer l’en-tête du tableau
Cette option vous permet de supprimer l’en-tête du tableau pour un rendu plus épuré et minimaliste.
Masquer les colonnes de cases à cocher
Activez ce paramètre pour masquer les colonnes de cases à cocher, généralement utilisées pour la sélection de lignes dans des scénarios multi-actions.
Afficher la colonne des numéros de ligne
Activez cette option pour afficher une colonne qui numérote chaque ligne, ce qui est utile pour référencer facilement les données.
Configuration de l’en-tête
Titre et légende
Personnalisez l’en-tête avec un titre et une légende afin de fournir un contexte ou un résumé des données du tableau.
Nom et taille de l’icône
Enrichissez l’en-tête avec une icône, en sélectionnant son type et sa taille pour un impact visuel.
Est joint
Ce paramètre détermine si l’en-tête est visuellement relié au corps du tableau, ce qui affecte la conception globale.
Actions de l’en-tête
Configurez les actions (ajout, suppression ou fonctions personnalisées) directement accessibles depuis l’en-tête du tableau.
Boutons d’action dans l’en-tête
Mettez en place des boutons d’action dans l’en-tête du tableau pour ajouter de nouveaux enregistrements, exporter des données ou effectuer d’autres actions personnalisées, améliorant ainsi l’interaction utilisateur et l’efficacité.
Configurez l’interaction sur le bouton
Configurez l’interaction lorsque les utilisateurs appuient sur le bouton d’action de l’en-tête dans la section « On Click ». Pour comprendre le fonctionnement de l’interaction « Navigate », cliquez ici pour plus d’informations.
Tutoriel
Create an Export To button on the Data TableAttributs de pagination
Configurez les paramètres de pagination, tels que le nombre d’éléments par page et le style de pagination, afin de gérer l’affichage et la navigation des données dans les grands tableaux.
En mode Requête, les données sont affichées par ensembles de 25 enregistrements afin de maintenir des performances optimales du site. Par conséquent, la configuration de la pagination peut être utile.
Configuration du moteur de recherche
Texte indicatif : Définissez un texte indicatif pour le champ de recherche afin d’orienter les utilisateurs sur ce qu’ils peuvent rechercher.
Position : Choisissez l’emplacement du champ de recherche dans la mise en page du tableau pour une accessibilité optimale.
Valeur de recherche par défaut : Prédéfinissez une valeur de recherche pour filtrer les données du tableau au chargement.
Pour afficher le champ de recherche, au moins une colonne doit être marquée comme « Searchable ».
Paramètres
Masquer l’en-tête du tableau
Basculez pour masquer l’en-tête du tableau
Masquer la colonne de cases à cocher
Supprimez la colonne utilisée pour les cases à cocher de sélection de lignes
Afficher la colonne des numéros de ligne
Afficher une colonne montrant le numéro de ligne
Décalage du numéro de ligne
Définissez le numéro de départ pour la numérotation des lignes
Sélection maximale de lignes
Limitez le nombre maximum de lignes pouvant être sélectionnées
Masquer la barre inférieure
Masquez la barre inférieure, généralement utilisée pour les actions et l’affichage d’informations
Afficher le nombre d’éléments sélectionnés
Affichez le nombre d’éléments actuellement sélectionnés
Lecture seule
Rendez le tableau non interactif, en interdisant toute modification ou sélection
Autoriser la modification sur toutes les colonnes
Activez la modification pour toutes les colonnes
Autoriser le filtrage sur toutes les colonnes
Activez les options de filtrage pour toutes les colonnes
Autoriser le retour à la ligne sur toutes les colonnes
Autorisez le retour à la ligne du texte dans toutes les colonnes
Masquer les actions par défaut
Masquez les actions prédéfinies comme modifier ou supprimer
Mode de largeur des colonnes
Choisissez entre « fixed » et « auto » pour le réglage de la largeur des colonnes
Largeur max./min. des colonnes
Définissez des limites maximales et minimales pour les largeurs de colonnes
Nombre maximal de lignes pour le retour à la ligne
Définissez le nombre maximal de lignes pour le retour à la ligne du texte dans les cellules
Redimensionnement des colonnes désactivé
Désactivez la possibilité de redimensionner les colonnes
Pas de redimensionnement
Définissez l’incrément pour le redimensionnement des colonnes
Direction de tri triée/par défaut
Choisissez « asc » ou « desc » pour la direction de tri initiale
Afficher la valeur de tri
Afficher quelle colonne est actuellement utilisée pour le tri
Titre/caption de l’en-tête
Définissez un titre et une légende pour l’en-tête du tableau
Nom/taille de l’icône de l’en-tête
Ajoutez une icône à l’en-tête avec une taille personnalisable
L’en-tête est relié
Choisissez de relier visuellement l’en-tête au corps du tableau
Masquer/désactiver les actions de l’en-tête
Contrôlez la visibilité et l’interactivité des actions de l’en-tête
Boutons d’action visibles de l’en-tête
Précisez quels boutons d’action sont visibles dans l’en-tête
Actions de l’en-tête
Ajoutez des actions personnalisées à l’en-tête du tableau
Attributs de pagination
Afficher la pagination
Basculez l’affichage des contrôles de pagination
Nombre d’éléments par page
Définissez combien d’éléments afficher par page
Options du conteneur de pastilles
Afficher un conteneur pour les éléments sélectionnés, souvent utilisé avec la sélection de lignes.
Options du moteur de recherche
Texte indicatif
Définissez un texte indicatif pour le champ de recherche
Position
Définissez la position de la barre de recherche
Valeur de recherche par défaut
Préremplissez la barre de recherche avec une valeur par défaut
Options de filtrage
Configurez le filtrage pour qu’il s’affiche sous forme de popover pour chaque colonne.
Source de données
Choisissez entre « manual » et « query » pour remplir les données du tableau.
Colonnes
Définissez et ajoutez des colonnes à la table de données, en personnalisant les propriétés et le comportement de chaque colonne.
En-tête
Couleur d’arrière-plan
Définit la couleur de l’arrière-plan de l’en-tête.
Couleur de la bordure
Définit la couleur de la bordure de l’en-tête.
Taille de la bordure
Ajuste l’épaisseur de la bordure.
Style de bordure
Sélectionne le style (plein, pointillé, tireté, etc.) de la bordure.
Rayon de bordure
Arrondit les coins de l’en-tête.
Couleur de la bordure inférieure (est relié)
Spécifie la couleur de la bordure inférieure lorsque l’en-tête est visuellement relié au corps du tableau.
Taille de la bordure inférieure (si joint)
Détermine l’épaisseur de la bordure inférieure reliée.
Style de la bordure inférieure (si joint)
Définit le style de la bordure inférieure reliée.
Espacement intérieur et marge
Contrôle l’espacement intérieur (padding) et extérieur (margin) de l’en-tête.
Titre de l’en-tête
Couleur
Définit la couleur du texte du titre.
Taille de police
Ajuste la taille du texte du titre.
Graisse de police
Modifie l’épaisseur du texte du titre.
Style de police
Applique un style spécifique (italique, normal) au texte du titre.
Légende de l’en-tête
Couleur
Définit la couleur du texte de la légende.
Taille de police
Ajuste la taille du texte de la légende.
Graisse de police
Contrôle l’épaisseur du texte de la légende.
Style de police
Définit le style du texte de la légende.
Icône de l’en-tête
Couleur d’arrière-plan
Définit la couleur d’arrière-plan de l’icône.
Couleur de premier plan
Modifie la couleur de l’icône elle-même.
Utilitaire de couleur de premier plan
Ajuste la couleur utilitaire pour le contraste ou la mise en valeur.
Rayon de bordure
Arrondit les coins de l’icône pour un aspect plus doux.
Conteneur de pastilles
Couleur d’arrière-plan de la pastille / au survol
Définit la couleur d’arrière-plan des éléments de pastille, avec une couleur différente au survol.
Couleur du texte de la pastille / au survol
Modifie la couleur du texte à l’intérieur de la pastille, avec une couleur différente au survol.
Hauteur de ligne de la pastille
Ajuste la hauteur de ligne à l’intérieur de la pastille pour l’alignement du texte.
Avatar
Ajustement de l’objet de l’image de l’avatar
Détermine comment l’image de l’avatar doit s’adapter à son conteneur. Les options incluent « fill », « contain », « cover », « none » et « scale-down ».
Boutons de pagination
Paramètres de style
Personnalise l’apparence des boutons de pagination, y compris la couleur, la taille et les propriétés de bordure.
Pied de page
Couleur d’arrière-plan
Définit la couleur de l’arrière-plan du pied de page.
Couleur de la bordure
Définit la couleur de la bordure du pied de page.
Taille de la bordure
Ajuste l’épaisseur de la bordure.
Style de bordure
Sélectionne le style de la bordure.
Rayon de bordure
Arrondit les coins du pied de page.
Exemples de cas d’utilisation
Exemple 1 : Liste de comptes améliorée et contacts associés
Offrez à vos partenaires un moyen puissant et intuitif d’explorer les données des comptes, avec recherche intégrée, filtrage et panneau de contacts en direct qui se met à jour au fil de leur navigation.
Ce que vous obtiendrez
Liste de comptes recherchable et filtrable : Permettez aux partenaires de trouver rapidement des comptes par nom ou par secteur grâce aux contrôles de recherche et de filtrage intégrés.
Enregistrements liés en ligne : Rendez les noms des comptes cliquables afin que les partenaires puissent accéder directement aux pages de détail des enregistrements.
Panneau de contacts associés en direct : Affichez un second tableau qui se rafraîchit automatiquement pour montrer les contacts liés au compte sélectionné.
Résultats paginés : Gardez l’interface claire et performante en limitant le nombre d’enregistrements visibles par page.
Avant de commencer
Mise en page à deux colonnes : Assurez-vous que votre page Liste des comptes dans Experience Builder dispose déjà d’une mise en page à deux colonnes prête à recevoir les deux composants.
Comment le configurer
Liens
Tables de données liéesExemple 2 : Opportunités associées sur une page de compte
Offrez aux utilisateurs commerciaux une vue d’ensemble de chaque opportunité liée à un compte, directement là où ils en ont besoin, sans jamais quitter la page de l’enregistrement.
Ce que vous obtiendrez
Vue client 360 plus riche : Affichez les données clés des opportunités directement sur la page Compte afin que les utilisateurs commerciaux aient une vue complète en un seul endroit.
Pages d’enregistrement complètes : Créez des pages denses et riches en informations qui évitent d’avoir à passer d’un onglet ou d’un objet à l’autre pour gérer un pipeline.
Avant de commencer
Page d’enregistrement de compte avec composants existants : Assurez-vous que votre page d’enregistrement de compte dans Experience Builder inclut déjà les détails de l’enregistrement, une bannière et une mise en page en colonnes prête à accueillir le nouveau composant.
Comment le configurer
Mis à jour
Ce contenu vous a-t-il été utile ?