Last modified by jhurst on 2021/04/21 10:01
Show last authors
1 {{ddtoc/}}
2
3 This document provides additional technical information to assist with advanced customization of DigDash Enterprise.
4
5 DigDash Enterprise can be further customized by modifying or using the following:
6
7 Customizable elements visualizations:
8
9 * Additional cartographic module
10
11 Customizable Dashboard Elements:
12
13 * Javascript functions (Dashboard API)
14
15 Appendices:
16
17 (% class="box" %)
18 (((
19 Example : Support for swiping left and right to change the Dashboard page (Touch pads)
20 )))
21
22 = Customizable elements Visualizations =
23
24 == Additional cartographic module ==
25
26 To add additional maps, consult the documentation [[**mapguide**>>doc:Digdash.others_documents.guide_map.WebHome]]
27
28 = Customizable Dashboard Elements =
29
30 == Javascript functions (Dashboard API) ==
31
32 There are two ways to add custom behaviors to dashboards. The first is to use the global Javascript editor available in the dashboard editor. The second is the Text Editor portlet. This element allows you to add a block of text (and / or HTML) to a dashboard page. The possibilities are extended thanks to a programming interface (API) allowing to add Javascript calls of dashboard functions to hyperlinks in a text editor.
33
34 Thanks to these functions, you can order a page change, filtering on a given dimension, change a DigDash variable, etc.
35
36 Each function is called on an implicit **ddCtrl** object defined by the dashboard engine. Here is the list of functions:
37
38 //Unless otherwise specified, parameter values ​​are object IDs, not formatted and / or translated names. For other parameters that are not IDs, their type is specified by a lowercase letter prefixing their name: ' b 'for boolean,' o 'for object,' l 'for list (array) and' i 'for integer (integer).//
39
40 //A parameter in square brackets [] is optional and may be omitted if it is not necessary in the context.//
41
42 __Variable functions (DDVariables)__
43
44 **void ddCtrl.changeVariable (name, value)**
45
46 Description: Change the value of the variable <name>.
47
48 (% class="box" %)
49 (((
50 Example : <a href = "javascript:__ddCtrl.changeVariable__('ratioEuro', 1.30) "> EuroDollar: 1.30 </a>
51 )))
52
53 **(Number) ddCtrl.getDDVar (name)**
54
55 Description: Returns the value of the variable <name>.
56
57 (% class="box" %)
58 (((
59 Example : <a href = "javascript: ddCtrl.changeVariable ('ratioEuro', __ddCtrl.getDDVar__('ratioEuro') + 0.1) "> Increase EuroDollar </a>
60 )))
61
62 __Data filtering and navigation functions__
63
64 **FilterOperand (dimension, member, hierarchy, level, formatted member, bAddFilter, bExcludedFilter)**
65
66 Description: Object used to specify the filter to apply.
67
68 (% class="box" %)
69 (((
70 Example : <a href=" [[javascript:>>path:javascript:ddCtrl.filter('Dim]] ddCtrl.filter('Dim Géo', new FilterOperand('Dim Géo','France','Géo','Pays', false, false))"> Filter France </ a >
71 )))
72
73 (% class="box infomessage" %)
74 (((
75 //Note: The boolean bAdd Filter is set to true to add the filter to the filter already existing on this dimension. The boolean bExcluFiltre with the value true makes it possible to activate the mode exclusion of the filter (instead of filter on the member, that filters on all the other members except that specified).//
76 )))
77
78 **FilterOperandContinuous (dimension, min, max, bExcluFiltre)**
79
80 Description: Object used to specify the interval type filter to apply on a continuous dimension.
81
82 (% class="box" %)
83 (((
84 Example : <a href = " [[javascript:>>path:javascript:ddCtrl.filter('Dim]] ddCtrl.filter ('Date', new FilterOperandContinuous ('Date', new Date (2018, 0, 1) .getTime () / 1000, new Date (2019, 0, 1). getTime () / 1000, false)) "> 2018 Year Filter </a>
85 )))
86
87 (% class="box infomessage" %)
88 (((
89 //Note: The boolean bExcluFiltre at the value true allows activating the exclusion mode of the filter (instead of filtering on the member, this filters on all the other members except the one specified).//
90 )))
91
92 **void ddCtrl.filter (dimension, member)**
93
94 Description: filter on one dimension.
95
96 (% class="box" %)
97 (((
98 Example : <a href = "javascript:__ddCtrl.filter__('Country', 'France') "> Filter France </a>
99 )))
100
101 (% class="box infomessage" %)
102 (((
103 //Note: The specified member filters on the hierarchy and the current level for this dimension.//
104 )))
105
106 **void ddCtrl.filter (oFilterOperand)**
107
108 Description: filter on a dimension by specifying a hierarchy and a level.
109
110 (% class="box" %)
111 (((
112 Example : <a href = " **javascript:__ddCtrl.filter__(new FilterOperand (** 'Location', 'FR', 'Geographic', 'Country')) "> Details France </a>
113 )))
114
115
116 //Location// is the dimension, //FR// is the ID of the selected member, //Geographic// is the hierarchy and //Country// is level.
117
118 **void ddCtrl.filterAndChangePage (page, dimension, member)**
119
120 Description: filter on one dimension and change page.
121
122 (% class="box" %)
123 (((
124 Example : <a href = "javascript:__ddCtrl.filterAndChangePage__('Production.Details Country', 'Country', 'France') "> France details </a>
125 )))
126
127 **void ddCtrl.setFilterMinMax (dimension, min, max)**
128
129 Description: filter on a continuous dimension by specifying a min value and a max value. Note: a DigDash date is a timestamp in seconds.
130
131 (% class="box" %)
132 (((
133 Example: <a href = "javascript:__ddCtrl.setFilterMinMax__('Date', new Date (2014, 0, 1) .getTime () / 1000, new Date (). GetTime () / 1000 "> 2014 to date </a>
134 )))
135
136 **(Chain Table) ddCtrl.getDimensionFilter (dimension [, bContinue])**
137
138 Description: Returns the list of elements filtered on the dimension (continuous or discrete).
139
140 (% class="box" %)
141 (((
142 Example : <a href = "javascript: alert (__ddCtrl.getDimensionFilter__('Country')) "> Filters On Country </a>
143 )))
144
145 **void ddCtrl.isDimensionFiltered (dimension [, bContinue])**
146
147 Description: Returns true if the dimension (continuous or discrete) is filtered. Returns false otherwise.
148
149 (% class="box" %)
150 (((
151 Example : <a href = "javascript: alert (__ddCtrl.isDimensionFiltered__('Country')) "> Filtered Country? </a>
152 )))
153
154 **void ddCtrl.removeAllFilters ()**
155
156 Description: Removes all filters from the dashboard.
157
158 (% class="box" %)
159 (((
160 Example : <a href = " [[javascript:>>path:javascript:ddCtrl.removeAllFilters]][[(% class="wikiinternallink wikiinternallink wikiinternallink wikiinternallink wikiinternallink wikiinternallink" %)__ddCtrl.removeAllFilters__>>path:javascript:ddCtrl.removeAllFilters]](%%)() "> Reset </a>
161 )))
162
163 **void ddCtrl.removeAllFiltersCurrentPage ()**
164
165 Description: Removes filters from the current page.
166
167 (% class="box" %)
168 (((
169 Example : <a href = "javascript:__ddCtrl.removeAllFiltersCurrentPage__() "> Reset </a>
170 )))
171
172 **void ddCtrl.removeFilters (dimension [, bContinue])**
173
174 Description: Removes the current filters on the dimension (continuous or discrete).
175
176 (% class="box" %)
177 (((
178 Example: <a href = "javascript:__ddCtrl.removeFilters__('Country') "> All countries </a>
179 )))
180
181 **void ddCtrl.beginSelection ()**
182
183 **void ddCtrl.commitSelection ()**
184
185 Description: In conjunction with the ddCtrl.filter filter function. Allows you to combine several filters on different dimensions without performing each filter (optimization).
186
187 (% class="box" %)
188 (((
189 Example : <a href = "javascript:__ddCtrl.beginSelection__(); ddCtrl.filter ('Country', 'France'); ddCtrl.filter ('Year', '2013');__ddCtrl.commitSelection__() "> France in 2013 </a>
190 )))
191
192 **void ddCtrl.setDimensionNavigation (flow, dimension, bNavigation)**
193
194 Description: Changes the authorization to navigate on a dimension for the specified flow.
195
196 (% class="box" %)
197 (((
198 Example : <a href = "javascript:__ddCtrl.setDimensionNavigation__('chart1', 'Region', true) "> Activate navigation on Region </a>
199 )))
200
201 **(String array) ddCtrl.getCurrentDrill (portlet, dimension [, hierarchy])**
202
203 Description: Returns the dimension, hierarchy and explored level of a graph in the form of a table.
204
205 (% class="box infomessage" %)
206 (((
207 Note: The function can only be called on a graph having a "Navigate in hierarchy" or "Change dimension" interaction.
208 )))
209
210 Example:
211
212 (% class="box" %)
213 (((
214 ddCtrl.addChartRefreshListener ( function (doc, dm, dmsel, chart) {
215 if (chart.title == 'My chart' ) {
216 var curDrill = ddCtrl.getCurrentDrill (doc.frameId, 'Region' , 'Geographic' );
217 var dim = curDrill [ 0 ];
218 var yesterday = curDrill [ 1 ];
219 var lvl = curDrill [ 2 ];
220 alert ( "The exploration is" + hier + "/" + lvl + "on dimension" + dim);
221 }
222 });
223 )))
224
225 **(BreadPath) ddCtrl.getBreadPath (portlet, dimension)**
226
227 Description: Returns the current navigation path (BreadPath) on a dimension in a graph. This object can be used by drillTo (see below).
228
229 (% class="box" %)
230 (((
231 Example : <a href = "javascript:__ddCtrl.drillTo__(portletId2, 'Location', __ddCtrl.getBreadPath__(portletId1, 'Location')) "> Current Location Details (Chart 2) </a>
232 )))
233
234 **void ddCtrl.drillTo (portlet, dimension, oBreadPath)**
235
236 Description: Navigate in a graph on a hierarchy of the chosen dimension, using a navigation path defined by the BreadPath object.
237
238 (% class="box" %)
239 (((
240 Example: See example above (getBreadPath)
241 )))
242
243 **void ddCtrl.drillDown (portlet, dimension, hierarchy, member, formatted member)**
244
245 Description: Navigate on a hierarchy of the chosen dimension to the member specified at the lower level.
246
247 (% class="box infomessage" %)
248 (((
249 Note: The action is performed on all graphs sharing the same navigation interaction ("synchronized drill").
250 )))
251
252 (% class="box" %)
253 (((
254 Example : <a href = "javascript:__ddCtrl.drillTo__(portletId, 'Lieu', 'Géographique', 'FR', 'France') "> France details </a> 0
255 )))
256
257 **void ddCtrl.resetDrill (portlet, dimension [, hierarchy])**
258
259 Description: Resets navigation on the dimension hierarchy.
260
261 (% class="box infomessage" %)
262 (((
263 Note: The action is performed on all graphs sharing the same navigation interaction ("synchronized drill").
264 )))
265
266 (% class="box" %)
267 (((
268 Example : <a href = "javascript:__ddCtrl.resetDrill__(portletId, 'Lieu') "> Back to the world map </a>
269 )))
270
271 **(Number | String) ddCtrl.getDataModelDate (dmId, bFormat)**
272
273 Description: Returns the date of synchronization of a data cube. The parameters are the identifier of the data model and a boolean to format the date (true) or to have the corresponding timestamp (false).
274
275 Note: The timestamp is the number of milliseconds since January 1, 1970.
276
277 (% class="box" %)
278 (((
279 Example : <a href = "javascript: alert (__ddCtrl.getDataModelDate__('a1234567890 ..', true)) "> Display the date of the data </a>
280 )))
281
282 **(Number | String) ddCtrl.getFlowDate (stream, bFormat)**
283
284 Description: Returns the synchronization date of a stream. The parameters are the stream identifier and a boolean to format the date (true) or have the corresponding timestamp (false).
285
286 (% class="box infomessage" %)
287 (((
288 Note: The timestamp is the number of milliseconds since January 1, 1970.
289 )))
290
291 (% class="box" %)
292 (((
293 Example : <a href = "javascript: alert (__ddCtrl.getFlowDate__(fluxId, true)) "> Display the date of the flow </a>
294 )))
295
296 __Data request functions__
297
298 **(Number | String) ddCtrl.getResultCubeValue (flow, measure, lMembers, bFormatted)**
299
300 Description: Returns the measurement value for the specified axis members from a visible chart. Returns the value as a number or as a formatted string.
301
302 (% class="box infomessage" %)
303 (((
304 Note: The list of axis members must specify //__one and only one member for each axis used__//in the graph, and this in the natural order of the axes of the graph. The measure parameter is the measure ID.
305 )))
306
307 (% class="box" %)
308 (((
309 Example : To retrieve a value from a histogram defined as follows: Measure Margin on the stacking axis, dimension Year on the column axis and Country on the grouping axis:
310 <a href = "javascript: alert (__ddCtrl.getResultCubeValue__('chart1', 'Marge', ['2013', 'France'], true)) "> Show the margin for France in 2013 </a>
311 )))
312
313 (% class="box infomessage" %)
314 (((
315 Note: It is important to make sure that the chart is loaded before calling this function. The easiest way is to include the call of this function in a listener passed to addChartRefreshListener
316 )))
317
318 **(Row table) ddCtrl.getResultCubeRowSet (stream, oQueryMembersAxes [, bFormatted])**
319
320 Description: Returns the flattened rows of the result cube for the members of specified axes from a visible chart. Returns the result as an array of rows, each row being an array of cells. The cells are the dimensions / axes of the chart then the values ​​of the measures.
321
322 (% class="box infomessage" %)
323 (((
324 Note: The request for the axis members to search for is a Javascript object conforming to the following form (JSON): {"Axis / Dim title 1": "member 1", "Axis / Dim title 2": "member 2 ", etc.} ..
325 )))
326
327 (% class="box" %)
328 (((
329 Example : To retrieve the rows corresponding to the year 2014 and to the person 'John' from a cube resulting from a chart 'chart1':
330 <a href = "javascript: alert (__ddCtrl.getResultCubeRowSet__('chart1', {'Year': '2014', 'Person': 'John'}) [0] [2]) "> Show John's first value in 2014 </a>
331 )))
332
333 (% class="box infomessage" %)
334 (((
335 Note: It is important to make sure that the chart is loaded before calling this function. The easiest way is to include the call to this function in a listener passed to addChartRefreshListener.
336 )))
337
338 **(Number) ddCtrl.getResultCubeLinesCount (stream)**
339
340 Description: Returns the number of flattened rows in the result cube.
341
342 (% class="box" %)
343 (((
344 Example : <a href = "javascript: alert (__ddCtrl.getResultCubeLinesCount (__'chart1') "> Number of rows </a>
345 )))
346
347 __Dashboard functions__
348
349 **void ddCtrl.loadJS (urlJS)**
350
351 Description: Loads a Javascript file from a URL.
352
353 Example (in the Javascript editor):
354
355 (% class="box" %)
356 (((
357 __ddCtrl.loadJS__(' [[http:~~/~~/crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js>>url:http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js]] ');
358 var hash = CryptoJS.MD5 ("The message");
359 )))
360
361 **void ddCtrl.includeJS (nameJS)**
362
363 Description: Loads a Javascript file from the DigDash Enterprise configuration folder. The file must have been created beforehand with the Javascript editor of the dashboard editor.
364
365 Example (in the Javascript editor):
366
367 (% class="box" %)
368 (((
369 __ddCtrl.includeJS__('functions_date.js');
370 )))
371
372 **void ddCtrl.changePage (page)**
373
374 **void ddCtrl.switchPage (page)**
375
376 Description: Changes the current page to <page>.
377
378 (% class="box" %)
379 (((
380 Example : <a href = "javascript:__ddCtrl.changePage__('Général.Index') "> Back to index </a>
381 )))
382
383 **void ddCtrl.nextPage ()**
384
385 Description: Change to the next page (same role).
386
387 (% class="box" %)
388 (((
389 Example : <a href = "javascript:__ddCtrl.nextPage__() "> Next page </a>
390 )))
391
392 **void ddCtrl.prevPage ()**
393
394 Description: Change to the previous page (same role).
395
396 (% class="box" %)
397 (((
398 Example : <a href = "javascript:__ddCtrl.prevPage__() "> Previous page </a>
399 )))
400
401 **(Boolean) ddCtrl.isCurrentPage (page)**
402
403 Description: Returns true (true) if the current page is the identifier page specified in parameter. Returns false otherwise.
404
405 (% class="box infomessage" %)
406 (((
407 Note: This function replaces the deprecated function __ddCtrl.getCurrentPage__ ()
408 )))
409
410 **(String) ddCtrl.getCurrentPage ()**
411
412 Description: Returns the name of the current page in the following format: < //Role name>. <Page name>// .
413
414 **Deprecated** : This function is no longer supported since November 2014 due to a change in format of the page names. Please use the function__ddCtrl.isCurrentPage__ (page) instead.
415
416 **(Boolean) canChangeCurrentPage (page)**
417
418 Description: Returns true if it is possible to change to the <page> page. Returns false otherwise.
419
420 **void ddCtrl.hidePage (page)**
421
422 Description: Hides the tab of the page <page> if it is visible, without changing the current page.
423
424 (% class="box" %)
425 (((
426 Example : <a href = "javascript:__ddCtrl.hidePage__('Production.Country Details'); __ddCtrl.changePage__('Production.Global') "> Leave details </a>
427 )))
428
429 **void ddCtrl.showPage (page)**
430
431 Description: Displays the tab of the page <page> if it is hidden, without changing the current page.
432
433 (% class="box" %)
434 (((
435 Example : <a href = "javascript:__ddCtrl.showPage__('Production.Country Details'); __ddCtrl.changePage__('Production.Details Country') "> Show details </a>
436 )))
437
438 **void ddCtrl.openFlowInWindow (stream, iWidth, iHeight)**
439
440 Description: Opens a stream in a popup window of given width and height.
441
442 (% class="box" %)
443 (((
444 Example : <a href = "javascript:__ddCtrl.openFlowInWindow__(fluxId, 250, 200) "> View product breakdown </a>
445 )))
446
447 **void ddCtrl.openPortletInWindow (portlet, iWidth, iHeight)**
448
449 Description: Opens a portlet in a popup window of given width and height.
450
451 (% class="box" %)
452 (((
453 Example : <a href = "javascript:__ddCtrl.openPorletInWindow__(portletId, 250, 200) "> Show product breakdown </a>
454 )))
455
456 **void ddCtrl.openFlowInWindowWithFilter (stream, iWidth, iHeight, dimension, member [, dimension, member, ...])**
457
458 Description: Opens a stream in a popup window of given width and height and filters it on the dimension (s) and members specified in parameter (list of dimension / member pairs).
459
460 (% class="box infomessage" %)
461 (((
462 Note: Filters will only be applied on the new window.
463 )))
464
465 (% class="box" %)
466 (((
467 Example : <a href = "javascript:__ddCtrl.openFlowInWindowWithFilter__(fluxId, 250, 200, 'Year', '2014', 'Country', 'France') "> Show details France 2014 </a>
468 )))
469
470 **void ddCtrl.openPortletInWindowWithFilter (portlet, iWidth, iHeight, dimension, member [, dimension, member, ...])**
471
472 Description: Opens a portlet in a popup window of given width and height and filters it on the dimension (s) and members specified in parameter (list of dimension / member pairs).
473
474 (% class="box infomessage" %)
475 (((
476 Note: Filters will only be applied on the new window.
477 )))
478
479 (% class="box" %)
480 (((
481 Example : <a href = "javascript:__ddCtrl.openPortletInWindowWithFilter__(portletId, 250, 200, 'Year', '2014', 'Country', 'France') "> Show details France 2014 </a>
482 )))
483
484 **void ddCtrl.openFlowInElement (div, stream, iWidth, iHeight)**
485
486 Description: Opens a stream in an existing DIV element.
487
488 (% class="box" %)
489 (((
490 Example : <a href = "javascript:__ddCtrl.openFlowInElement__('myDiv', fluxId, 250, 200) "> Show product breakdown </a>
491 )))
492
493 **void ddCtrl.openDocument (serverName, fileName)**
494
495 Description: Opens a document in a new window.
496
497 (% class="box" %)
498 (((
499 Example : <a href = "javascript:__ddCtrl.openDocument__(' [[Common>>path:javascript:ddCtrl.uploadDocument('Common]] Datasources', 'catalog_produits.pdf') "> View the product catalog </a>
500 )))
501
502 **void ddCtrl.uploadDocument (serverName, fileName)**
503
504 Description: Upload a document to a document server. Opens a file selection window on the workstation.
505
506 (% class="box" %)
507 (((
508 Example : <a href = "javascript:__ddCtrl.uploadDocument__('Common Datasources', 'catalog_produits.pdf') "> Upload the product catalog </a>
509 )))
510
511 **void ddCtrl.refreshDashboard ()**
512
513 Description: Refreshes the dashboard (same behavior as the Refresh button in the dashboard header).
514
515 (% class="box" %)
516 (((
517 Example : <a href = "javascript:__ddCtrl.refreshDashboard__() "> Refresh </a>
518 )))
519
520 **void ddCtrl.refreshFlow (flow [, event])**
521
522 Description: Refreshes the specified stream with an optional event name.
523
524 (% class="box" %)
525 (((
526 Example : <a href = "javascript:__ddCtrl.refreshFlow__(flowId, null) "> Refresh the flow </a>
527 )))
528
529 **void ddCtrl.refreshFlows ([event])**
530
531 Description: Refreshes all dashboard flows with an optional event name.
532
533 (% class="box" %)
534 (((
535 Example : <a href = "javascript:__ddCtrl.refreshFlows__('MAJ_QUOTIDIENNE') "> Refresh all </a>
536 )))
537
538 **(String) ddCtrl.getCurrentRole ()**
539
540 Description: Returns the role identifier of the current page or the user name for a user page.
541
542 **(String) ddCtrl.getRole (page)**
543
544 Description: Returns the role identifier of the specified page (ex: previously retrieved by __ddCtrl.getCurrentPage__()) or the user name if this page is a user page.
545
546 **void ddCtrl.hidePortlet (portlet)**
547
548 **void ddCtrl.showPortlet (portlet)**
549
550 Description: Hides or shows the specified chart portlet. The portlet parameter is an identifier which can be retrieved in the dashboard editor, via the Information menu in the portlet.
551
552 (% class="box" %)
553 (((
554 Example : <a href = "javascript:__ddCtrl.showPortlet__(portletId) "> View Details </a>
555 )))
556
557 **void ddCtrl.setPortletPos (portlet, x, y)**
558
559 **void ddCtrl.setPortletSize (portlet, width, height)**
560
561 Description: Positions / sizes the portlet at the specified coordinates / dimensions. The portlet parameter is an identifier which can be retrieved in the dashboard editor, via the Information menu in the portlet.
562
563 (% class="box" %)
564 (((
565 Example : <a href = "javascript:__ddCtrl.setPortletPos__(portletId, 100, 100); __ddCtrl.setPortletSize__(portletId, 600, 400) "> Enlarge Details </a>
566 )))
567
568 **void ddCtrl.setPortletMargins (portlet, marginTop, marginRight, marginBottom, marginLeft)**
569
570 Description: Specifies the margins to add to the portlet. The portlet parameter is an identifier which can be retrieved in the dashboard editor, via the Information menu in the portlet.
571
572 (% class="box" %)
573 (((
574 Example : <a href = "javascript:__ddCtrl.setPortletPos__(portletId, 10, 10, 10, 10); __ddCtrl.setPortletMargins__(portletId, 600, 400) "> Change the margins </a>
575 )))
576
577 **(Boolean) ddCtrl.chartIsHidden (portlet)**
578
579 Description: Returns true (true) when the portlet is hidden (see hideChart) and false (false) otherwise.
580
581 **void ddCtrl.genTemplatePPT (stream)**
582
583 Description: Executes a PowerPoint Document Factory type flow (saves the PPT) with flowId identifier with the current selection of the dashboard. The user can download the PPT generated.
584
585 (% class="box" %)
586 (((
587 Example : <a href = "javascript:__ddCtrl.genTemplatePPT__('Id Fabrique De Document') "> Load PPT </a>
588 )))
589
590 **void ddCtrl.exportCurrentPageAsPPT ()**
591
592 Description: Saves the current page of the dashboard in PPT format. The user can download the PPT generated.
593
594 (% class="box" %)
595 (((
596 Example : <a href = "javascript:__ddCtrl.exportCurrentPageAsPPT__() "> Load this page in PPT format </a>
597 )))
598
599 **void ddCtrl.exportPageAsPPT (role, page)**
600
601 Description: Saves the page corresponding to the role and the identifier of the page specified in parameters. The user can download the PPT generated. The page identifier can be retrieved in the dashboard editor (right-click on a page tab).
602
603 (% class="box" %)
604 (((
605 Example : <a href = " [[javascript:>>path:javascript:ddCtrl.exportPageAsPPT]][[(% class="wikiinternallink wikiinternallink wikiinternallink wikiinternallink wikiinternallink wikiinternallink" %)__ddCtrl.__>>path:javascript:ddCtrl.exportPageAsPPT]](%%)[[(% class="wikiinternallink wikiinternallink wikiinternallink wikiinternallink wikiinternallink wikiinternallink" %)__exportPageAsPPT__>>path:javascript:ddCtrl.exportPageAsPPT]](%%)('Telecom', 'telecom_ventes_1') "> Load the PPT of telecom sales </a>
606 )))
607
608 **void ddCtrl.genTemplatePDF (stream)**
609
610 Description: Execute a PDF Document Factory type flow (save the PDF) with flowId identifier with the current selection of the dashboard. The user can download the generated PDF.
611
612 (% class="box" %)
613 (((
614 Example : <a href = "javascript:__ddCtrl.genTemplatePDF__('Id Fabrique De Document') "> Load PDF </a>
615 )))
616
617 **void ddCtrl.exportCurrentPageAsPDF ()**
618
619 Description: Saves the current page of the dashboard in PDF format. The user can download the generated PDF.
620
621 (% class="box" %)
622 (((
623 Example : <a href = "javascript:__ddCtrl.exportCurrentPageAsPDF__() "> Load this page in PDF format </a>
624 )))
625
626 **void ddCtrl.exportPageAsPDF (role, page)**
627
628 Description: Saves the page corresponding to the role and the identifier of the page specified in parameters. The user can download the generated PDF. The page identifier can be retrieved in the dashboard editor (right-click on a page tab).
629
630 (% class="box" %)
631 (((
632 Example : <a href = " [[javascript:>>path:javascript:ddCtrl.exportPageAsPPT]][[(% class="wikiinternallink wikiinternallink wikiinternallink wikiinternallink wikiinternallink wikiinternallink" %)__ddCtrl.__>>path:javascript:ddCtrl.exportPageAsPPT]](%%)[[(% class="wikiinternallink wikiinternallink wikiinternallink wikiinternallink wikiinternallink wikiinternallink" %)__exportPageAsP__>>path:javascript:ddCtrl.exportPageAsPPT]](%%)__[[D>>path:javascript:ddCtrl.exportPageAsPPT]] F__('Telecom', 'telecom_ventes_1') "> Load the PDF of telecom sales </a>
633 )))
634
635 **void ddCtrl.genTemplateXLS (stream)**
636
637 Description: Executes an Excel Document Factory type flow (saves the XLS) with a flowId identifier with the current selection from the dashboard. The user can download the generated XLS.
638
639 Example: <a href = "javascript:__ddCtrl.genTemplateXLS__('Id Fabrique De Document') "> Load the XLS </a>
640
641 **void ddCtrl.exportAsPDF (stream)**
642
643 Description: Save the stream in PDF. The user can download the generated PDF.
644
645 **void ddCtrl.exportAsPPT (stream)**
646
647 Description: Save the flow in PPT. The user can download the PPT generated.
648
649 **void ddCtrl.exportAsXLS (stream)**
650
651 Description: Saves the stream in XLS. The user can download the generated XLS.
652
653 **void ddCtrl.exportAsXLSWithoutStyles (stream)**
654
655 Description: Saves the stream in XLS without applying table styles for more performance. The user can download the generated XLS.
656
657 **void ddCtrl.exportAsCSV (stream)**
658
659 Description: Saves the stream in CSV (Fields Separated by Commas). The user can download the generated CSV.
660
661 **void ddCtrl.saveDashboardState (name, bDefault)**
662
663 Description: Saves the current state of the dashboard (page, filters, drill, variables). Same as the action produced by the selection backup button in the dashboard toolbar. The name parameter is the name of the selection, the bDefault parameter activates the loading of the selection when the dashboard is started.
664
665 **(String) ddCtrl.getCurrentPortletInGroupOfTabs (portletTabId)**
666
667 Description: Returns the identifier of the current portlet of the Tab group object. The porletTabId parameter is the identifier of the Tab group.
668
669 **void ddCtrl.changePortletInGroupOfTabs (portletTabId, portletId)**
670
671 Description: Changes the current portlet of the Tab Group object. The porletTabId parameter is the identifier of the Tab group, the portletId parameter is the identifier of the portlet to select.
672
673 **(Table) ddCtrl.getCurrentPagePath ()**
674
675 Description: Returns the path of the current page (Role / Page / Sub-Page) in the form of an array of objects. Each object has the following attributes: id, title, name, type (role / container / page).
676
677 __Event management__
678
679 These listener functions are called by the system when specific events are triggered. You can therefore create new behaviors according to situations: a graphic is refreshed or drawn, a page is changed, a dimension is filtered, etc. The best place to implement these behaviors is in the global Javascript editor accessible in the options menu of the dashboard editor.
680
681 The event diagram is available in Annex III.2
682
683 **void ddCtrl.addChartBeforeRefreshListener (Function)**
684
685 Description: Adds a function to listen to the event triggered before the graph is refreshed.
686
687 (% class="box" %)
688 (((
689 Example : ddCtrl.addChartBeforeRefreshListener (function (doc, dm, dmsel, chart, errorMsg) {alert ("The chart" + chart.title + "will be refreshed");});
690 )))
691
692 **void ddCtrl.addChartRefreshListener (Function)**
693
694 Description: Adds a function to listen to the event triggered after the graph is refreshed.
695
696 (% class="box" %)
697 (((
698 Example : ddCtrl.addChartRefreshListener (function (doc, dm, dmsel, chart, errorMsg) {alert ("The chart" + chart.title + "has been refreshed");});
699 )))
700
701 **void ddCtrl.addChartDrawnListener (Function)**
702
703 Description: Adds a function to listen to the event triggered when the graph has finished being drawn (first display).
704
705 (% class="box" %)
706 (((
707 Example : ddCtrl.addChartDrawnListener (function (doc, dm, dmsel, chart, errorMsg) {alert ("The chart" + chart.title + "has been drawn");});
708 )))
709
710 **void ddCtrl.addChartModelReadyListener (Function)**
711
712 Description: Adds a function to listen to the event triggered before drawing the graph (first display).
713
714 (% class="box" %)
715 (((
716 Example : ddCtrl.addChartModelReadyListener (function (doc, dm, dmsel, chart, errorMsg) {alert ("The graph" + chart.title + "will be drawn");});
717 )))
718
719 **void ddCtrl.addDimensionFilterListener (Function)**
720
721 Description: Adds a function to listen to the event triggered after filtering a dimension.
722
723 (% class="box" %)
724 (((
725 Example : ddCtrl.addDimensionFilterListener (function (dimension, hierarchy, level, members, membersFormated, bExclude, min, max) {alert ("The dimension" + dimension + "has been filtered on" + membersFormated);});
726 )))
727
728 **void ddCtrl.addVariableChangeListener (Function)**
729
730 Description: Adds a function to listen to the event triggered after changing a variable.
731
732 (% class="box" %)
733 (((
734 Example : ddCtrl.addVariableChangeListener (function (variable, value) {alert ("The variable" + variable + "has changed, new value:" + value);});
735 )))
736
737 __Dashboard event management__
738
739 **void ddCtrl.addCurrentPageLoadListener (Function)**
740
741 Description: Adds a function to listen to the event triggered when the dashboard page is fully loaded.
742
743 (% class="box" %)
744 (((
745 Example : ddCtrl.addCurrentPageLoadListener (function (currentPage) {alert ("The page" + currentPage + "has been loaded");});
746 )))
747
748 **void ddCtrl.addCurrentPageChangeListener (Function)**
749
750 Description: Adds a function to listen to the event triggered during a page change.
751
752 (% class="box" %)
753 (((
754 Example : ddCtrl.addCurrentPageChangeListener (function (currentPage, bFirstTime) {alert ("The page is now" + currentPage);});
755 )))
756
757 **void ddCtrl.addUserLoggedListener (Function)**
758
759 Description: event triggered once the user is authenticated. May be useful when using the ddCtrl.getUserAttribute function.
760
761 (% class="box" %)
762 (((
763 Example : ddCtrl.addUserLoggedListener (function () {alert ("You are authenticated");});
764 )))
765
766 **void ddCtrl.addPortletHiddenListener (Function)**
767
768 Description: event triggered when the status of the object has changed from visible to hidden.
769
770 (% class="box" %)
771 (((
772 Example : ddCtrl.addPortletHiddenListener (function (portletId) {alert ("Object is hidden");});
773 )))
774
775 **void ddCtrl.addPortletVisibleListener (Function)**
776
777 Description: event triggered when the status of the object has changed from hidden to visible.
778
779 (% class="box" %)
780 (((
781 Example : ddCtrl.addPortletVisibleListener (function (portletId) {alert ("Object is visible");});
782 )))
783
784 **void ddCtrl.addPortletCollapseListener (Function)**
785
786 Description: event triggered when the user clicks on the icon used to hide a retractable element
787
788 (% class="box" %)
789 (((
790 Example : ddCtrl.addPortletCollapseListener (function (portletId) {alert ("Object will be hidden");});
791 )))
792
793 **void ddCtrl.addPortletCollapsedListener (Function)**
794
795 Description: event triggered once the retractable element is hidden,
796
797 (% class="box" %)
798 (((
799 Example : ddCtrl.addPortletCollapsedListener (function (portletId) {alert ("Object is hidden");});
800 )))
801
802 **void ddCtrl.addPortletExpandListener (Function)**
803
804 Description: event triggered when the user clicks on the icon allowing the display of a retractable element
805
806 (% class="box" %)
807 (((
808 Example : ddCtrl.addPortletExpandListener (function (portletId) {alert ("The object will be displayed");});
809 )))
810
811 **void ddCtrl.addPortletExpandedListener (Function)**
812
813 Description: event triggered once the retractable element is displayed,
814
815 (% class="box" %)
816 (((
817 Example : ddCtrl.addPortletExpandedListener (function (portletId) {alert ("Object is displayed");});
818 )))
819
820 **void ddCtrl.addGroupOfTabsChangeListener (Function)**
821
822 Description: event triggered when the user changes graphics in a group of tabs. The first parameter is the identifier of the tab group object, the second is the identifier of the current portlet.
823
824 (% class="box" %)
825 (((
826 Example : ddCtrl.addGroupOfTabsChangeListener (function (portletTabId, curPortletId) {alert ("The current portlet is:" + curPortletId);});
827 )))
828
829 **void ddCtrl.addDocumentUploadListener (Function)**
830
831 Description: event triggered when the user adds a file via the dashboard.
832
833 (% class="box" %)
834 (((
835 Example : ddCtrl.addDocumentUploadListener (function (serverName, filesName) {alert ("The file" + filesName [0] + "has been added");});
836 )))
837
838 __Miscellaneous functions__
839
840 **(Array of strings) ddCtrl.getUserRoles ()**
841
842 Description: Returns the list of identifiers of the roles of the logged in user.
843
844 **(Associative array of strings / booleans) ddCtrl.getUserACLs ()**
845
846 Description: Returns the list of rights identifiers (ACL) of the connected user. The list returned is an array associating the Id of the acl with a boolean (true) if the ACL is allocated to the user.
847
848 (% class="box" %)
849 (((
850 Example : if (ddCtrl.getUserACLs () ['SaveAsPPT']) alert ('You can save in PPT');
851 )))
852
853 List of all possible rights:
854
855 AccessContentManagement, AccessDBE, AccessDBV, AccessLicenseSettings, AccessServerSettings, AccessUserSettings, AddFlow, AddRoleFlow, ChartNavigation, EditDashboardForGroup, EditDataSourceForGroup, EditDataSource, LoadWalletForGroup, RefreshFlow, RefreshRoleFlow, RefreshDatasource, SaveWalletForGroup, SaveAsPDF, SaveAsPPT, SaveAsXLS, SaveAsCSV, Scheduler SendSMS, UploadDocument, updateDocument, ViewComments, AddCommentDataModel, RemoveCommentDataModel, AddCommentFlow, RemoveCommentFlow, AllowIgnoreDMResivion, DashboardCustomization, EditProtectedDashboardPages
856
857 **(String) ddCtrl.getUserAttribute (attr)**
858
859 Description: Returns the LDAP attribute <attr> of the user.
860
861 **(String) ddCtrl.getUserAttribute (attr, Function)**
862
863 Description: Returns the LDAP attribute <attr> of the user via an asynchronous call function.
864
865 (% class="box" %)
866 (((
867 Example : ddCtrl.getUserAttribute ('displayName', function (attrVal) {alert (attrVal)});
868 )))
869
870 **(String) ddCtrl.getSessionAttribute (attr)**
871
872 Description: Returns the <attr> attribute of the user session.
873
874 See the tutorial Session variables (session_variables_tutorial_en.pdf) for more information on session variables.
875
876 **(String) ddCtrl.getSessionAttribute (attr, Function)**
877
878 Description: Returns the <attr> attribute of the user session via an asynchronous call function.
879
880 (% class="box" %)
881 (((
882 Example : ddCtrl.getSessionAttribute ('regionChoisie', function (attrVal) {alert (attrVal)});
883 )))
884
885 See the tutorial Session variables (session_variables_tutorial_en.pdf) for more information on session variables.
886
887 **void ddCtrl.setSessionAttribute (attr, value)**
888
889 Description: Updates the <attr> attribute of the user session with the specified value.
890
891 (% class="box" %)
892 (((
893 Example : ddCtrl.setSessionAttribute ('regionChoisie', 'France');
894 )))
895
896 See the tutorial Session variables (session_variables_tutorial_en.pdf) for more information on session variables.
897
898 **(String) ddCtrl.getServerAttribute (attr)**
899
900 Description: Returns the <attr> attribute of the server. Server attributes (or variables) allow you to specify constants used in data models and flows using the keyword $ {server. <attr>}. See the advanced server configuration document (guide_avance_systeme_fr.pdf) for more information on server variables.
901
902 **(String) ddCtrl.getServerAttribute (attr, Function)**
903
904 Description: Returns the <attr> attribute of the server via an asynchronous call function.
905
906 (% class="box" %)
907 (((
908 Example : ddCtrl.getSessionAttribute ('serverMode', function (attrVal) {alert (attrVal)});
909 )))
910
911 See the advanced server configuration document (guide_avance_systeme_fr.pdf) for more information on server variables.
912
913 **void loadCSS (cssFile)**
914
915 Description: Loads a CSS file.
916
917 **void ddCtrl.loadTheme (cssTheme)**
918
919 Description: Loads a DigDash CSS theme on the dashboard.
920
921 (% class="box" %)
922 (((
923 Example : ddCtrl.loadTheme ('digdash');
924 )))
925
926 **void logout ()**
927
928 Description: Logs out the current user.
929
930 == CSS styles ==
931
932 Here is the non-exhaustive list of CSS classes used to customize the visual aspect of the dashboard.
933
934 __Banner__
935
936 **.topPanel**
937
938 Description: Change the visual appearance of the banner (border, wallpaper).
939
940 (% class="box" %)
941 (((
942 Example : .topPanel {background-color: # f1f1f1; border: 1px solid black; }
943 )))
944
945 **.logoTopPanel**
946
947 Description: Change the banner logo.
948
949 (% class="box" %)
950 (((
951 Example : .logoTopPanel {background: url (mon_logo.png) no-repeat; }
952 )))
953
954 **.userLabel**
955
956 Description: Change the text representing the user name (color, font).
957
958 (% class="box" %)
959 (((
960 Example : .userLabel {font-family: 'Open Sans'; color: black; }
961 )))
962
963 **.topPanelIconLabelPanel_Label**
964
965 Description: Changes the menu to the right of the banner.
966
967 (% class="box" %)
968 (((
969 Example : .topPanelIconLabelPanel_Label {font-family: 'Open Sans'; color: black; }
970 )))
971
972 __Filter bar__
973
974 **#interactBar**
975
976 Description: Change the div containing the filter boxes.
977
978 (% class="box" %)
979 (((
980 Example : .interactBar {background-color: # f1f1f1; }
981 )))
982
983 **.selHierTitleDiv**
984
985 Description: Change the title of the filter box.
986
987 (% class="box" %)
988 (((
989 Example : .selHierTitleDiv {background-color: # d5d7da; border-radius: 4px; }
990 )))
991
992 **.selHierTitleDivWhite**
993
994 Description: Change the title of the filter box when hovered over the mouse.
995
996 (% class="box" %)
997 (((
998 Example : .selHierTitleDivWhite {background-color: # 009fa6; color: white; }
999 )))
1000
1001 __Tabs__
1002
1003 **.dd-tab-bar**
1004
1005 Description: Changes the bar containing the list of tabs.
1006
1007 (% class="box" %)
1008 (((
1009 Example : .dd-tab-bar {background-color: # f1f1f1; border-bottom: 1px solid # f1f1f1; }
1010 )))
1011
1012 **.dd-tab-header**
1013
1014 Description: Change the tab.
1015
1016 (% class="box" %)
1017 (((
1018 Example : .dd-tab-header {background-color: # f1f1f1! Important; border-right: 1px solid #cccccc; }
1019 )))
1020
1021 **.dd-tab-header-selected**
1022
1023 Description: Change the selected tab.
1024
1025 (% class="box" %)
1026 (((
1027 Example : .dd-tab-header-selected {background-color: # 009fa6! Important; color: white! important; }
1028 )))
1029
1030 **.dd-tab-header-text**
1031
1032 Description: Change the text of the tab.
1033
1034 (% class="box" %)
1035 (((
1036 Example : .dd-tab-header-text {font-family: 'Open Sans'! Important; font-size: 13px! important; }
1037 )))
1038
1039 __Portlets__
1040
1041 **.portlet**
1042
1043 Description: Change the portlet.
1044
1045 (% class="box" %)
1046 (((
1047 Example : .portlet {border: 1px solid # d0d0d0! Important; }
1048 )))
1049
1050 **.portlet-header**
1051
1052 Description: Changes the header of the portlet.
1053
1054 (% class="box" %)
1055 (((
1056 Example : .portlet-header {background-color: #eeeeee! Important; border-bottom: 1px solid # d0d0d0! important; }
1057 )))
1058
1059 **.portlet-header-text**
1060
1061 Description: Changes the text of the portlet header.
1062
1063 (% class="box" %)
1064 (((
1065 Example : .portlet-header-text {color: # 6d6d6d! Important; font-size: 16px! important; font-family: 'Open Sans'! important; }
1066 )))
1067
1068 **.portlet-content**
1069
1070 Description: Changes the content of the portlet.
1071
1072 (% class="box" %)
1073 (((
1074 Example : .portlet-content {background-color: white! Important; }
1075 )))
1076
1077 **.x-tool-maximize, .x-tool-gear, .x-tool-help, .x-tool-restore, .x-tool-alert, .x-tool-comment**
1078
1079 **~ **Description: Changes the icons displayed in the portlet header.
1080
1081 (% class="box" %)
1082 (((
1083 Example : .x-tool-maximize {background-image~: url (mon_icone.png)! Important; }
1084 )))
1085
1086 __Ariane file__
1087
1088 **.breadcrumbImg**
1089
1090 Description: Changes the breadcrumb reset image.
1091
1092 (% class="box" %)
1093 (((
1094 Example : .breadcrumnImg {background-image~: url (my_image.png! Important;}
1095 )))
1096
1097 **.unclickablebreadcrumb, .clickablebreadcrumb**
1098
1099 Description: Change the breadcrumb text.
1100
1101 (% class="box" %)
1102 (((
1103 Example : .unclickablebreadcrumb, .clickablebreadcrumb {color: # 6d6d6d! Important; }
1104 )))
1105
1106 __Vertical / horizontal slicers__
1107
1108 **.tdMemberActive, .spanMemberActive**
1109
1110 Description: Changes the member of the slicer with values.
1111
1112 (% class="box" %)
1113 (((
1114 Example : .tdMemberActive {background-color: # d5d7da! Important; border-radius: 5px! important; color: black! important; }
1115 )))
1116
1117 **.tdMemberInactive, .spanMemberInactive**
1118
1119 Description: Change the member of the slicer with no values.
1120
1121 (% class="box" %)
1122 (((
1123 Example : .tdMemberInactive {background-color: white! Important; color: gray! important; }
1124 )))
1125
1126 **.tdMemberSelected, .spanMemberSelected**
1127
1128 Description: Change the selected member of the slicer.
1129
1130 (% class="box" %)
1131 (((
1132 Example : .tdMembeSelected {background-color: # 009fa6! Important; border-radius: 3px! important; color: white! important; }
1133 )))
1134
1135 __Filters__
1136
1137 **.trHeaderFilter**
1138
1139 Description: Changes the header of the Filter object.
1140
1141 (% class="box" %)
1142 (((
1143 Example : .trHeaderFilter {background-color: # d5d7da! Important; }
1144 )))
1145
1146 **.tdFilter**
1147
1148 Description: Changes the content of the Filter object.
1149
1150 (% class="box" %)
1151 (((
1152 Example : .tdFilter {background-color: # f1f1f1! Important; }
1153 )))
1154
1155 **.tdFilterImage**
1156
1157 Description: Change the filter deletion image.
1158
1159 (% class="box" %)
1160 (((
1161 Example : .tdFilterImage {background: url (mon_image.png) no-repeat # 009fa6! Important; }
1162 )))
1163
1164 __Comments__
1165
1166 **.comments**
1167
1168 Description: Change the Comment object.
1169
1170 (% class="box" %)
1171 (((
1172 Example : .comments {background-color: # f1f1f1! Important; }
1173 )))
1174
1175 **.commentsDisplayAll**
1176
1177 Description: Changes the button allowing the display of all comments.
1178
1179 (% class="box" %)
1180 (((
1181 Example : .commentsDisplayAll {color: #ffffff! Important; background-color: # 009fa6! important; }
1182 )))
1183
1184 **.commentsFilter**
1185
1186 Description: Changes the image used to apply the selection of a comment.
1187
1188 (% class="box" %)
1189 (((
1190 Example : .commentsFilter {background: url (mon_icone.png)! Important; }
1191 )))
1192
1193 **.How do you say**
1194
1195 Description: Change the image used to edit a comment.
1196
1197 (% class="box" %)
1198 (((
1199 Example : .commentsEdit {background: url (mon_icone.png)! Important; }
1200 )))
1201
1202 **.commentsRemove**
1203
1204 Description: Changes the image used to delete a comment.
1205
1206 (% class="box" %)
1207 (((
1208 Example : .commentsRemove {background: url (mon_icone.png)! Important; }
1209 )))
1210
1211 **.commentsDate**
1212
1213 Description: Changes the date of the comment.
1214
1215 (% class="box" %)
1216 (((
1217 Example : .commentsDate {font-family: 'Open Sans'! Important; color: black! important; }
1218 )))
1219
1220 **.commentsUser**
1221
1222 Description: Change the user of the comment.
1223
1224 (% class="box" %)
1225 (((
1226 Example : .commentsUser {font-family: 'Open Sans'! Important; color: black! important; }
1227 )))
1228
1229 **.commentsContent**
1230
1231 Description: Change the content of the comment.
1232
1233 (% class="box" %)
1234 (((
1235 Example : .commentsContent {font-family: 'Open Sans'! Important; color: black! important; }
1236 )))
1237
1238 __Sliders (slicers and variables)__
1239
1240 **.ui-widget-header**
1241
1242 Description: Changes the cursor bar to interval mode.
1243
1244 (% class="box" %)
1245 (((
1246 Example : .ui-widget-header {background: # 009fa6 50% 50% repeat-x! Important; }
1247 )))
1248
1249 **.ui-widget-content**
1250
1251 Description: Changes the cursor bar.
1252
1253 (% class="box" %)
1254 (((
1255 Example : .ui-widget-content {background: # 009fa6 50% 50% repeat-x! Important; }
1256 )))
1257
1258 __Loading__
1259
1260 **.loading**
1261
1262 Description: Changes the display of Loading graphic objects.
1263
1264 (% class="box" %)
1265 (((
1266 Example : .loading {border: 1px solid # d4d4d4! Important; }
1267 )))
1268
1269 **.loadingImg**
1270
1271 Description: Change the image of the loading of graphic type objects.
1272
1273 (% class="box" %)
1274 (((
1275 Example : .loadingImg {background: url (my_image.png) no-repeat! Important; }
1276 )))
1277
1278 **.loadingTxt**
1279
1280 Description: Change the text of the loading of graphic type objects.
1281
1282 (% class="box" %)
1283 (((
1284 Example : .loadingTxt {font-family: 'Open Sans'! Important; }
1285 )))
1286
1287 The CSS selectors **#dashboard_editor** and **#dashboard_viewer** allow you to differentiate the dashboard in edit mode from the dashboard in consultation mode.
1288
1289 == Migration of CSS styles (all versions to 2017R2, new dashboard) ==
1290
1291 Following a change of technology for the realization of the dashboard, some CSS classes (not from digdash) are not compatible, here is a list of CSS classes not compatible with their equivalent classes:
1292
1293 * **#viewportPanel** should be replaced by **#dashboard_viewer**
1294 * **.x-tab-strip-inner, .x-tab-left, .x-tab-right** should be replaced by **.dd-tab-header**
1295 * **.x-tab-strip-active .x-tab-strip-inner, .x-tab-strip-active .x-tab-left, .x-tab-strip-active .x-tab-right** should be replaced by **.dd-tab-header-selected**
1296 * **.x-tab-strip span.x-tab-strip-text** should be replaced by **.dd-tab-header-text**
1297 * **.x-panel** must be replaced by **.portlet**
1298 * **.x-panel-header** must be replaced by **.portlet-header**
1299 * **.x-panel-bwrap, .x-abs-layout-item, .x-panel-body ** should be replaced by ** .portlet-content**
1300
1301 = APPENDICES =
1302
1303 == Example: Support for left and right swiping to change the Dashboard page (Touch pads) ==
1304
1305 This example shows how to add support for touch gestures ("Gestures") left and right swipe to change dashboard page on touch tablets (iPad and Android).
1306
1307 It shows the addition of new CSS styles to the dashboard, as well as the addition of custom Javascript.
1308
1309 First we will set up the slide animation between two pages thanks to the CSS animations supported by recent browsers on touch pads, combined with Javascript code.
1310
1311 Next, we will add the left and right swipe detection, in order to change the page with this gesture.
1312
1313 Important:
1314
1315 As explained in the previous chapters, it is advisable to keep a backup copy of the modifications you make in the files deployed by .WAR. During a future update, you will lose these modifications and will have to re-incorporate them into the new deployed files.
1316
1317 Notes:
1318
1319 You can test the changes in a recent browser. We recommend Chrome for its integrated development tools (without installing a plug-in). To be mitigated according to your user base.
1320
1321 The modification of certain types of files could cause malfunctions in the application. It is preferable to make a backup copy of your files before modifications, in order to be able to return to a stable state.
1322
1323 If the test browser chosen does not display your modifications after saving the file (s) concerned, remember to clear the browser cache.
1324
1325 __Page change animation (CSS)__
1326
1327 Open the **<DDE install> /apache-tomcat/digdash_dashboard/dashboard.css file** for editing. Add the following lines to the end of this file:
1328
1329 {{code language="CSS"}}
1330 . in , . out {
1331          -webkit- animation-timing-function : ease-in-out ;
1332          -webkit- animation-duration : 350 ms ;
1333 }
1334 . slide . in . right {
1335          -webkit- transform : translateX ( 0 );
1336          -webkit- animation-name : slideinfromright;
1337 }
1338 . slide . out . right {
1339          -webkit- transform : translateX (100 % );
1340          -webkit- animation-name : slideouttoright;
1341 }
1342 . slide . in . left {
1343          -webkit- transform : translateX ( 0 );
1344          -webkit- animation-name : slideinfromleft;
1345 }
1346 . slide . out . left {
1347          -webkit- transform : translateX ( 100 % );
1348          -webkit- animation-name : slideouttoleft;
1349 }
1350 @ -webkit-keyframes slideinfromright {
1351          from { -webkit- transform : translateX ( 100 % ); }
1352          to { -webkit- transform : translateX ( 0 ); }
1353 }
1354 @ -webkit-keyframes slideinfromleft {
1355          from { -webkit- transform : translateX ( -100 % ); }
1356          to { -webkit- transform : translateX ( 0 ); }
1357 }
1358 @-webkit-keyframes slideouttoleft {
1359          from { -webkit- transform : translateX ( 0 ); }
1360          to { -webkit- transform : translateX ( -100 % ); }
1361 }
1362 @ -webkit-keyframes slideouttoright {
1363          from { -webkit- transform : translateX ( 0 ); }
1364          to { -webkit- transform : translateX ( 100 % ); }
1365 }
1366 . x-hide-display . slide . out {
1367          position : absolute ;
1368          left : 0 px ;
1369          height : 0 px ! important ;
1370          background-color : red ;
1371          display : block ! important ;
1372 }
1373 {{/code}}
1374
1375 These classes define the different CSS animations that we will use for moving pages when changing the page of the dashboard.
1376
1377 Save the **dashboard.css** file .
1378
1379 __Page change animation (Javascript)__
1380
1381 Open the **<DDE install> /apache-tomcat/digdash_dashboard/js-dashboard.js file** for editing. Add the following lines to the end of this file:
1382
1383 {{code language="JAVASCRIPT"}}
1384 function canChangeCurrentPage (nextPage)
1385 {
1386    var currentPage = getCurrentPage ();
1387    var slideDir = - 1 ; // slide to left
1388    if (currentPage && nextPage
1389    && ddCtrl.pageList [currentPage] && ddCtrl.pageList [nextPage])
1390     {
1391        if (ddCtrl.pageList [currentPage] .role
1392        ! = ddCtrl.pageList [nextPage] .role)
1393         { // role change
1394              return true ; // no slide
1395        }
1396        // check direction to slide
1397        if(ddCtrl.pageList [currentPage] .pos
1398        > ddCtrl.pageList [nextPage] .pos)
1399         { // slide to right
1400            slideDir = 1 ; // slide to right
1401        }
1402     }
1403    if (currentPage)
1404     {
1405        var pageDiv = document .getElementById (currentPage);
1406        if (pageDiv && pageDiv.slideable)
1407         {
1408             pageDiv.className + = "slide out"
1409                + (slideDir == - 1 ? "left" : "right" );
1410             pageDiv.style.top = pageDiv.parentNode.offsetTop
1411                + "px" ; // fix a shift issue
1412        }
1413     }
1414    if (nextPage)
1415     {
1416        var pageDiv = document .getElementById (nextPage);
1417        if (pageDiv && pageDiv.slideable)
1418         {
1419             pageDiv.className + = "slide in"
1420                + (slideDir == - 1 ? "right" : "left" );
1421         }
1422     }
1423    return true ;
1424 }
1425
1426 function animEndListener (ev)
1427 { // remove animation styles classes at the end of animation
1428    var pObj = ev.target;
1429     pObj.className = pObj.className.replace ( / \ sslide / g , "" );
1430     pObj.className = pObj.className.replace ( / \ sin / g , "" );
1431     pObj.className = pObj.className.replace ( / \ sout / g , "" );
1432     pObj.className = pObj.className.replace ( / \ sright / g , "" );
1433     pObj.className =pObj.className.replace ( / \ sleft / g , "" );
1434 }
1435
1436 function currentPageChanged (page, firstChange)
1437 {
1438    if (firstChange && touch
1439        / * comment touch condition to debug on chrome * / )
1440     {
1441        var pageDiv = document .getElementById (page);
1442        if (pageDiv)
1443         {
1444             pageDiv.slideable = true ;
1445             pageDiv.addEventListener ( "webkitAnimationEnd" ,
1446                 animEndListener, false );
1447             addSwipeEventListener (pageDiv);
1448             pageDiv.style.backgroundColor = "white" ;
1449         }
1450     }
1451 }
1452 {{/code}}
1453
1454 These Javascript functions will allow you to modify the behavior of the dashboard page change and to animate the transitions between the pages.
1455
1456 The **currentPageChanged (page)** and **canChangeCurrentPage (page, firstChange) functions** are called by the dashboard engine. By default they are not implemented:
1457
1458 * **canChangeCurrenPage (page)** is called just before a dashboard page change. We use this function to start the animations of the outgoing page and the new page. These animations are done just by adding to the DOM objects representing these pages (DIV) CSS classes of animations that we have defined in CSS.
1459 * **currentPageChanged (page, firstChange)** is called immediately after the actual page change. We use this function to initialize (if firstChange is true) an event listener at the end of the animation, allowing us to "clean up" the CSS classes of the DIVs of the pages from any trace of animations. It is also in this initialization function that we will hook the finger **swipe** detection **addSwipeEventListener** (see next paragraph).
1460
1461 __Left / right swipe gesture detection (Javascript)__
1462
1463 Still in the js-dashboard.js file, add the following Javascript which implements the detection of a swipe of the finger ("Swipe") on the tablet:
1464
1465 {{code language="JAVASCRIPT"}}
1466 var maxTime = 150 , // allow movement if <150 ms  
1467  maxDistance = 100 , // swipe movement of 100 pixels min to trigger
1468  startX = 0 ,
1469   startTime = 0 ,
1470   touch = "ontouchend" in document ,
1471   startEvent = (touch) ? 'touchstart' : 'mousedown' ,
1472   moveEvent = (touch) ? 'touchmove' : 'mousemove' ,
1473   endEvent =(touch) ? 'touchend' : 'mouseup' ;
1474
1475 function addSwipeEventListener (target)
1476 {
1477     target.addEventListener (startEvent, function (e)
1478     {
1479        if (startTime ! = 0 )
1480         { // already started (multitouch gesture) => cancel
1481            startTime = 0 ;
1482             startX = 0 ;
1483         }
1484        else
1485         {
1486             startTime = e .timeStamp;
1487             startX = touch ? e.touches [0 ] .pageX : e.pageX;
1488         }
1489     }, false );
1490     target.addEventListener (endEvent, function (e)
1491     {
1492             startTime = 0 ;
1493             startX = 0 ;
1494     }, false );
1495     target.addEventListener (moveEvent, function (e)
1496     {
1497        if (startTime == 0 )
1498         {
1499            return ;
1500         }
1501        var currentX = touch ? e.touches [ 0] .pageX : e.pageX,
1502         currentDistance =
1503             (startX === 0 ) ? 0 : Math .abs (currentX - startX),
1504         currentTime = e.timeStamp;
1505        if (currentTime - startTime < 50 )
1506         { // prevent default at the begining of the swipe
1507            e.preventDefault ();
1508         }
1509        if (currentTime - startTime < maxTime
1510         && currentDistance > maxDistance)
1511         {
1512            if (currentX < startX)
1513             {     // swipe left code here
1514                 e.preventDefault ();
1515                  nextPage ();
1516             }
1517            else if (currentX > startX)
1518             {     // swipe right code here
1519                 e.preventDefault ();
1520                  prevPage ();
1521             }
1522             startTime = 0 ;
1523             startX = 0 ;
1524         }
1525     }, false );
1526 }
1527
1528 function onChartDrawn (doc, dm, dmsel, chart)
1529 {
1530    // also add the swipe event listener on each chart content
1531    addSwipeEventListener (doc);
1532 }
1533 {{/code}}
1534
1535 The slip detection is done on the DIV of the page via the listener added by the **currentPageChanged** function **(page, firstChange) as** well as on each flow portlet via the **onChartDrawn** function **(doc, dm, dmsel, chart)** . The latter is called by the dashboard engine after each display of a flow portlet. By default it is not implemented.
1536
1537 Save the **js-dashboard.js** file .
1538
1539 == Dashboard events diagram ==
1540
1541 [[image:http://rack-lure:8585/bin/download/Digdash_2019R2/customization/customization_DDE/WebHome/customisation_fr_html_abafeb3784b894af.gif?width=641&height=802&rev=1.1||alt="customization_en_html_abafeb3784b894af.gif"]]
1542 \\
1543
1544 == Filtering on dates: Use of keywords ==
1545
1546 It is possible to use keywords allowing to filter on a date dimension, here is the list of keywords:
1547
1548 __Date calculated from today's date:__
1549
1550 * Current year: **$ {filter.current.year}**
1551 * Current semester: **$ {filter.current.semester}**
1552 * Current **quarter** : **$ {filter.current.quarter}**
1553 * Current month: **$ {filter.current.month}**
1554 * Current week: **$ {filter.current.week}**
1555 * Current day: **$ {filter.current.day}**
1556 * First day of current year to current day: **$ {filter.current.yearToDay}**
1557 * First day of current month to current day: **$ {filter.current.monthToDay}**
1558 * Previous year: **$ {filter.current.previousYear}**
1559 * Previous semester: **$ {filter.current.previousSemester}**
1560 * Previous **quarter** : **$ {filter.current.previousQuarter}**
1561 * Previous month: **$ {filter.current.previousMonth}**
1562 * Previous week: **$ {filter.current.previousWeek}**
1563 * Previous day: **$ {filter.current.previousDay}**
1564 * **Rolling** year: **$ {filter.current.slidingYear}**
1565 * **Rolling** semester: **$ {filter.current.slidingSemester}**
1566 * **Rolling term** : **$ {filter.current.slidingQuarter}**
1567 * **Rolling** month: **$ {filter.current.slidingMonth}**
1568 * Slippery week: **$ {filter.current.slidingWeek}**
1569
1570 __Date calculated from the last date of the data:__
1571
1572 * Current year ** **: ** $ {filter.data.year}**
1573 * Current semester: **$ {filter.data.semester}**
1574 * Current **quarter** : **$ {filter.data.quarter}**
1575 * Current month: **$ {filter.data.month}**
1576 * Current week: **$ {filter.data.week}**
1577 * Current day: **$ {filter.data.day}**
1578 * First day of current year to current day: **$ {filter.data.yearToDay}**
1579 * First day of current month to current day: **$ {filter.data.monthToDay}**
1580 * Previous year: **$ {filter.data.previousYear}**
1581 * Previous semester: **$ {filter.data.previousSemester}**
1582 * Previous **quarter** : **$ {filter.data.previousQuarter}**
1583 * Previous month: **$ {filter.data.previousMonth}**
1584 * Previous week: **$ {filter.data.previousWeek}**
1585 * Previous day: **$ {filter.data.previousDay}**
1586 * **Rolling** year: **$ {filter.data.slidingYear}**
1587 * **Rolling** semester: **$ {filter.data.slidingSemester}**
1588 * **Rolling term** : **$ {filter.data.slidingQuarter}**
1589 * **Rolling** month: **$ {filter.data.slidingMonth}**
1590 * Slippery week: **$ {filter.data.slidingWeek}**
1591
1592 __Examples of use:__
1593
1594 - Today's date: 02/05/2019
1595
1596 - Example 1:
1597
1598 ddCtrl.filter (new FilterOperand ('Date', '$ {filter.current.year}'));
1599
1600 → if Year level found, filter on 2019
1601
1602 → otherwise interval type filter: 01/01/2019 - 31/12/2019
1603
1604 - Example 2:
1605
1606 ddCtrl.filter (new FilterOperand ('Date', '$ {filter.current.year}', "Date ',' Year '));
1607
1608 → if the specified hierarchy and level are found, filter on it
1609
1610 → otherwise interval type filter: 01/01/2019 - 31/12/2019
1611
1612 - Example 3:
1613
1614 ddCtrl.filter (new FilterOperand ('Date', '$ {filter.current.year}', '-1', '-1'));
1615
1616 → interval type filter: 01/01/2019 - 31/12/2019
1617
1618