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.

---

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.

---

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.

---

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.

---

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.

---

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.

---

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.

---

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.

---

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é.