Last modified by Aurelie Bertrand on 2025/05/15 16:28
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 |hideNavigationMenu|true~|false|Active (true) ou désactive (false) le menu de navigation (Vertical ou Onglets).
159 |(((
160 useHistory
161 )))|true~|false|Désactive (false) l'historique de navigation. Le menu de navigation dans l'historique en haut à droite n'est plus visible.
162 |nomVariable|valeurVariable|Spécifie la valeur de la variable nomVariable
163 |(((
164 nomDimension
165
166 Si la dimension contient une hiérarchie ou plus, vous pouvez sélectionner la hiérarchie et le niveau souhaités en ajoutant :
167
168 * **H**DimensionName
169 * **L**DimensionName
170 )))|(((
171 valeurFiltre
172
173
174 (% style="color:#ffffff" %)aaaa
175
176 NomHierarchie
177 NiveauHierarchie
178 )))|(((
179 Spécifie le membre de la dimension filtré
180
181 (% style="color:#ffffff" %) zzzzzzz
182
183
184 Spécifie le nom de la hiérarchie
185 Spécifie le niveau de la hiérarchie
186 )))
187
188 *// 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.//
189
190 = Intégration de pages de tableau de bord =
191
192 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.
193
194 Les paramètres disponibles pour pages de tableau de bord sont les suivants :
195
196 |=(% 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
197 |(% style="width:390px" %)(((
198 page
199 )))|(% style="width:138px" %)(((
200 pageId
201 )))|(% style="width:964px" %)(((
202 Identifiant de la page que l'utilisateur souhaite afficher par défaut à la place de la première page.
203
204 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).
205 Les 2 identifiants sont utilisables par l'utilisateur pour ce paramètre.
206 )))
207 |(% style="width:390px" %)user|(% style="width:138px" %)user|(% style="width:964px" %)Utilisateur à authentifier
208 |(% style="width:390px" %)pass|(% style="width:138px" %)password|(% style="width:964px" %)Mot de passe pour l’utilisateur non authentifié
209 |(% style="width:390px" %)authToken|(% style="width:138px" %)token|(% style="width:964px" %)Token pour l’utilisateur non authentifié
210 |(% style="width:390px" %)server|(% style="width:138px" %)server URL|(% style="width:964px" %)URL du domaine DigDash Enterprise (par exemple : http:~/~/localhost:8080)
211 |(% style="width:390px" %)domain|(% style="width:138px" %)domainname|(% style="width:964px" %)Nom du domaine DigDash Enterprise (par exemple : ddenterpriseapi)
212 |(% style="width:390px" %)hideBanner|(% style="width:138px" %)true~|false|(% style="width:964px" %)Masque (true) ou affiche (false) la barre de titre
213 |(% style="width:390px" %)hideFilters|(% style="width:138px" %)true~|false|(% style="width:964px" %)Masque (true) ou affiche (false) la barre de filtres
214 |(% style="width:390px" %)nomVariable|(% style="width:138px" %)valeurVariable|(% style="width:964px" %)Spécifie la valeur de la variable nomVariable
215 |(% style="width:390px" %)(((
216 nomDimension
217
218 Si la dimension contient une hiérarchie ou plus, vous pouvez sélectionner la hiérarchie et le niveau souhaités en ajoutant :
219
220 * **H**DimensionName
221 * **L**DimensionName
222 )))|(% style="width:138px" %)(((
223 valeurFiltre
224
225
226 (% style="color:#ffffff" %)aaaa
227
228 NomHierarchie
229 NiveauHierarchie
230 )))|(% style="width:964px" %)(((
231 Spécifie le membre de la dimension filtré
232
233 (% style="color:#ffffff" %) zzzzzzz
234
235
236 Spécifie le nom de la hiérarchie
237 Spécifie le niveau de la hiérarchie
238 )))
239
240 = Pages connexes... =
241
242 * [[Intégrer un graphique (ou autre portlet) dans une page web>>doc:Digdash.webIntegration.DD_web_integration.embed_portlet.WebHome]]
243 * [[Intégration web de tableaux de bord et d'objets DigDash>>doc:Digdash.webIntegration.DD_web_integration.WebHome]]