---
title: 07 – Ajouter les composants au Tableau de Bord
description: "## Objectif de cette étape Nous allons créer le Tableau de Bord, puis ajouter les composants un par un. Chaque composant utilisera une Datasource adaptée à son niveau de détail. **Créer le Tableau de Bord** Dans BiBOARD Studio : 1.…"
url: "https://wiki.biboard.fr/wiki/07-ajouter-les-composants-au-tableau-de-bord/"
updated: "2026-07-23"
category: "Parcours d'apprentissage / Initiation"
---

# 07 – Ajouter les composants au Tableau de Bord

## Objectif de cette étape

Nous allons créer le Tableau de Bord, puis ajouter les composants un par un.
Chaque composant utilisera une Datasource adaptée à son niveau de détail.

**Créer le Tableau de Bord**

Dans BiBOARD Studio :

1. créez un nouveau Tableau de Bord ;
2. nommez-le :

PARCOURS_TDB_SUIVI_VENTES

1. ajoutez un titre :

Suivi des ventes Northwind

1. enregistrez le Tableau de Bord avant d’ajouter les composants.

L’interface de création des Tableaux de Bord permet d’ajouter des composants, de leur associer une Datasource, d’organiser leur position et d’exécuter ensuite le résultat dans le portail.

---

### Composant 1 — KPI du chiffre d’affaires

#### Type de composant

```
Libellé avec Datasource.
```

#### Datasource

```
PARCOURS_02_CA_TOTAL
```

#### Champ utilisé

```
ChiffreAffaires
```

#### Configuration proposée

| **Propriété** | **Valeur** |
| --- | --- |
| Titre | Chiffre d’affaires |
| Valeur | ChiffreAffaires |
| Format | Monétaire |
| Agrégation supplémentaire | Aucune |
| Position | Première ligne |

#### Comment amélioré son affichage ?

Ajouter un composant libellé du texte.

```
Chiffre d'affaires
```

Il est aussi possible de modifier l'apparence des 2 composants pour améliorer son affichage (police, taille, couleur, ...).

![](https://wiki.biboard.fr/wp-content/uploads/2026/07/CP-C1-TdB-06-1024x617.png)

---

### Composant 2 — KPI du nombre de commandes

#### Type de composant

```
Libellé avec Datasource.
```

#### Datasource

```
PARCOURS_03_NOMBRE_COMMANDES
```

#### Champ utilisé

```
NombreCommandes
```

#### Configuration proposée

| **Propriété** | **Valeur** |
| --- | --- |
| Titre | Nombre de commandes |
| Valeur | NombreCommandes |
| Format | Nombre entier |
| Agrégation supplémentaire | Aucune |
| Position | À droite du premier KPI |

#### Comment amélioré son affichage ?

Ajouter un composant libellé du texte.

```
Nombre de commandes
```

#### Point d’attention

La requête retourne déjà le nombre de commandes.
Le composant ne doit pas recompter ou additionner plusieurs lignes.

![](https://wiki.biboard.fr/wp-content/uploads/2026/07/CP-C1-TdB-07-1024x617.png)

---

### Composant 3 — Évolution mensuelle du chiffre d’affaires

#### Type de composant

Vous pouvez utiliser :

- une courbe pour mettre en évidence l’évolution ;
- un histogramme pour comparer visuellement les mois.

##### Configuration proposée

| **Propriété** | **Valeur** |
| --- | --- |
| Titre | Évolution mensuelle du chiffre d’affaires |
| Dimension | Mois |
| Mesure | ChiffreAffaires |
| Tri | Mois croissant |
| Format de la mesure | Monétaire |

#### Datasource

```
PARCOURS_04_CA_MENSUEL
```

#### Champs utilisés

| **Rôle** | **Champ** |
| --- | --- |
| Axe horizontal | Mois |
| Valeur | ChiffreAffaires |

**Pourquoi utiliser un champ date ?**

Un véritable champ date permet :

- de conserver l’ordre chronologique ;
- d’éviter un tri alphabétique des mois ;
- d’utiliser plus tard des fonctions temporelles.

![](https://wiki.biboard.fr/wp-content/uploads/2026/07/CP-C1-TdB-05-1024x617.png)

---

### Composant 4 — Chiffre d’affaires par catégorie

#### Type de composant

```
Un histogramme horizontal est particulièrement adapté lorsque les libellés de catégories sont relativement longs.
```

#### Datasource

```
PARCOURS_05_CA_CATEGORIE
```

#### Champs utilisés

| **Rôle** | **Champ** |
| --- | --- |
| Catégorie | Categorie |
| Valeur | ChiffreAffaires |

**Configuration proposée**

| **Propriété** | **Valeur** |
| --- | --- |
| Titre | Chiffre d’affaires par catégorie |
| Dimension | Categorie |
| Mesure | ChiffreAffaires |
| Tri | ChiffreAffaires décroissant |
| Étiquettes | Facultatives |
| Format | Monétaire |

![](https://wiki.biboard.fr/wp-content/uploads/2026/07/CP-C1-TdB-04-1024x617.png)

---

### Composant 5 — Tableau détaillé des commandes

#### Type de composant

```
Un tableau simple.
```

#### Datasource

```
PARCOURS_01_DETAIL_COMMANDES
```

#### Colonnes à afficher

Dans l’ordre :

```
NumCommande
DateCommande
Client
Pays
NomProduit
Categorie
Quantite
PrixUnitaire
Remise
Chiffres d'affaire (MontantNet)
```

#### Colonnes à ne pas afficher

```
CleLigne
CodeClient
RemisePourcenatge
CodeProduit
MontantBrut
RemisePourcentage
```

MontantBrut peut toutefois être conservé si vous souhaitez comparer le montant avant et après remise.

![](https://wiki.biboard.fr/wp-content/uploads/2026/07/CP-C1-TdB-02-1024x617.png)

#### Configuration proposée

| **Propriété** | **Valeur** |
| --- | --- |
| Tri principal | DateCommande décroissante |
| Tri secondaire | NumCommande décroissant |
| Pagination | Activée |
| Recherche | Activée si disponible |
| Export | Selon les besoins |
| Total de MontantNet | Facultatif |

![](https://wiki.biboard.fr/wp-content/uploads/2026/07/CP-C1-TdB-03-1024x617.png)

### Organiser les composants

Disposition recommandée :

Première ligne

    KPI chiffre d’affaires
    KPI nombre de commandes

Deuxième ligne

    Évolution mensuelle
    Chiffre d’affaires par catégorie

Troisième ligne

    Tableau détaillé

Laissez un espace sur la première ligne pour la future liste de pays.

![](https://wiki.biboard.fr/wp-content/uploads/2026/07/CP-C1-TdB-01-1-1024x542.png)

## Tester le Tableau de Bord

Exécutez le Tableau de Bord avec le paramètre par défaut :

```
pPays = #NULL
```

À ce stade :

- tous les composants doivent afficher des données ;
- le filtre par pays n’est pas encore visible ;
- les composants présentent l’ensemble des pays.

**Résultat attendu**
Le Tableau de Bord est fonctionnel et présente une vue globale des ventes.

---