03 – Moderniser les KPI avec le HTML

Table des matières

Objectif du chapitre
Résultat attendu
Impacts sur le projet
Bonnes pratiques
Ce qu'il faut retenir

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

"<style>

.bb-kpi-card{
    width:100%;
    height:100%;
    box-sizing:border-box;
    border-radius:12px;
    border:1px solid #E4E7EC;
    background:#FFFFFF;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    font-family:Segoe UI, Arial, sans-serif;
    cursor:pointer;
    transition:all .25s ease;
    box-shadow:0 2px 6px rgba(0,0,0,.10);
    overflow:hidden;
}

.bb-kpi-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 22px rgba(0,0,0,.18);
    border-color:#1F4E79;
}

.bb-kpi-top{
    width:100%;
    height:5px;
    background:#1F4E79;
}

.bb-kpi-icon{
    font-size:34px;
    margin-top:12px;
    transition:transform .25s ease;
}

.bb-kpi-card:hover .bb-kpi-icon{
    transform:scale(1.15);
}

.bb-kpi-title{
    margin-top:10px;
    font-size:15px;
    color:#666666;
    text-align:center;
}

.bb-kpi-value{
    margin-top:8px;
    font-size:34px;
    font-weight:700;
    color:#1F4E79;
}

.bb-kpi-footer{
    margin-top:12px;
    padding-top:8px;
    width:85%;
    border-top:1px solid #ECECEC;
    text-align:center;
    font-size:11px;
    color:#999999;
}

</style>

<div class=""bb-kpi-card"">

    <div class=""bb-kpi-top""></div>

    <div class=""bb-kpi-icon"">
        <div class=""bb-kpi-icon"">
            <img src=""" & Field("DESIGN_LOGO_CA") & """ alt=""CA"" height=""50"" width=""50""/>
        </div>
    </div>

    <div class=""bb-kpi-title"">
        Chiffre d'affaires
    </div>

    <div class=""bb-kpi-value"">
        "& Field("ChiffreAffaires") &" €
    </div>

    <div class=""bb-kpi-footer"">
        "& Field("PaysAffiche") &" | "& Field("AnneeAffichee") &"
    </div>

</div>"

Pour le nombre de commandes :

DESIGN_NB_CMD

"<style>

.bb-kpi-card{
    width:100%;
    height:100%;
    box-sizing:border-box;
    border-radius:12px;
    border:1px solid #E4E7EC;
    background:#FFFFFF;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    font-family:Segoe UI, Arial, sans-serif;
    cursor:pointer;
    transition:all .25s ease;
    box-shadow:0 2px 6px rgba(0,0,0,.10);
    overflow:hidden;
}

.bb-kpi-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 22px rgba(0,0,0,.18);
    border-color:#1F4E79;
}

.bb-kpi-top{
    width:100%;
    height:5px;
    background:#1F4E79;
}

.bb-kpi-icon{
    font-size:34px;
    margin-top:12px;
    transition:transform .25s ease;
}

.bb-kpi-card:hover .bb-kpi-icon{
    transform:scale(1.15);
}

.bb-kpi-title{
    margin-top:10px;
    font-size:15px;
    color:#666666;
    text-align:center;
}

.bb-kpi-value{
    margin-top:8px;
    font-size:34px;
    font-weight:700;
    color:#1F4E79;
}

.bb-kpi-footer{
    margin-top:12px;
    padding-top:8px;
    width:85%;
    border-top:1px solid #ECECEC;
    text-align:center;
    font-size:11px;
    color:#999999;
}

</style>

<div class=""bb-kpi-card"">

    <div class=""bb-kpi-top""></div>

    <div class=""bb-kpi-icon"">
        <div class=""bb-kpi-icon"">
            <img src=""" & Field("DESIGN_LOGO_NB_CMD") & """ alt=""Nb Commandes"" height=""50"" width=""50""/>
        </div>
    </div>

    <div class=""bb-kpi-title"">
        Nombre de commandes
    </div>

    <div class=""bb-kpi-value"">
        "& Field("NombreCommandes") &"
    </div>

    <div class=""bb-kpi-footer"">
        "& Field("PaysAffiche") &" | "& Field("AnneeAffichee") &"
    </div>

</div>"

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`
Valeur de référence	`YEAR`
Rafraîchissement automatique	Oui

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é sans Datasource
Datasource	`DESIGN_04_ANNEE`
Valeur affichée	`YEAR`
Valeur de référence	`YEAR`
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	150
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.

Updated on 7 août 2026

Guide utilisateur

Support

Liens utiles

Vue historique des versions

Foire aux questions

Comment faire?

Parcours d'apprentissage

Bonnes pratiques