Tableau de données

Configuration de votre tableau de données

Choisissez votre source de données

La première étape consiste à indiquer au tableau de données d'où il doit tirer ses données.

Voici vos options :

Définir les colonnes et mapper les données

Une fois votre source de données connectée, vous devez définir quels champs seront affichés en tant que colonnes et comment ils sont configurés.

Ajout et configuration des colonnes :

1. Ajouter une colonne : Cliquez sur le bouton « Ajouter une colonne » pour créer une nouvelle colonne. Répétez pour chaque champ que vous souhaitez afficher.

2. Mapper les champs de données :

   • Champ source : Sélectionnez le champ de la source de données choisie (Manuel, Variable ou Requête) qui alimentera cette colonne.

   • Libellé de la colonne (optionnel) : Fournissez un nom convivial pour l'en-tête de la colonne. Si laissé vide, le système peut utiliser le nom ou le libellé du champ.

   • Type de données : Le tableau de données détectera généralement automatiquement le type de données (Texte, Nombre, Date, etc.). Vous pouvez souvent remplacer cela si nécessaire (par exemple, pour afficher un nombre en devise).

3. Personnaliser les paramètres de la colonne : Ajustez ces paramètres selon vos besoins :

   • Filtrable : Permettre aux utilisateurs de filtrer le tableau en fonction de cette colonne.

   • Modifiable : Permettre aux utilisateurs de modifier les données directement dans les cellules de cette colonne. Important : Voir la section « Activer l'édition inline » ci-dessous pour les détails sur l'enregistrement des modifications.

   • Recherchable : Inclure cette colonne dans les recherches à l'échelle du tableau.

   • Triable : Permettre aux utilisateurs de trier le tableau par cette colonne.

   • Largeur : Spécifier une largeur fixe ou en pourcentage pour la colonne.

   • Alignement : Contrôler l'alignement du texte (gauche, centre, droite).

   • Autres options : Explorez les paramètres supplémentaires des colonnes dans la documentation du tableau de données pour une personnalisation avancée.

4. Réordonner les colonnes (optionnel) : Faites glisser et déposez les colonnes dans la zone de configuration pour changer l'ordre d'affichage.

Activer l'édition inline (optionnel)

Permettre aux utilisateurs de modifier les données directement dans les cellules du tableau.

Options d'édition inline

• Icône crayon : L'activation du paramètre « Modifiable » pour une colonne affichera une icône en forme de crayon. Les utilisateurs cliquent dessus pour modifier la valeur de la cellule.

• Édition directe de la cellule (« Afficher comme saisie ») : Pour une expérience plus fluide, choisissez l'option « Afficher comme saisie ». Cela rend les cellules éditables sans nécessiter un clic supplémentaire.

Enregistrement des modifications inline

Tutoriel 👇

Ajouter des actions de ligne (optionnel)

Fournir un accès rapide aux actions liées aux enregistrements individuels du tableau.

Création d'actions de ligne :

• Créer une colonne d'action : Ajoutez une nouvelle colonne à votre tableau, et définissez son Type sur « action ». Ceci est essentielle pour créer des actions de ligne.

• Définir les libellés d'action : Dans les paramètres de la colonne d'action, ajoutez les actions souhaitées (par ex. « Modifier », « Supprimer », « Voir les détails »). Ces libellés apparaîtront dans un menu déroulant sur chaque ligne.

Configurer la fonctionnalité des actions de ligne :

• valeurs de manière appropriée pour vos données. Vous devez définir interactions pour chaque action de ligne. Par exemple, cliquer sur « Supprimer » doit déclencher une interaction qui ouvre un flux de confirmation.

Regrouper les données (optionnel)

Organiser les données en catégories pour une analyse et une compréhension plus simples.

Configuration du regroupement :

• Colonne de regroupement : Choisissez une colonne par laquelle regrouper dans la section Mappages de données (par ex. « Statut », « Région », « Propriétaire »).

Personnalisation de l'affichage du groupe

• Options d'affichage :

  • Masquer les libellés non définis : Contrôlez l'affichage des valeurs de regroupement vides.

  • Réduire les groupes : Réduire initialement les groupes pour gagner de la place.

  • Afficher le nombre de lignes : Afficher le nombre d'enregistrements dans chaque groupe.

• Ordre des groupes : Définissez l'ordre de tri des groupes (par défaut, ascendant, descendant ou personnalisé).

• Transformer les valeurs en liens : (Pour les champs de type recherche) Rendre les valeurs des en-têtes de groupe cliquables, en dirigeant l'utilisateur vers l'enregistrement lié

Autres paramètres

Propriétés générales

Adaptation mobile

Le tableau de données Avonni est construit sur le Lightning Data Table de Salesforce. Le Lightning Data Table a une réactivité limitée et peut ne pas s'ajuster automatiquement aux écrans plus petits. Pour optimiser le tableau de données pour les appareils mobiles, envisagez ces options :

