Intégrer un tableau de bord dans une page web
- Mode d’intégration par iFrame
- Mode d’intégration JavaScript embarqué
- Paramètres disponibles
- Intégration de pages de tableau de bord
- Pages connexes...
Dans cette documentation, nous nous plaçons dans le contexte suivant :
- Nom du serveur : ddsrv
- Port : 8080
- Domaine DigDash : ddenterpriseapi
- Domaine tableau de bord DigDash: digdash_dashboard
Il faudra bien sûr adapter l'intégration à votre contexte.
Mode d’intégration par iFrame
Vous pouvez intégrer un tableau de bord (avec une ou plusieurs pages) dans une iframe en utilisant l'URL sous la forme suivante :
Il est possible de passer des paramètres dans cette URL qui seront lus par l’application pour s'authentifier et adapter le contenu affiché.
Ces paramètres sont ajoutés sous forme de chaîne de requête à la fin de l’URL, après un point d’interrogation ?.
Chaque paramètre est une paire clé=valeur, et les différentes paires sont séparées par un &.
Consultez le paragraphe Paramètres disponibles pour la liste complète des paramètres.
Par exemple, pour afficher le tableau de bord avec :
- le nom d'utilisateur "user1" et le mot de passe "pass1",
- la bannière masquée,
- la barre de filtres masquée,
- la variable var égale à 1,
nous intégrons le code dans une balise iFrame comem suit :
Mode d’intégration JavaScript embarqué
Ce mode nécessite de charger le fichier Javascript permettant d'afficher un tableau de bord DigDash dans une page web. Pour cela, ajoutez la ligne de code suivante dans la section <head> de votre page web :
Vous pouvez intégrer un tableau de bord DigDash soit en HTML à l’aide de balises dédiées, soit via JavaScript pour une configuration plus dynamique.
Intégration HTML
Une balise personnalisée <dd-dashboard /> permet d’intégrer un tableau de bord directement dans le code HTML, sans écrire de JavaScript.
Pour intégrer le tableau de bord, utilisez le code sous la forme suivante à l'emplacement souhaité sur la page web :
Dans ce mode, les paramètres sont passés directement comme attributs de la balise.
Par exemple, pour afficher le tableau de bord :
- sur la page "Synthèse" par défaut,
- filtré sur l'année 2025 (hiérarchie Date),
- avec le nom d'utilisateur "user1" et le mot de passe "pass1",
nous utilisons le code suivant :
Intégration JavaScript
Pour intégrer un tableau de bord en mode JavaScript :
- Ajoutez une balise <div> avec un identifiant unique à l'emplacement souhaité sur la page web : cette balise servira de conteneur pour afficher le tableau de bord DigDash.
Par exemple :
- Ajoutez le script JavaScript pour initialiser et afficher le tableau de bord.
Pour cela, dans une balise <script>, ajoutez le code suivant :
DigDash.drawDashboard("mydashboard");
- La méthode DigDash.init() permet d'initialiser le tableau de bord en spécifiant l'URL du serveur DigDash et les paramètres souhaités.
- La méthode DigDash.drawDashboard() permet d'afficher le tableau de bord dans le conteneur défini précédemment.
Par exemple, pour afficher le tableau de bord:
- sur la page "Synthèse" par défaut,
- filtré sur l'année 2025 (hiérarchie Date),
- avec le nom d'utilisateur "user1" et le mot de passe "pass1",
nous utilisons le script suivant :
function draw(){
DigDash.init({
"url": "http//ddsrv:8080/digdash_dashboard",
"defaultPage": "Telecom_Accueil", // page affichée par défaut
"Date": "2025", // filtre sur la dimension Date
"Hdate": "Date", // hiérarchie utilisée
"LDate": "Année", // niveau dans la hiérarchie
"user": "user1", // identifiant
"pass": "pass1" // mot de passe
});
DigDash.drawDashboard("dashboard");
}
</script>
Paramètres disponibles
💡 Vous pouvez aussi utiliser un mécanisme d'authentification server-side pour éviter les paramètres user/pass. Consultez la page Anonymisation des Urls pour plus de détails.
Dans ce cas le paramètre authToken remplace le paramètre pass.
Les paramètres disponibles pour les tableaux de bord sont les suivants :
| Paramètre | Valeur | Description |
|---|---|---|
| user | user | Utilisateur à authentifier |
| pass | password | Mot de passe pour l’utilisateur non authentifié |
| authToken | token | Token pour l’utilisateur non authentifié |
| server* | server URL | URL du domaine DigDash Enterprise (par exemple : http://localhost:8080) |
| domain* | domainname | Nom du domaine DigDash Enterprise (par exemple : ddenterpriseapi) |
defaultPage | pageId | Identifiant de la page que l'utilisateur souhaite afficher par défaut à la place de la première page. Cet identifiant est visible dans l'Éditeur de tableau de bord dans le menu contextuel de la page (affiché via un clic droit sur le titre de l'onglet de la page). Deux identifiants sont affichés, l'un est unique et non modifiable (uid), l'autre est "calculé" en fonction du nom du rôle et de la page (ces 2 éléments étant modifiables, l'identifiant peut donc changer et le paramètre ne plus être efficace). |
| hideBanner | true|false | Masque (true) ou affiche (false) la barre de titre |
| hideFilters | true|false | Masque (true) ou affiche (false) la barre de filtres |
| hideNavigationMenu | true|false | Active (true) ou désactive (false) le menu de navigation (Vertical ou Onglets). |
useHistory | true|false | Désactive (false) l'historique de navigation. Le menu de navigation dans l'historique en haut à droite n'est plus visible. |
| nomVariable | valeurVariable | Spécifie la valeur de la variable nomVariable |
nomDimension Si la dimension contient une hiérarchie ou plus, vous pouvez sélectionner la hiérarchie et le niveau souhaités en ajoutant :
| valeurFiltre aaaa NomHierarchie | Spécifie le membre de la dimension filtré zzzzzzz Spécifie le nom de la hiérarchie |
* Paramètres qui peuvent être saisis dans la boite de connexion en mode avancé lorsque ces paramètres ne sont pas renseignés dans le fichier digdash.properties. Dans la majorité des cas, ces éléments ont déjà été paramétrés par l'administrateur.
Intégration de pages de tableau de bord
Sur le même principe, vous pouvez intégrer une page ou toutes les pages d’un tableau de bord d’un rôle ou d’un utilisateur : ajoutez le paramètre page et spécifiez le nom de la page.
Les paramètres disponibles pour pages de tableau de bord sont les suivants :
| Paramètre | Valeur | Description |
|---|---|---|
page | pageId | Identifiant de la page que l'utilisateur souhaite afficher par défaut à la place de la première page. Cet identifiant est visible dans l'Éditeur de tableau de bord dans le menu contextuel de la page (affiché via un clic droit sur le titre de l'onglet de la page). Deux identifiants sont affichés, l'un est unique et non modifiable (uid), l'autre est "calculé" en fonction du nom du rôle et de la page (ces 2 éléments étant modifiables, l'identifiant peut donc changer et le paramètre ne plus être efficace). |
| user | user | Utilisateur à authentifier |
| pass | password | Mot de passe pour l’utilisateur non authentifié |
| authToken | token | Token pour l’utilisateur non authentifié |
| server | server URL | URL du domaine DigDash Enterprise (par exemple : http://localhost:8080) |
| domain | domainname | Nom du domaine DigDash Enterprise (par exemple : ddenterpriseapi) |
| hideBanner | true|false | Masque (true) ou affiche (false) la barre de titre |
| hideFilters | true|false | Masque (true) ou affiche (false) la barre de filtres |
| nomVariable | valeurVariable | Spécifie la valeur de la variable nomVariable |
nomDimension Si la dimension contient une hiérarchie ou plus, vous pouvez sélectionner la hiérarchie et le niveau souhaités en ajoutant :
| valeurFiltre aaaa NomHierarchie | Spécifie le membre de la dimension filtré zzzzzzz Spécifie le nom de la hiérarchie |