---
title: 03 – Moderniser les KPI avec le HTML
description: "## Objectif du chapitre Dans le **Parcours 1 - Initiation**, les indicateurs étaient constitués de deux composants distincts : - un composant **Libellé** pour le titre ; - un second composant **Libellé** connecté à une Datasource pour afficher la valeur.…"
url: "https://wiki.biboard.fr/wiki/03-moderniser-les-kpi-avec-le-html/"
updated: "2026-08-18"
category: "Parcours d'apprentissage / Design"
---
# 03 – Moderniser les KPI avec le HTML
## Objectif du chapitre
Dans le **Parcours 1 - Initiation**, les indicateurs étaient constitués de deux composants distincts :
- un composant **Libellé** pour le titre ;
- un second composant **Libellé** connecté à une Datasource pour afficher la valeur.
Cette approche est simple et parfaitement adaptée pour découvrir BiBOARD. En revanche, elle atteint rapidement ses limites lorsqu'on souhaite améliorer le rendu graphique.
Dans ce chapitre, nous allons transformer ces deux composants en **véritables cartes KPI**, entièrement réalisées en HTML.
À l'issue de ce chapitre, vous serez capable de :
- créer un KPI moderne à l'aide d'un simple composant Libellé ;
- utiliser un champ calculé HTML dans une Datasource ;
- intégrer une icône personnalisée dans un KPI ;
- ajouter des effets visuels grâce au CSS ;
- afficher dynamiquement le contexte de calcul (Pays et Année) ;
- connecter un KPI aux filtres du tableau de bord.
---
# Résultat attendu
À la fin de ce chapitre, les deux KPI du tableau de bord auront été remplacés par des cartes modernes affichant :
- une icône personnalisée ;
- le nom de l'indicateur ;
- la valeur calculée ;
- le contexte d'affichage (Pays et Année) ;
- un effet visuel au survol de la souris.
---
# Impacts sur le projet
| Élément | Action |
| --- | --- |
| Requête SQL | Création de `DESIGN_02_CA_TOTAL` |
| Requête SQL | Création de `DESIGN_03_NOMBRE_COMMANDES` |
| Requête SQL | Création de `DESIGN_04_ANNEE` |
| Datasource | Ajout du champ calculé `DESIGN_CHIFFRES_AFFAIRES` |
| Datasource | Ajout du champ calculé `DESIGN_NB_CMD` |
| Tableau de bord | Suppression des anciens composants KPI : Titre et KPI |
| Tableau de bord | Ajout d'une liste déroulante Année et d'un champ Libellé sans Datasource pour le titre |
| Tableau de bord | Création de deux nouveaux composants Libellé HTML |
| Liens entre composants | Liens entre les listes et les carte de KPI sur les paramètres `pPays` et `pAnnee` |
---
## Étape 1 - Préparer les nouvelles requêtes
Nous allons créer trois nouvelles requêtes.
### DESIGN_02_CA_TOTAL
Cette requête calcule le chiffre d'affaires en tenant compte des filtres sélectionnés.
Elle retourne également :
- le pays affiché ;
- l'année affichée ;
- le chemin de l'icône du KPI.
Ces informations permettront de construire une carte entièrement dynamique.
```
SELECT
CAST(
COALESCE(
SUM(
cd.Prix
* cd.Quantite
* (1 - cd.Remise)
),
0
)
AS decimal(18,2)
) AS ChiffreAffaires,
CASE
WHEN :pAnnee = '#NULL' THEN 'Toutes les années'
ELSE CAST(:pAnnee AS varchar(4))
END AS AnneeAffichee,
CASE
WHEN :pPays = '#NULL' THEN 'Tous les pays'
ELSE CAST(:pPays AS varchar(50))
END AS PaysAffiche,
'/data/images/CUSTOM/V18__KPI_CA.png' As DESIGN_LOGO_CA
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
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
);
```
---
### DESIGN_03_NOMBRE_COMMANDES
Cette requête reprend le même principe afin de calculer le nombre de commandes.
Elle sera utilisée pour créer la seconde carte KPI.
```
SELECT
COUNT(DISTINCT co.NumCommande) AS NombreCommandes,
CASE
WHEN :pAnnee = '#NULL' THEN 'Toutes les années'
ELSE CAST(:pAnnee AS varchar(4))
END AS AnneeAffichee,
CASE
WHEN :pPays = '#NULL' THEN 'Tous les pays'
ELSE CAST(:pPays AS varchar(50))
END AS PaysAffiche,
'/data/images/CUSTOM/V18__KPI_NbCmd.png' As DESIGN_LOGO_NB_CMD
FROM Demonstration.dbo.Commandes AS co
INNER JOIN Demonstration.dbo.Clients AS cl
ON cl.CodeClient = co.CodeClient
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
);
```
---
### DESIGN_04_ANNEE
Cette requête permet d'alimenter la nouvelle liste déroulante des années.
Elle sera utilisée pour filtrer dynamiquement l'ensemble des KPI.
```
Select
DISTINCT YEAR(Demonstration.dbo.Commandes.DateCommande) AS 'YEAR',
CAST(YEAR(Demonstration.dbo.Commandes.DateCommande) As Varchar(4)) AS 'YEAR_CHAR'
From
Demonstration.dbo.Commandes
WHERE
Demonstration.dbo.Commandes.DateCommande IS NOT NULL
```
---
## Étape 2 - Créer les champs HTML
Dans chacune des Datasources KPI, ajoutez un nouveau champ calculé.
Pour le chiffre d'affaires :
```
DESIGN_CHIFFRES_AFFAIRES
```
```
"
"
```
N'oubliez pas de cocher l'option **HTML** pour ces 2 nouveaux champs calculés.
Ces champs construiront entièrement l'affichage des cartes KPI.
---
## Étape 3 - Remplacer les anciens composants
Les anciens KPI étaient composés de plusieurs composants.
Ils seront remplacés par un unique composant **Libellé** utilisant directement le champ HTML.
Cette approche simplifie considérablement la mise en page tout en offrant une liberté graphique beaucoup plus importante.
---
## Étape 4 - Ajouter le filtre Année
Ajoutez un composant **un Titre** et une **Liste déroulante**.
Configurez le titre avec :
| Paramètre | Valeur |
| --- | --- |
| Composant | Formulaire \ Libellé sans Datasource |
| Texte | `Exercice` |
Configurez ensuite le composant :
| Paramètre | Valeur |
| --- | --- |
| Position verticale de l’objet sur page | 100 |
| Position horizontale de l’objet sur page | 0 |
| Hauteur de l’objet | 25 |
| Largeur de l’objet | 150 |
Configurez le KPI avec :
| Paramètre | Valeur |
| --- | --- |
| Composant | Formulaire \ Libellé avec Datasource |
| Datasource | `DESIGN_04_ANNEE` |
| Valeur affichée | `YEAR`_CHAR |
| Valeur de référence | `YEAR`_CHAR |
| Rafraîchissement automatique | Oui |
Configurez ensuite le composant :
| Position | Taille |
| --- | --- |
| Position verticale de l’objet sur page | 100 |
| Position horizontale de l’objet sur page | 155 |
| Hauteur de l’objet | 25 |
| Largeur de l’objet | 120 |
| Plus le niveau est fort plus le composant est au premier plan | A modifier si la liste déroulante passe sous le KPI lors de son utilisation |
---
## Étape 5 - Créer les nouvelles cartes KPI
Ajoutez deux composants **Libellé** avec Datasource.
### Carte Chiffre d'affaires
Datasource :
```
DESIGN_02_CA_TOTAL
```
Champ affiché :
```
DESIGN_CHIFFRES_AFFAIRES
```
Option :
✅ HTML
Configuration :
| Position | Taille |
| --- | --- |
| Position verticale de l’objet sur page | 130 |
| Position horizontale de l’objet sur page | 0 |
| Hauteur de l’objet | 100 |
| Largeur de l’objet | 500 |
---
### Carte Nombre de commandes
Datasource :
```
DESIGN_03_NOMBRE_COMMANDES
```
Champ affiché :
```
DESIGN_NB_CMD
```
Option :
✅ HTML
Configuration :
| Position | Taille |
| --- | --- |
| Position verticale de l’objet sur page | 130 |
| Position horizontale de l’objet sur page | 500 |
| Hauteur de l’objet | 100 |
| Largeur de l’objet | 500 |
---
## Étape 6 - Connecter les paramètres
Reliez maintenant les composants entre eux.
### Liste Année
Créer le lien :
```
YEAR_CHAR
↓
pAnnee
```
vers :
- KPI Chiffre d'affaires ;
- KPI Nombre de commandes.
---
### Liste Pays
Créer également le lien :
```
Pays
↓
pPays
```
vers les deux KPI.
Les cartes deviennent alors entièrement interactives.
À chaque changement de filtre, les requêtes sont automatiquement recalculées et le contenu HTML est mis à jour.
---
## Résultat
Le tableau de bord dispose désormais de deux cartes KPI modernes.
Chaque carte affiche :
- une icône personnalisée ;
- le nom de l'indicateur ;
- la valeur calculée ;
- le contexte d'affichage (Pays et Année).
Grâce au CSS, les cartes bénéficient également d'un effet de survol mettant légèrement en valeur le composant lorsque la souris le survole.
Cette approche améliore considérablement le rendu du tableau de bord tout en conservant une architecture simple.
---
# Bonnes pratiques
Les KPI ont été réalisés à l'aide d'un simple composant **Libellé**.
Cette approche présente plusieurs avantages :
- aucune dépendance à un composant spécifique ;
- liberté totale sur la présentation graphique ;
- possibilité d'intégrer des icônes, des images ou du HTML avancé ;
- séparation claire entre les données (SQL), la présentation (champ calculé HTML) et le composant d'affichage.
Cette méthode pourra être réutilisée pour tous les futurs KPI de vos applications.
---
# Ce qu'il faut retenir
Dans ce chapitre, vous avez découvert qu'un simple composant **Libellé** peut devenir une véritable carte KPI grâce à un champ calculé HTML.
En combinant SQL, Datasources et HTML, il devient possible de créer des composants modernes, interactifs et entièrement pilotés par les données.
Cette approche offre une grande liberté de personnalisation tout en conservant la simplicité de développement propre à BiBOARD.