Modifié par Aurelie Bertrand le 2026/06/22 14:22
Afficher les derniers auteurs
1 {{ddtoc/}}
2
3 ----
4
5 Dans cette documentation, nous nous plaçons dans le contexte suivant :
6
7 * Nom du serveur : ddsrv
8 * Port : 8080
9 * Domaine DigDash : ddenterpriseapi
10 * Domaine tableau de bord DigDash: digdash_dashboard
11
12 Il faudra bien sûr adapter l'intégration à votre contexte.
13
14 (% class="box warningmessage" %)
15 (((
16 ⚠ **Rapport HTML**
17
18 Pour le bon affichage des icônes contenues dans les rapports HTML, celles-ci doivent être spécifiées via des mots clés et non pas des url. Consultez la page [[Rapport HTML>>doc:Digdash.user_guide.studio.Create_flow.Flow_types_and_configuration.Flow_type_table.HTML_report.WebHome]] pour plus de détails.
19 )))
20
21 = Mode d’intégration par iFrame =
22
23 Vous pouvez intégrer un tableau de bord (avec une ou plusieurs pages) dans une iframe en utilisant l'URL sous la forme suivante :
24
25 {{code language="html"}}
26 http://ddsrv:8080/digdash_dashboard/index.jsp
27 {{/code}}
28
29 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é.
30 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// ?//.
31 Chaque paramètre est une paire //clé=valeur//, et les différentes paires sont séparées par un //&//.
32 Consultez le paragraphe [[Paramètres disponibles>>doc:||anchor="Paramètres"]] pour la liste complète des paramètres.
33
34 Par exemple, pour afficher le tableau de bord avec :
35
36 * le nom d'utilisateur "user1" et le mot de passe "pass1",
37 * la bannière masquée,
38 * la barre de filtres masquée,
39 * la variable //var //égale à 1,
40
41 nous intégrons le code dans une balise iFrame comme suit :
42
43 {{code}}
44 <iframe src="http://ddsrv:8080/digdash_dashboard/index.jsp?user=user1&pass=pass1&hideBanner=true&hideFilters=true&var=1"></iframe>
45 {{/code}}
46
47 = Mode d’intégration JavaScript embarqué =
48
49 (% class="wikigeneratedid" id="HChargerlefichierJavascriptDigdash" %)
50 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 :
51
52 {{code}}
53 <script src="http://ddsrv:8080/digdash_dashboard/digdash.dashboard.js"></script>
54 {{/code}}
55
56 (% class="wikigeneratedid" %)
57 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.
58
59 == Intégration HTML ==
60
61 Une balise personnalisée <dd-dashboard /> permet d’intégrer un tableau de bord directement dans le code HTML, sans écrire de JavaScript.
62
63 Pour intégrer le tableau de bord, utilisez le code sous la forme suivante à l'emplacement souhaité sur la page web :
64
65 {{code language="html"}}
66 <dd-dashboard url="http://ddsrv:8080/digdash_dashboard"/>
67 {{/code}}
68
69 Dans ce mode, les [[paramètres>>doc:||anchor="Paramètres"]] sont passés directement comme attributs de la balise.
70 Par exemple, pour afficher le tableau de bord :
71
72 * sur la page "Synthèse" par défaut,
73 * filtré sur l'année 2025 (hiérarchie Date),
74 * avec le nom d'utilisateur "user1" et le mot de passe "pass1",
75
76 nous utilisons le code suivant :
77
78 {{code language="html"}}
79 <dd-dashboard url="https://ddsrv:8080/digdash_dashboard/" defaultPage="Synthèse" Date="2025" HDate="Date" LDate="Année" user="user1" pass="pass1"/>
80 {{/code}}
81
82 == Intégration JavaScript ==
83
84 Pour intégrer un tableau de bord en mode JavaScript :
85
86 1. 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.
87 Par exemple :
88
89 {{code}}
90 <div id="mydashboard"></div> // où mydashboard est l'identifiant
91 {{/code}}
92
93 (% start="2" %)
94 1. Ajoutez le script JavaScript pour initialiser et afficher le tableau de bord.
95 Pour cela, dans une balise <script>, ajoutez le code suivant :
96
97 {{code language="js"}}
98 DigDash.init({"url":"http://ddsrv:8080/digdash_dashboard"});
99 DigDash.drawDashboard("mydashboard");
100 {{/code}}
101
102 * La méthode** DigDash.init()** permet d'initialiser le tableau de bord en spécifiant l'URL du serveur DigDash et les [[paramètres >>doc:||anchor="Paramètres"]]souhaités.
103 * La méthode **DigDash.drawDashboard()** permet d'afficher le tableau de bord dans le conteneur défini précédemment.
104
105 (% class="box infomessage" %)
106 (((
107 💡 N’oubliez pas d’appeler la fonction draw() dans le body :
108
109 {{code language="html"}}
110 <body onload="draw()">
111 {{/code}}
112 )))
113
114 Par exemple, pour afficher le tableau de bord:
115
116 * sur la page "Synthèse" par défaut,
117 * filtré sur l'année 2025 (hiérarchie Date),
118 * avec le nom d'utilisateur "user1" et le mot de passe "pass1",
119
120 nous utilisons le script suivant :
121
122 {{code language="html"}}
123 <script>
124 function draw(){
125 DigDash.init({
126 "url": "http//ddsrv:8080/digdash_dashboard",
127 "defaultPage": "Telecom_Accueil", // page affichée par défaut
128 "Date": "2025", // filtre sur la dimension Date
129 "Hdate": "Date", // hiérarchie utilisée
130 "LDate": "Année", // niveau dans la hiérarchie
131 "user": "user1", // identifiant
132 "pass": "pass1" // mot de passe
133 });
134 DigDash.drawDashboard("dashboard");
135 }
136 </script>
137 {{/code}}
138
139 = Paramètres disponibles{{id name="Paramètres"/}} =
140
141 (% class="box" %)
142 (((
143 💡** **Vous pouvez aussi utiliser un mécanisme d'authentification server-side pour éviter les paramètres user/pass. Consultez la page [[Anonymisation des Urls>>doc:Digdash.webIntegration.anonymisation_url.WebHome]] pour plus de détails.
144 Dans ce cas le paramètre //authToken// remplace le paramètre //pass//.
145 )))
146
147 Les paramètres disponibles pour les tableaux de bord sont les suivants :
148
149 |=(% style="background-color: grey;" %)(% style="color:#ffffff" %)Paramètre|=(% style="background-color: grey;" %)(% style="color:#ffffff" %)Valeur|=(% style="background-color: grey;" %)(% style="color:#ffffff" %)Description
150 |user|user|Utilisateur à authentifier
151 |pass|password|Mot de passe pour l’utilisateur non authentifié
152 |authToken|token|Token pour l’utilisateur non authentifié
153 |server*|server URL|URL du domaine DigDash Enterprise (par exemple : http:~/~/localhost:8080)
154 |domain*|domainname|Nom du domaine DigDash Enterprise (par exemple : ddenterpriseapi)
155 |(((
156 defaultPage
157 )))|pageId|(((
158 Identifiant de la page que l'utilisateur souhaite afficher par défaut à la place de la première page.
159
160 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).
161 Les 2 identifiants sont utilisables par l'utilisateur pour ce paramètre.
162 )))
163 |hideBanner|true~|false|Masque (true) ou affiche (false) la barre de titre
164 |hideFilters|true~|false|Masque (true) ou affiche (false) la barre de filtres
165 |navigationMode|tabs~|vertical~|nomenu|(((
166 Spécifie le mode du menu de navigation :
167
168 * Onglets (tabs)
169 * Vertical (vertical)
170 * Pas de menu (nomenu)
171
172 Ce paramètre est prioritaire sur tous les autres paramètres de menu de navigation et s'applique également au mode mobile.
173 )))
174 |hideNavigationMenu|true~|false|(((
175 //Paramètre déprécié//
176
177 Si la valeur est définie à //true, a//ffiche le menu de navigation en mode Onglets lorsque le menu est en mode Vertical.
178 La valeur définie à //false// n'entraîne pas de modification.
179 )))
180 |(((
181 useHistory
182 )))|true~|false|Désactive (false) l'historique de navigation. Le menu de navigation dans l'historique en haut à droite n'est plus visible.
183 |nomVariable|valeurVariable|Spécifie la valeur de la variable nomVariable
184 |(((
185 nomDimension
186
187 Si la dimension contient une hiérarchie ou plus, vous pouvez sélectionner la hiérarchie et le niveau souhaités en ajoutant :
188
189 * **H**DimensionName
190 * **L**DimensionName
191 )))|(((
192 valeurFiltre
193
194
195 (% style="color:#ffffff" %)aaaa
196
197 NomHierarchie
198 NiveauHierarchie
199 )))|(((
200 Spécifie le membre de la dimension filtré
201
202 (% style="color:#ffffff" %) zzzzzzz
203
204
205 Spécifie le nom de la hiérarchie
206 Spécifie le niveau de la hiérarchie
207 )))
208
209 *// 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.//
210
211 = Intégration de pages de tableau de bord =
212
213 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.
214
215 Les paramètres disponibles pour pages de tableau de bord sont les suivants :
216
217 |=(% style="width: 390px; background-color: grey;" %)(% style="color:#ffffff" %)Paramètre|=(% style="width: 138px; background-color: grey;" %)(% style="color:#ffffff" %)Valeur|=(% style="width: 964px; background-color: grey;" %)(% style="color:#ffffff" %)Description
218 |(% style="width:390px" %)(((
219 page
220 )))|(% style="width:138px" %)(((
221 pageId
222 )))|(% style="width:964px" %)(((
223 Identifiant de la page que l'utilisateur souhaite afficher par défaut à la place de la première page.
224
225 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).
226 Les 2 identifiants sont utilisables par l'utilisateur pour ce paramètre.
227 )))
228 |(% style="width:390px" %)user|(% style="width:138px" %)user|(% style="width:964px" %)Utilisateur à authentifier
229 |(% style="width:390px" %)pass|(% style="width:138px" %)password|(% style="width:964px" %)Mot de passe pour l’utilisateur non authentifié
230 |(% style="width:390px" %)authToken|(% style="width:138px" %)token|(% style="width:964px" %)Token pour l’utilisateur non authentifié
231 |(% style="width:390px" %)server|(% style="width:138px" %)server URL|(% style="width:964px" %)URL du domaine DigDash Enterprise (par exemple : http:~/~/localhost:8080)
232 |(% style="width:390px" %)domain|(% style="width:138px" %)domainname|(% style="width:964px" %)Nom du domaine DigDash Enterprise (par exemple : ddenterpriseapi)
233 |(% style="width:390px" %)hideBanner|(% style="width:138px" %)true~|false|(% style="width:964px" %)Masque (true) ou affiche (false) la barre de titre
234 |(% style="width:390px" %)hideFilters|(% style="width:138px" %)true~|false|(% style="width:964px" %)Masque (true) ou affiche (false) la barre de filtres
235 |(% style="width:390px" %)nomVariable|(% style="width:138px" %)valeurVariable|(% style="width:964px" %)Spécifie la valeur de la variable nomVariable
236 |(% style="width:390px" %)(((
237 nomDimension
238
239 Si la dimension contient une hiérarchie ou plus, vous pouvez sélectionner la hiérarchie et le niveau souhaités en ajoutant :
240
241 * **H**DimensionName
242 * **L**DimensionName
243 )))|(% style="width:138px" %)(((
244 valeurFiltre
245
246
247 (% style="color:#ffffff" %)aaaa
248
249 NomHierarchie
250 NiveauHierarchie
251 )))|(% style="width:964px" %)(((
252 Spécifie le membre de la dimension filtré
253
254 (% style="color:#ffffff" %) zzzzzzz
255
256
257 Spécifie le nom de la hiérarchie
258 Spécifie le niveau de la hiérarchie
259 )))
260
261 = Pages connexes... =
262
263 * [[Intégrer un graphique (ou autre portlet) dans une page web>>doc:Digdash.webIntegration.DD_web_integration.embed_portlet.WebHome]]
264 * [[Intégration web de tableaux de bord et d'objets DigDash>>doc:Digdash.webIntegration.DD_web_integration.WebHome]]