--- title: 05 – Moderniser le tableau description: "Le tableau constitue souvent la dernière étape d'un tableau de bord : il permet de consulter les données dans le détail après avoir utilisé les KPI et les graphiques pour obtenir une vision synthétique. Dans le Parcours 1 – Initiation,…" url: "https://wiki.biboard.fr/wiki/05-moderniser-le-tableau/" updated: "2026-08-25" category: "Parcours d'apprentissage / Design" --- # 05 – Moderniser le tableau Le tableau constitue souvent la dernière étape d'un tableau de bord : il permet de consulter les données dans le détail après avoir utilisé les KPI et les graphiques pour obtenir une vision synthétique. Dans le Parcours 1 – Initiation, le tableau affichait directement les lignes de commandes et leurs informations. Dans ce chapitre, nous allons conserver les données disponibles tout en améliorant : - la lecture du tableau ; - l'organisation des lignes ; - la hiérarchie visuelle des informations ; - la mise en évidence des valeurs importantes ; - l'utilisation du format conditionnel ; - le filtrage du tableau avec les sélections effectuées dans le tableau de bord. L'objectif est de montrer qu'un **tableau simple BiBOARD peut également être travaillé graphiquement et fonctionnellement**, sans avoir besoin de recourir à du HTML ou du JavaScript. > **Point de départ** > > > > Nous repartons du tableau de bord réalisé dans le Parcours 1 – Initiation. > > > > Comme pour les chapitres précédents, les éléments existants sont conservés autant que possible. Lorsqu'une modification nécessite de changer une requête ou une Datasource, nous créons une copie afin de ne pas modifier la réalisation du Parcours 1. --- ## Préparer le tableau Le tableau utilisé dans le Parcours 1 permettait d'afficher directement les lignes de commandes. Pour cette nouvelle version, nous allons conserver les informations détaillées mais modifier la structure d'affichage afin de regrouper les lignes appartenant à une même commande. Le tableau reste un **tableau simple**. ### Requête La requête utilisée pour alimenter le tableau est adaptée afin de permettre également le filtrage sur l'année. ``` SELECT CAST(co.NumCommande AS varchar(20)) + '-' + CAST(p.CodeProduit AS varchar(20)) AS CleLigne, co.NumCommande, co.DateCommande, CAST(YEAR(co.DateCommande) AS varchar(4)) AS Année_char, cl.CodeClient, cl.RaisonSociale AS Client, cl.Pays, p.CodeProduit, p.NomProduit, cat.NomCategorie AS Categorie, cd.Quantite, cd.Prix AS PrixUnitaire, cd.Remise, CAST( cd.Prix * cd.Quantite AS decimal(18, 2) ) AS MontantBrut, CAST( cd.Prix * cd.Quantite * (1 - cd.Remise) AS decimal(18, 2) ) AS MontantNet FROM Demonstration.dbo.Commandes AS co INNER JOIN Demonstration.dbo.Clients AS cl ON cl.CodeClient = co.CodeClient INNER JOIN Demonstration.dbo.Commandes_Details AS cd ON cd.NumCommande = co.NumCommande INNER JOIN Demonstration.dbo.Produits AS p ON p.CodeProduit = cd.CodeProduit INNER JOIN Demonstration.dbo.Categories AS cat ON cat.CodeCategorie = p.NumCategorie WHERE co.DateCommande IS NOT NULL AND ( :pPays = '#NULL' OR cl.Pays = :pPays ) AND ( :pAnnee = '#NULL' OR CAST(YEAR(co.DateCommande) AS varchar(4)) = :pAnnee ) ORDER BY co.DateCommande DESC, co.NumCommande DESC, p.NomProduit; ``` Deux paramètres permettent maintenant de contrôler le tableau : - `:pPays` pour filtrer les données sur le pays ; - `:pAnnee` pour filtrer les données sur l'année. Le champ `Année_char` permet d'utiliser le même principe de filtrage que celui mis en place sur les graphiques. --- ## 2. Créer le regroupement des commandes Une commande peut contenir plusieurs produits. Afficher toutes les informations de la commande sur chaque ligne entraîne donc une répétition importante des données. Nous allons utiliser la possibilité de **grouper les lignes du tableau**. ### Champ calculé Dans la Datasource, créer un champ calculé nommé : ``` Commande ``` avec la formule : ``` Field("NumCommande") & " | " & Field("DateCommande") & " | " & Field("Client") & " | " & Field("Pays") ``` Ce champ rassemble les principales informations permettant d'identifier une commande : **Numéro de commande | Date | Client | Pays** ### Tableau Dans les propriétés du tableau, activer l'option : **Groupe** Puis utiliser le champ calculé `Commande` comme champ de regroupement. Les lignes appartenant à une même commande sont alors regroupées. L'utilisateur peut développer ou réduire chaque commande afin d'afficher ses lignes de détail. > **Résultat attendu** > > > > Une commande constitue maintenant un niveau de lecture supplémentaire dans le tableau. > > > > Le tableau devient ainsi plus compact et permet de passer facilement d'une vision synthétique de la commande à son détail. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap5_Groupement-1024x617.png) --- ## 3. Adapter les colonnes affichées Le regroupement permet de récupérer certaines informations dans l'en-tête de chaque commande. Nous pouvons donc alléger le détail du tableau en supprimant les colonnes devenues redondantes. Dans les colonnes du tableau, conserver uniquement : | Colonne | Rôle | | --- | --- | | Nom produit | Produit vendu | | Catégorie | Catégorie du produit | | Quantité | Quantité commandée | | Prix unitaire | Prix du produit | | Remise | Remise appliquée | | Montant brut | Montant avant remise | | Chiffre d'affaires | Montant après remise | Les informations suivantes ne sont donc plus affichées dans le détail : - N° de commande ; - Date de commande ; - Client ; - Pays. Elles restent accessibles dans le regroupement `Commande`. ### Adapter les largeurs Pour améliorer la lecture, adapter également la largeur des colonnes. Par exemple : - **Nom produit : 150 px** - **Catégorie : 80 px** Les autres colonnes peuvent être ajustées en fonction de leur contenu. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap5_Largeur-col-1-1024x617.png) --- ## 4. Renforcer la lecture des valeurs Une fois la structure du tableau définie, nous pouvons travailler sur sa hiérarchie visuelle. Les valeurs numériques sont particulièrement importantes dans un tableau de suivi des ventes. Mettre en gras les valeurs des colonnes suivantes : - Quantité ; - Prix unitaire ; - Remise ; - Montant brut ; - Chiffre d'affaires. Cette modification permet de distinguer plus facilement les données chiffrées des informations descriptives. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap5_gras-valeur-1024x617.png) --- ## 5. Mettre en évidence les chiffres d'affaires Le format conditionnel permet d'aller plus loin en faisant varier automatiquement l'apparence d'une cellule en fonction de sa valeur. Nous allons l'utiliser sur la colonne **Chiffre d'affaires**. ### Jeu de règles 1 – Mise en évidence des chiffres d'affaires importants Créer un jeu de format conditionnel permettant de mettre en évidence les chiffres d'affaires supérieurs à : **1 000 €** L'objectif est de faire ressortir immédiatement les lignes représentant les ventes les plus importantes. Le format conditionnel est appliqué automatiquement aux données : il n'est donc pas nécessaire de modifier individuellement les lignes du tableau. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap5_format-cond-jeu-1-1024x617.png) --- ## 6. Mettre en évidence les remises Le même principe peut être utilisé sur la colonne **Remise**. Cette fois, nous allons créer trois niveaux de lecture. | Remise | Mise en évidence | | --- | --- | | 0 à 5 % | Vert | | 5,01 à 10 % | Orange | | Supérieure à 10 % | Rouge | Le tableau permet ainsi d'identifier rapidement le niveau de remise appliqué à chaque ligne. Cette utilisation du format conditionnel apporte une information visuelle complémentaire sans modifier les données affichées. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap5_format-cond-jeu-2-1024x617.png) --- ## 7. Relier le tableau aux filtres du tableau de bord Le tableau doit maintenant réagir aux sélections effectuées dans le tableau de bord. Nous allons utiliser les deux listes déroulantes déjà présentes : - la liste des **années** ; - la liste des **pays**. ### Filtre sur l'année Créer le lien entre la liste déroulante des années et le tableau : ``` YEAR_CHAR → pAnnee ``` La sélection d'une année permet ainsi de filtrer les lignes du tableau. ### Filtre sur le pays Créer également le lien entre la liste déroulante des pays et le tableau : ``` Pays → pPays ``` Le tableau est alors filtré en fonction du pays sélectionné. Lorsque l'utilisateur sélectionne **Tous les pays**, le tableau conserve la colonne Pays dans le regroupement afin de permettre d'identifier l'origine de chaque commande. > **À retenir** > > > > Le même système de filtres peut ainsi piloter plusieurs composants du tableau de bord : > > > > - les KPI ; > - les graphiques ; > - le tableau. > > > > Le tableau de bord conserve ainsi un comportement cohérent : une sélection effectuée par l'utilisateur met à jour l'ensemble des composants concernés. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap5_lien-2-1024x966.png) ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap5_lien-1-1024x966.png) --- ## 8. Ajuster l'apparence du tableau La dernière étape consiste à ajuster les propriétés générales du composant afin d'obtenir un rendu cohérent avec le reste du tableau de bord. Les réglages peuvent notamment être effectués dans l'onglet **Tableau / Bandeau principal** (propriétés simple du tableau) et **Apparence** Ces réglages permettent d'adapter le tableau à l'espace qui lui est réservé dans le tableau de bord et d'assurer une cohérence graphique avec les KPI et les graphiques réalisés précédemment. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap5_Proprietes-simples-du-tableau-1024x69.png) ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap5_apparence-du-tableau-1024x133.png) --- # Ce que nous avons réalisé À partir du tableau du Parcours 1, nous avons progressivement amélioré sa structure et son rendu. ### Côté SQL La requête a été adaptée pour : - conserver les données nécessaires au tableau ; - ajouter l'année de commande ; - permettre le filtrage par année avec `:pAnnee` ; - conserver le filtrage par pays avec `:pPays`. ### Côté Datasource Nous avons créé le champ calculé : ``` Commande ``` qui permet de construire le regroupement des commandes : ``` Numéro de commande | Date | Client | Pays ``` ### Côté tableau Nous avons : - activé le regroupement ; - utilisé `Commande` comme groupe ; - réduit le nombre de colonnes affichées ; - adapté la largeur des colonnes ; - mis les valeurs numériques en gras ; - ajouté un format conditionnel sur le Chiffre d'affaires ; - ajouté trois niveaux de mise en évidence sur la Remise ; - adapté les propriétés générales et l'apparence du tableau. ### Côté interactions Le tableau est maintenant relié aux deux filtres du tableau de bord : ``` Année → pAnnee Pays → pPays ``` Le choix effectué par l'utilisateur est donc répercuté sur le tableau comme sur les autres composants. --- # Résultat Le tableau initial affichait une liste de lignes de commandes. Après amélioration, il propose désormais une lecture structurée : **Commande → lignes de détail** avec une hiérarchie visuelle plus claire et une mise en évidence automatique des informations importantes. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap5_resultat-final-1024x546.png) --- # Bilan du Parcours 2 – Amélioration du rendu Au cours de ce parcours, nous sommes partis d'une réalisation existante du **Parcours 1 – Initiation** pour améliorer progressivement son rendu. Nous avons travaillé sur plusieurs niveaux : - **identité du tableau de bord** avec un bandeau personnalisé ; - **KPI** avec des cartes HTML et des effets visuels ; - **graphiques** avec leur configuration et leur personnalisation ; - **tableau simple** avec regroupement, mise en forme et formats conditionnels ; - **interactions** entre les listes déroulantes et les différents composants. Ce parcours montre surtout qu'il n'existe pas une seule manière de construire un tableau de bord dans BiBOARD. Selon le besoin, on peut travailler : **SQL → Datasource → composant** mais également partir d'un composant existant et revenir vers la Datasource ou la requête lorsque cela est nécessaire. Le design peut lui aussi être réalisé de différentes façons : - avec les propriétés natives des composants ; - avec des champs calculés HTML ; - avec du CSS ; - avec des formats conditionnels ; - avec des interactions entre composants. > **À retenir** > > > > L'amélioration du rendu ne consiste pas uniquement à « rendre un tableau de bord plus joli ». > > > > Elle consiste à améliorer progressivement **la lisibilité, la hiérarchie de l'information, l'interactivité et l'expérience utilisateur**, tout en conservant une construction cohérente et maintenable. ## Bilan du Parcours 2 > Nous sommes partis du tableau de bord réalisé dans le **Parcours 1 – Initiation** pour améliorer progressivement son rendu et son ergonomie. > > > > Au fil des chapitres, nous avons travaillé sur le **bandeau, les KPI, les graphiques et le tableau**, en utilisant les possibilités natives de BiBOARD ainsi que le HTML, le CSS, les champs calculés et les formats conditionnels. > > > > L'objectif était de montrer comment une réalisation fonctionnelle peut progressivement évoluer vers une **application de reporting plus claire, plus interactive et plus personnalisée**, sans remettre en cause sa construction initiale. > > > > **Le Parcours 2 – Amélioration du rendu est maintenant terminé.** ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap5_bilan-part1-1012x1024.png) ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap5_bilan-part2-1024x826.png)