Last modified by Aurelie Bertrand on 2026/06/19 17:08
Show last authors
1 {{ddtoc/}}
2
3 ----
4
5 In this documentation, we are working within the following context:
6
7 * Server name: ddsrv
8 * Port: 8080
9 * DigDash domain: ddenterpriseapi
10 * DigDash dashboard domain: digdash_dashboard
11
12 You will, of course, need to adapt the integration to your own environment.
13
14 (% class="box warningmessage" %)
15 (((
16 ⚠**HTML report**
17
18 To ensure that the icons in HTML reports are displayed correctly, they must be specified using keywords rather than URLs. See the page [[HTML Report>>doc:Digdash.user_guide.studio.Create_flow.Flow_types_and_configuration.Flow_type_table.HTML_report.WebHome]] for further details.
19 )))
20
21 = iFrame integration method =
22
23 You can embed a dashboard (with one or more pages) in an iframe using a URL in the following format:
24
25 {{code language="html"}}
26 http://ddsrv:8080/digdash_dashboard/index.jsp
27 {{/code}}
28
29 It is possible to pass parameters in this URL, which will be read by the application to authenticate and customise the content displayed.
30 These parameters are added as a query string at the end of the URL, after a question mark//(?)//.
31 Each parameter is a //key=value// pair, and the different pairs are separated by an //ampersand (&//).
32 See the section [[Available parameters>>doc:||anchor="Paramètres"]] for a full list of parameters.
33
34 For example, to display the dashboard with:
35
36 * the username "user1" and the password "pass1",
37 * the banner hidden,
38 * the filter bar hidden,
39 * the variable //var set //to 1,
40
41 we embed the code in an iFrame tag as follows:
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 = Embedded JavaScript integration mode =
48
49 (% class="wikigeneratedid" id="HChargerlefichierJavascriptDigdash" %)
50 This method requires you to load the JavaScript file that enables a DigDash dashboard to be displayed on a web page. To do this, add the following line of code to the //<head>// section of your web page:
51
52 {{code}}
53 <script src="http://ddsrv:8080/digdash_dashboard/digdash.dashboard.js">
54 {{/code}}
55
56 (% class="wikigeneratedid" %)
57 You can embed a DigDash dashboard either in HTML using dedicated tags, or via JavaScript for a more dynamic configuration.
58
59 == HTML integration ==
60
61 A custom <dd-dashboard /> tag allows you to embed a dashboard directly into the HTML code, without writing any JavaScript.
62
63 To embed the dashboard, use the code in the following format at the desired location on the web page:
64
65 {{code language="html"}}
66 <dd-dashboard url="http://ddsrv:8080/digdash_dashboard"/>
67 {{/code}}
68
69 In this mode, the [[parameters>>doc:||anchor="Paramètres"]] are passed directly as attributes of the tag.
70 For example, to display the dashboard:
71
72 * on the default “Overview” page,
73 * filtered by the year 2025 (Date hierarchy),
74 * with the username “user1” and the password “pass1”,
75
76 we use the following code:
77
78 {{code language="html"}}
79 <dd-dashboard url="https://ddsrv:8080/digdash_dashboard/" defaultPage="Synthesis" Date="2025" HDate="Date" LDate="Year" user="user1" pass="pass1"/>
80 {{/code}}
81
82 == JavaScript integration ==
83
84 To integrate a dashboard using JavaScript:
85
86 1. Add a**<div>** tag with a unique identifier at the desired location on the web page: this tag will act as a container for displaying the DigDash dashboard.
87 For example:
88
89 {{code}}
90 <div id="mydashboard"></div> // mydashboard is the identifier
91 {{/code}}
92
93 (% start="2" %)
94 1. Add the JavaScript script to initialise and display the dashboard.
95 To do this, within a <script> tag, add the following code:
96
97 {{code language="js"}}
98 DigDash.init({"url":"http://ddsrv:8080/digdash_dashboard"});
99 DigDash.drawDashboard("mydashboard");
100 {{/code}}
101
102 * The**DigDash.init()** method allows you to initialise the dashboard by specifying the DigDash server URL and the [[parameters >>doc:||anchor="Paramètres"]].
103 * The **DigDash.drawDashboard() **method displays the dashboard within the container defined previously.
104
105 (% class="box infomessage" %)
106 (((
107 💡 Don’t forget to call the draw() function in the body:
108
109 {{code language="html"}}
110 <body onload="draw()">
111 {{/code}}
112 )))
113
114 For example, to display the dashboard:
115
116 * on the default “Overview” page,
117 * filtered by the year 2025 (Date hierarchy),
118 * with the username “user1” and the password “pass1”,
119
120 we use the following script:
121
122 {{code language="html"}}
123 <script>
124 function draw(){
125 DigDash.init({
126 "url": "http//ddsrv:8080/digdash_dashboard",
127 "defaultPage": "Telecom_homepage", // page displayed by default
128 "Date": "2025", // filter on Date dimension
129 "Hdate": "Date", // used hierarchy
130 "LDate": "Year", // level in the hierarchy
131 "user": "user1", // identifier
132 "pass": "pass1" // password
133 });
134 DigDash.drawDashboard("dashboard");
135 }
136
137 {{/code}}
138
139 = Available parameters{{id name="Paramètres"/}} =
140
141 (% class="box" %)
142 (((
143 💡** **You** **can also use a server-side authentication mechanism to avoid using the user/pass parameters. See the page [[URL anonymisation>>doc:Digdash.webIntegration.anonymisation_url.WebHome]] for further details.
144 In this case, the//authToken// parameter replaces the //pass// parameter.
145 )))
146
147 The parameters available for dashboards are as follows:
148
149 |=(% style="background-color: grey;" %)(% style="color:#ffffff" %)Parameter|=(% style="background-color: grey;" %)(% style="color:#ffffff" %)Value|=(% style="background-color: grey;" %)(% style="color:#ffffff" %)Description
150 |user|user|User to be authenticated
151 |pass|password|Password for the unauthenticated user
152 |authToken|token|Token for the unauthenticated user
153 |server*|server URL|DigDash Enterprise domain URL (for example: http:~/~/localhost:8080)
154 |domain*|domainname|DigDash Enterprise domain name (e.g. ddenterpriseapi)
155 |(((
156 defaultPage
157 )))|pageId|(((
158 The ID of the page the user wishes to display by default instead of the first page.
159
160 This ID is visible in the Dashboard Editor in the page’s context menu (displayed by right-clicking on the page tab title). Two identifiers are displayed: one is unique and cannot be modified (uid), whilst the other is ‘calculated’ based on the role name and the page name (as both of these elements can be modified, the identifier may change and the parameter may no longer be effective).
161 Both identifiers can be used by the user for this setting.
162 )))
163 |hideBanner|true~|false|Hides (true) or displays (false) the title bar
164 |hideFilters|true~|false|Hides (true) or displays (false) the filter bar
165 |navigationMode|tabs~|vertical~|nomenu|(((
166 Specifies the navigation menu mode:
167
168 * Tabs
169 * Vertical (vertical)
170 * No menu (nomenu)
171
172 This setting takes precedence over all other navigation menu settings and also applies to mobile mode.
173 )))
174 |hideNavigationMenu|true~|false|(((
175 //Deprecated setting//
176
177 If set to //true, //displays// //the navigation menu in Tab mode when the menu is in Vertical mode.
178 Setting this to //false//has no effect.
179 )))
180 |(((
181 useHistory
182 )))|true~|false|Disables (false) the navigation history. The navigation menu in the history at the top right is no longer visible.
183 |variableName|variableValue|Specifies the value of the variable variableName
184 |(((
185 dimensionName
186
187 If the dimension contains one or more hierarchies, you can select the desired hierarchy and level by adding:
188
189 * **HD**imensionName
190 * **LD**imensionName
191 )))|(((
192 filterValue
193
194
195 (% style="color:#ffffff" %)yyyy
196
197 Hierarchy Name Hierarchy Level
198 )))|(((
199 Specifies the filtered dimension member
200
201 (% style="color:#ffffff" %)zzzzzzz
202
203
204 Specifies the name of the hierarchy
205 Specifies the hierarchy level
206 )))
207
208 *//Parameters that can be entered in the login box in advanced mode when these parameters are not specified in the digdash.properties file. In most cases, these settings have already been configured by the administrator.//
209
210 = Integrating dashboard pages =
211
212 Similarly, you can embed a single page or all pages from a dashboard associated with a role or user: add the //**‘page’**// parameter and specify the page name.
213
214 The parameters available for dashboard pages are as follows:
215
216 |=(% style="width: 390px; background-color: grey;" %)(% style="color:#ffffff" %)Parameter|=(% style="width: 138px; background-color: grey;" %)(% style="color:#ffffff" %)Value|=(% style="width: 964px; background-color: grey;" %)(% style="color:#ffffff" %)Description
217 |(% style="width:390px" %)(((
218 page
219 )))|(% style="width:138px" %)(((
220 pageId
221 )))|(% style="width:964px" %)(((
222 The ID of the page that the user wishes to display by default instead of the first page.
223
224 This ID is visible in the Dashboard Editor in the page’s context menu (displayed by right-clicking on the page tab title). Two identifiers are displayed: one is unique and cannot be modified (uid), whilst the other is ‘calculated’ based on the role name and the page (as both of these elements can be modified, the identifier may change and the setting may no longer be effective).
225 Both identifiers can be used by the user for this parameter.
226 )))
227 |(% style="width:390px" %)user|(% style="width:138px" %)user|(% style="width:964px" %)User to be authenticated
228 |(% style="width:390px" %)pass|(% style="width:138px" %)password|(% style="width:964px" %)Password for the unauthenticated user
229 |(% style="width:390px" %)authToken|(% style="width:138px" %)token|(% style="width:964px" %)Token for the unauthenticated user
230 |(% style="width:390px" %)server|(% style="width:138px" %)server URL|(% style="width:964px" %)DigDash Enterprise domain URL (e.g. http:~/~/localhost:8080)
231 |(% style="width:390px" %)domain|(% style="width:138px" %)domainname|(% style="width:964px" %)DigDash Enterprise domain name (e.g. ddenterpriseapi)
232 |(% style="width:390px" %)hideBanner|(% style="width:138px" %)true~|false|(% style="width:964px" %)Hides (true) or displays (false) the title bar
233 |(% style="width:390px" %)hideFilters|(% style="width:138px" %)true~|false|(% style="width:964px" %)Hides (true) or displays (false) the filter bar
234 |(% style="width:390px" %)variableName|(% style="width:138px" %)variableValue|(% style="width:964px" %)Specifies the value of the variable variableName
235 |(% style="width:390px" %)(((
236 dimensionName
237
238 If the dimension contains one or more hierarchies, you can select the desired hierarchy and level by adding:
239
240 * **HD**imensionName
241 * **LD**imensionName
242 )))|(% style="width:138px" %)(((
243 filterValue
244
245 (% style="color:#ffffff" %)yyyy
246
247
248 Hierarchy Name Hierarchy Level
249 )))|(% style="width:964px" %)(((
250 Specifies the filtered dimension member
251
252 (% style="color:#ffffff" %)zzzzzzz
253
254
255 Specifies the name of the hierarchy
256 Specifies the level of the hierarchy
257 )))
258
259 = Related pages... =
260
261 * [[Embedding a chart (or other portlet) in a web page>>doc:Digdash.webIntegration.DD_web_integration.embed_portlet.WebHome]]
262 * [[Web integration of dashboards and DigDash objects>>doc:Digdash.webIntegration.DD_web_integration.WebHome]]