• Créer un tableau de données séparé pour le mobile : Construire un tableau simplifié avec moins de colonnes spécialement conçu pour les utilisateurs mobiles. Utilisez les paramètres de visibilité des composants de Salesforce pour afficher ce tableau adapté au mobile uniquement sur les écrans plus petits.

• Utilisez le Composant Avonni List : Pour une solution plus réactive, envisagez d'utiliser le composant Avonni List. Ce composant dispose de paramètres réactifs intégrés qui ajustent l'affichage en fonction de la taille de l'écran. Combinez cela avec les paramètres de visibilité des composants de Salesforce pour afficher la Liste uniquement sur les appareils mobiles.

En-tête

L'en-tête est la ligne supérieure de votre tableau de données. Utilisez la section En-tête pour personnaliser son apparence et ajouter des fonctionnalités.

Options d'en-tête

• titreAffiché : Donnez à votre tableau de données un titre clair et descriptif. Cela aide les utilisateurs à comprendre le contenu du tableau en un coup d'œil.

• Légende : Ajoutez une courte description ou des informations supplémentaires sous le titre pour fournir du contexte ou des détails sur les données.

• Icône : Incluez une icône dans l'en-tête pour le rendre plus attrayant visuellement ou pour représenter la finalité du tableau.

• Est joint : Cette option supprime la bordure inférieure de l'en-tête, le faisant se fondre harmonieusement avec le reste du tableau ou d'autres composants.

• Actions : Ajoutez des boutons à votre en-tête pour donner aux utilisateurs un accès rapide aux actions quotidiennes, comme créer un nouvel enregistrement ou exporter des données. Vous pouvez personnaliser ces actions dans l'onglet « Interaction ».

• Actions visibles : Contrôlez combien de boutons d'action sont affichés directement dans l'en-tête. Le reste sera placé dans un menu déroulant si vous avez plus d'actions que ce que vous souhaitez afficher. Par exemple, si vous avez 4 actions mais définissez « Actions visibles » sur 2, seuls les 2 premiers boutons seront affichés directement.

• Masquer les actions : Masquer complètement le menu d'action dans l'en-tête.

• Désactiver les actions : Rendre le menu d'action inactif (grisé) mais toujours visible dans l'en-tête

Tutoriel: Comment griser dynamiquement les actions d'en-tête dans Avonni Data Table

Largeurs des colonnes

Les largeurs des colonnes peuvent être personnalisées si nécessaire. Par défaut, toutes les colonnes ont des valeurs min et max définies en pixels.

Tri des colonnes

Vous pouvez définir les options de tri pour les colonnes. La direction de tri par défaut est appliquée aux colonnes triées.

Chaque colonne peut être triable en activant le basculeur triable directement depuis les propriétés de la colonne.

Pagination

Le Pagination section vous permet d'activer la pagination pour votre datatable.

Voici comment ajouter la pagination sur votre datatable :

• Depuis le panneau des propriétés, développez la section Options de pagination

• Cochez le «Afficher la pagination» basculeur

• Entrez le nombre d'éléments souhaité par page

• Ajustez d'autres paramètres tels que :

  • Alignement de la pagination

  • Icône et libellé des boutons.

Conteneur de pastilles

L'activation de l'option Conteneur de pastilles affichera les éléments sélectionnés dans un conteneur de pastilles. Les pastilles peuvent être triées et affichées sur une seule ligne en activant l'option appropriée.

Le Champ d'étiquette l'attribut affiche le nom de la pastille par le champ sélectionné.

Résultat final

Filtrer les données

Le tableau de données Avonni facilite la recherche des informations nécessaires par les utilisateurs en appliquant des filtres aux données. Vous avez plusieurs options pour configurer les filtres :

• Dans les paramètres du composant (panneau des propriétés) : Personnalisez les paramètres de filtrage dans les propriétés du composant.

• Filtrer des données non visibles : Vous pouvez même filtrer les données en vous basant sur des colonnes qui ne sont pas visibles dans le tableau.

Chaque méthode vous donne le contrôle sur la façon dont les utilisateurs peuvent affiner leur vue des données.

Comment ajouter des filtres

Depuis le panneau des Propriétés

• Allez au section Mappages de données

• Cliquez sur la colonne du champ que vous souhaitez rendre recherchable

• Faites défiler vers le bas et activez la Filtrable attribut

Filtrer des données non visibles

Dans la section Mappages de données, vous pouvez utiliser des champs spécifiques comme filtres pour d'autres champs qui ne sont pas visibles en tant que colonnes. Cela vous permet d'ajouter des filtres supplémentaires à vos données sans avoir à encombrer votre tableau de données avec des colonnes supplémentaires.

Comment appliquer des filtres de champ dans le tableau de données sans afficher les champs

Options de filtres

Le tableau de données Avonni offre trois types d'options de filtrage, chacune conçue pour s'adapter aux préférences des utilisateurs et aux tailles d'écran.

Accéder au menu de filtrage

