Objectif du chapitre #

Dans le Parcours 1 – Initiation, le tableau de bord comportait un simple titre statique réalisé à l’aide d’un composant Libellé.
Dans ce chapitre, nous allons transformer ce simple titre en un véritable bandeau dynamique, capable d’afficher des informations techniques tout en apportant une identité visuelle au tableau de bord.

À l’issue de ce chapitre, vous serez capable de :

• créer une Datasource technique ;
• utiliser des variables système BiBOARD ;
• intégrer un logo dans une page de reporting ;
• créer un champ calculé HTML ;
• afficher un contenu HTML dans un composant Libellé.

Résultat attendu #

À la fin de ce chapitre, le tableau de bord disposera d’un bandeau similaire à celui-ci.

Le bandeau affichera :

• le logo de l’application ;
• le titre du tableau de bord ;
• un sous-titre ;
• le nom de l’utilisateur connecté ;
• la date et l’heure système.

Impacts sur le projet #

Avant de commencer, voici les éléments qui seront créés ou modifiés.

Étape 1 – Dupliquer le tableau de bord #

Afin de conserver intact le projet réalisé dans le Parcours 1 – Initiation, commencez par créer une copie du tableau de bord.

Créez une nouvelle catégorie :

DESIGN

Renommez cette copie :

DESIGN_TDB_SUIVI_VENTES

Toutes les modifications réalisées dans ce parcours seront effectuées sur cette nouvelle version.

Étape 2 – Préparer la zone du bandeau #

Le bandeau sera placé en haut de la page.

Pour cela :

• supprimez le composant Libellé contenant le titre initial ;
• descendez les autres composants afin de libérer une zone en partie supérieure du tableau de bord.

Cette zone accueillera progressivement les différents éléments du bandeau.

Étape 3 – Créer la requête SQL #

Nous allons maintenant créer une requête SQL permettant d’alimenter les informations techniques du bandeau.

Créez une nouvelle requête nommée :

DESIGN_DONNEES_TECHNIQUE

Puis saisissez le code suivant :

SELECT
    'Suivi des ventes Northwind' AS DESIGN_TITRE,
    'Analyse commerciale - Base de démonstration Northwind' AS DESIGN_SOUS_TITRE,

    :BIBOARDUSERNAME AS DESIGN_NOM_UTILISATEUR,
    :BIBOARDDATETIME AS DESIGN_DATE_SYSTEME,

    /* Créer un répertoire CUSTOM dans
       C:\Program Files (x86)\BiBOARD\BiBOARD_v18_A\Web\data\images 
       Le chemin peut varier suivant votre installation */

    /* Déposer le fichier image dans ce répertoire */

    'CUSTOM/V18__Logo_page.png' AS DESIGN_LOGO_PAGE

Cette requête ne lit aucune table de données.

Elle exploite les variables système fournies par BiBOARD ainsi que des variables techniques afin de construire une Datasource technique.

Étape 4 – Créer la Datasource #

À partir de cette requête, effectuez une sauvegarde de la requête pour crée automatiquement la Datasource portant le même nom :

DESIGN_DONNEES_TECHNIQUE

Cette Datasource sera utilisée par plusieurs composants tout au long du parcours.
Elle constituera le point central des informations techniques de l’application.

Étape 5 – Ajouter le logo #

Ajoutez un composant Image avec Datasource.

Connectez-le à la Datasource :

DESIGN_DONNEES_TECHNIQUE

Pour valeur de référence, utilisez le champ :

DESIGN_LOGO_PAGE

Dan Apparence, configurez ensuite le composant :

Le logo constitue le premier élément de l’identité visuelle du tableau de bord.

💡 Astuce

Le logo utilisé dans ce parcours est disponible en téléchargement ci-dessous. Copiez-le dans le répertoire CUSTOM avant de poursuivre.

Étape 6 – Créer le champ HTML #

Dans la Datasource DESIGN_DONNEES_TECHNIQUE, créez un nouveau champ calculé.

Nom du champ :

DESIGN_HTML_BANDEAU

Cochez l’option :

HTML

Puis recopiez le code proposé dans ce chapitre.
Ce champ construit dynamiquement le contenu du bandeau en utilisant les informations de la Datasource.

"<div style=""
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-left:20px;
    font-family:Segoe UI, Arial, sans-serif;
"">

    <div style=""
        font-size:30px;
        font-weight:700;
        color:#1F4E79;
        letter-spacing:0.5px;
        margin-bottom:4px;
    "">
        "& Field("DESIGN_TITRE") &"
    </div>

    <div style=""
        font-size:16px;
        color:#6B7280;
        margin-bottom:10px;
    "">
        "& Field("DESIGN_SOUS_TITRE") &"
    </div>

    <div style=""
        font-size:12px;
        color:#9CA3AF;
        border-top:1px solid #D6D6D6;
        padding-top:6px;
    "">
        Utilisateur : "& Field("DESIGN_NOM_UTILISATEUR") &"&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
        Dernière connexion : "& Field("DESIGN_DATE_SYSTEME") &"
    </div>

</div>"

Étape 7 – Ajouter le nouveau Libellé #

Dans Tableaux de bord, ajoutez un nouveau composant Libellé avec Datasource.

Configurez-le pour utiliser la Datasource :

DESIGN_DONNEES_TECHNIQUE

Pour valeur de référence et valeur affichée, sélectionnez le champ :

DESIGN_HTML_BANDEAU

Positionnez son affichage

Configurez ensuite son apparence.

Le composant affichera automatiquement le contenu HTML généré par le champ calculé.

Résultat #

Le tableau de bord dispose maintenant d’un véritable bandeau dynamique.

Celui-ci affiche :

• le logo de l’application ;
• un titre plus moderne ;
• un sous-titre ;
• le nom de l’utilisateur connecté ;
• la date et l’heure système.

Cette première amélioration apporte immédiatement une identité visuelle au tableau de bord.

Bonnes pratiques #

Dans ce chapitre, nous avons volontairement créé une Datasource technique indépendante des données métier.

Cette approche présente plusieurs avantages :

• centraliser les informations techniques de l’application ;
• réutiliser facilement ces informations dans plusieurs composants ;
• limiter les duplications ;
• faciliter les évolutions futures.

Cette Datasource sera enrichie progressivement au fil du parcours afin d’alimenter d’autres composants graphiques.

Ce qu’il faut retenir #

L’amélioration d’un tableau de bord ne passe pas uniquement par les graphiques ou les KPI.
Un bandeau bien conçu permet d’identifier immédiatement l’application, de présenter son contexte et d’afficher des informations utiles à l’utilisateur.
Dans ce chapitre, vous avez également découvert qu’un composant Libellé pouvait afficher un contenu HTML dynamique alimenté par une Datasource. Cette technique sera largement réutilisée dans les chapitres suivants pour concevoir des composants plus riches et entièrement pilotés par les données.