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