• Sélectionnez le Data Table

• Depuis le panneau des Propriétés, faites défiler jusqu'à la section Filtre.

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

Personnaliser le panneau de filtrage

Lorsque vous configurez votre composant Avonni Data Table pour utiliser un filtre « 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 :

• Position (Gauche, Droite) :

  • Ce paramètre détermine si votre panneau de filtre se déploie depuis le côté gauche ou droit de l'écran lorsqu'un utilisateur interagit avec le filtre.

• Est fermé :

  • Cette option contrôle l'état initial du panneau de filtre.

  • Définissez « Est fermé » sur « Vrai » si vous souhaitez que le panneau de filtre commence caché. Cela est utile lorsque vous voulez initialement mettre l'accent sur le contenu du tableau de données.

  • Définissez « Est fermé » sur « Faux » si vous souhaitez que le panneau de filtre soit ouvert par défaut, incitant les utilisateurs à personnaliser immédiatement leur vue des données.

• Masquer le bouton bascule :

  • Cela indique si un bouton bascule est visible lors de l'ouverture et de la fermeture manuelle du panneau de filtre.

  • Définissez « Masquer le bouton bascule » sur « Vrai » si vous souhaitez que le panneau s'ouvre et se ferme en fonction d'autres événements dans votre flux (par ex. lorsqu'une icône de filtre est cliquée).

  • Définissez « Masquer le bouton bascule » sur « Faux » pour donner aux utilisateurs un bouton bascule toujours visible pour contrôler le panneau.

Filtres de liste de choix pertinents

Les filtres de liste de choix du tableau de données Avonni s'adaptent automatiquement à vos données. Lors du filtrage d'une colonne de liste de choix, le menu de filtrage n'affiche que les valeurs de la liste de choix présentes dans au moins une ligne des données actuelles du tableau. Cela évite d'afficher des options non utilisées et simplifie le processus de filtrage.

Activez ceci en réglant «Masquer les valeurs vides de la liste de choix» sur « Activé » dans les propriétés du tableau de données.

Recherche

Les options de recherche vous permettent de configurer votre option de champ de recherche. Vous pouvez personnaliser le texte du placeholder et définir la position de votre champ de recherche. La zone de recherche apparaîtra lorsqu'au moins un champ est recherchable.

Rendre un champ recherchable

Depuis le panneau des Propriétés

• Allez au section Mappages de données

• Cliquez sur la colonne du champ que vous souhaitez rendre recherchable

• Faites défiler vers le bas et activez la Recherchable attribut

Recherche sur des données non visibles

Cette fonctionnalité permet aux utilisateurs d'effectuer des requêtes de recherche sur des champs spécifiques dans l'ensemble de données sous-jacent, même s'ils ne sont pas visibles dans la vue du tableau.

• Sélectionnez le Data Table

• Ouvrez la section Mappages de données

• Sélectionnez le PDF Viewer. Champs recherchables attribut, sélectionnez les champs qui doivent être recherchables sans les afficher dans le tableau de données.

Définir une valeur de recherche par défaut

Dans les options de recherche, l'attribut 'defaultSearchValue' vous permet de définir un terme de recherche prédéfini dans vos tableaux. Lorsque le tableau de données se charge, il recherche automatiquement en utilisant ce terme spécifié.

Interactions

Vous pouvez configurer divers éléments interactifs dans l'Avonni Data Table pour offrir aux utilisateurs des moyens d'interagir avec les données :

Actions d'en-tête (actions à l'échelle du tableau)

• But: Fournir des actions qui opèrent sur l'ensemble du tableau de données ou déclenchent des tâches générales.

• Mise en œuvre: Ajoutez des boutons ou d'autres composants interactifs à la zone d'en-tête du tableau de données.

• : La valeur maximale.: « Créer un nouvel enregistrement », « Exporter en CSV », « Mise à jour en masse », « Appliquer un préréglage de filtre ».

Actions de ligne (actions spécifiques à l'enregistrement)

• But: Permettre aux utilisateurs d'effectuer des actions liées à un enregistrement spécifique du tableau.

• Mise en œuvre: Ajoutez des boutons ou d'autres composants interactifs à chaque ligne du tableau de données.

• : La valeur maximale.: « Modifier l'enregistrement », « Supprimer l'enregistrement », « Voir les détails de l'enregistrement », « Approuver/Rejeter », « Démarrer le flux de travail ».

Enregistrement des modifications (action Enregistrer)

• But: Pour persister toutes les modifications effectuées dans les cellules éditables du tableau de données.

• Mise en œuvre: Configurez une interaction désignée pour déclencher l'«Action Enregistrer les enregistrements», qui engage les modifications vers la source de données sous-jacente.

Annuler les modifications (action Annuler)

• But: Permettre aux utilisateurs d'annuler toutes les modifications non enregistrées et de restaurer le tableau à son état précédent.

• Mise en œuvre: Configurez un bouton ou une action désigné(e) pour annuler les modifications en attente