--- title: 02 – Donner une identité au tableau de bord description: "## 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…" url: "https://wiki.biboard.fr/wiki/02-donner-une-identite-au-tableau-de-bord/" updated: "2026-08-06" category: "Parcours d'apprentissage / Design" --- # 02 – Donner une identité au tableau de bord ## 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. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap2_Attendu-bandeau-1024x542.png) 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. | Élément | Action | | --- | --- | | Tableau de bord | Duplication | | Requête SQL | Création | | Datasource | Création | | Champ calculé HTML | Création | | Composant Image | Création | | Composant Libellé | Remplacement | | Mise en page | Réorganisation | --- # É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](https://wiki.biboard.fr/wiki/maitriser-les-categories/#1-toc-title) : ``` 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)BiBOARDBiBOARD_v18_AWebdataimages 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 : | Paramètre | Valeur | | --- | --- | | Position verticale de l'objet sur page | 0 | | Position horizontale de l'objet sur page | 0 | | Hauteur de l'objet | 90 | | Largeur de l'objet | 90 | 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. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Logo_page-150x150.png) --- ## É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. ``` "
"& Field("DESIGN_TITRE") &"
"& Field("DESIGN_SOUS_TITRE") &"
Utilisateur : "& Field("DESIGN_NOM_UTILISATEUR") &"   |    Dernière connexion : "& Field("DESIGN_DATE_SYSTEME") &"
" ``` --- ## É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 | Paramètre | Valeur | | --- | --- | | Alignement du texte | Centré au centre | Configurez ensuite son apparence. | Paramètre | Valeur | | --- | --- | | Position verticale de l'objet sur page | 0 | | Position horizontale de l'objet sur page | 90 | | Hauteur de l'objet | 90 | | Largeur de l'objet | 910 | 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.