DigDash Enterprise customization

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>.

(% class="box" %)

(((

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>.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

Example : <a href = " **javascript:__ddCtrl.filter__(new FilterOperand (** 'Location', 'FR', 'Geographic', 'Country')) "> Details France </a>

)))

//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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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).

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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).

(% class="box" %)

(((

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).

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

)))

Example:

(% class="box" %)

(((

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);

}

});

)))

**(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).

(% class="box" %)

(((

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.

(% class="box" %)

(((

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").

)))

(% class="box" %)

(((

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").

)))

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

)))

(% class="box" %)

(((

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.

)))

(% class="box" %)

(((

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.} ..

)))

(% class="box" %)

(((

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.

(% class="box" %)

(((

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):

(% class="box" %)

(((

__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):

(% class="box" %)

(((

__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>.

(% class="box" %)

(((

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).

(% class="box" %)

(((

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).

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

)))

(% class="box" %)

(((

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.

)))

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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).

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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).

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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).

(% class="box" %)

(((

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).

__Event management__

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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).

(% class="box" %)

(((

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).

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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

(% class="box" %)

(((

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,

(% class="box" %)

(((

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

(% class="box" %)

(((

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,

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

Example : ddCtrl.loadTheme ('digdash');

)))

**void logout ()**

Description: Logs out the current user.

== CSS styles ==

Here is the non-exhaustive list of CSS classes used to customize the visual aspect of the dashboard.

__Banner__

**.topPanel**

Description: Change the visual appearance of the banner (border, wallpaper).

(% class="box" %)

(((

Example : .topPanel {background-color: # f1f1f1; border: 1px solid black; }

)))

**.logoTopPanel**

Description: Change the banner logo.

(% class="box" %)

(((

Example : .logoTopPanel {background: url (mon_logo.png) no-repeat; }

)))

**.userLabel**

Description: Change the text representing the user name (color, font).

(% class="box" %)

(((

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.

(% class="box" %)

(((

Example : .topPanelIconLabelPanel_Label {font-family: 'Open Sans'; color: black; }

)))

__Filter bar__

**#interactBar**

Description: Change the div containing the filter boxes.

(% class="box" %)

(((

Example : .interactBar {background-color: # f1f1f1; }

)))

**.selHierTitleDiv**

Description: Change the title of the filter box.

(% class="box" %)

(((

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.

(% class="box" %)

(((

Example : .selHierTitleDivWhite {background-color: # 009fa6; color: white; }

)))

__Tabs__

**.dd-tab-bar**

Description: Changes the bar containing the list of tabs.

(% class="box" %)

(((

Example : .dd-tab-bar {background-color: # f1f1f1; border-bottom: 1px solid # f1f1f1; }

)))

**.dd-tab-header**

Description: Change the tab.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

Example : .dd-tab-header-text {font-family: 'Open Sans'! Important; font-size: 13px! important; }

)))

__Portlets__

**.portlet**

Description: Change the portlet.

(% class="box" %)

(((

Example : .portlet {border: 1px solid # d0d0d0! Important; }

)))

**.portlet-header**

Description: Changes the header of the portlet.

(% class="box" %)

(((

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.

(% class="box" %)

(((

Example : .portlet-header-text {color: # 6d6d6d! Important; font-size: 16px! important; font-family: 'Open Sans'! important; }

)))

**.portlet-content**

Description: Changes the content of the portlet.

(% class="box" %)

(((

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.

(% class="box" %)

(((

Example : .x-tool-maximize {background-image~: url (mon_icone.png)! Important; }

)))

__Ariane file__

**.breadcrumbImg**

Description: Changes the breadcrumb reset image.

(% class="box" %)

(((

Example : .breadcrumnImg {background-image~: url (my_image.png! Important;}

1095

)))

1096

1097

**.unclickablebreadcrumb, .clickablebreadcrumb**

1098

1099

Description: Change the breadcrumb text.

(% class="box" %)

(((

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.

(% class="box" %)

(((

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.

(% class="box" %)

(((

Example : .tdMemberInactive {background-color: white! Important; color: gray! important; }

1124

)))

1125

1126

**.tdMemberSelected, .spanMemberSelected**

1127

1128

Description: Change the selected member of the slicer.

(% class="box" %)

(((

Example : .tdMembeSelected {background-color: # 009fa6! Important; border-radius: 3px! important; color: white! important; }

)))

__Filters__

**.trHeaderFilter**

Description: Changes the header of the Filter object.

(% class="box" %)

(((

Example : .trHeaderFilter {background-color: # d5d7da! Important; }

)))

**.tdFilter**

Description: Changes the content of the Filter object.

(% class="box" %)

(((

Example : .tdFilter {background-color: # f1f1f1! Important; }

)))

**.tdFilterImage**

Description: Change the filter deletion image.

(% class="box" %)

(((

Example : .tdFilterImage {background: url (mon_image.png) no-repeat # 009fa6! Important; }

)))

__Comments__

**.comments**

Description: Change the Comment object.

(% class="box" %)

(((

Example : .comments {background-color: # f1f1f1! Important; }

1173

)))

1174

1175

**.commentsDisplayAll**

1176

1177

Description: Changes the button allowing the display of all comments.

(% class="box" %)

(((

Example : .commentsDisplayAll {color: #ffffff! Important; background-color: # 009fa6! important; }

)))

**.commentsFilter**

Description: Changes the image used to apply the selection of a comment.

(% class="box" %)

(((

Example : .commentsFilter {background: url (mon_icone.png)! Important; }

)))

**.How do you say**

Description: Change the image used to edit a comment.

(% class="box" %)

(((

Example : .commentsEdit {background: url (mon_icone.png)! Important; }

)))

**.commentsRemove**

Description: Changes the image used to delete a comment.

(% class="box" %)

(((

Example : .commentsRemove {background: url (mon_icone.png)! Important; }

)))

**.commentsDate**

Description: Changes the date of the comment.

(% class="box" %)

(((

Example : .commentsDate {font-family: 'Open Sans'! Important; color: black! important; }

)))

**.commentsUser**

Description: Change the user of the comment.

(% class="box" %)

(((

Example : .commentsUser {font-family: 'Open Sans'! Important; color: black! important; }

)))

**.commentsContent**

Description: Change the content of the comment.

(% class="box" %)

(((

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.

(% class="box" %)

(((

Example : .ui-widget-header {background: # 009fa6 50% 50% repeat-x! Important; }

1247

)))

1248

1249

**.ui-widget-content**

1250

1251

Description: Changes the cursor bar.

(% class="box" %)

(((

Example : .ui-widget-content {background: # 009fa6 50% 50% repeat-x! Important; }

)))

__Loading__

**.loading**

Description: Changes the display of Loading graphic objects.

(% class="box" %)

(((

Example : .loading {border: 1px solid # d4d4d4! Important; }

)))

**.loadingImg**

Description: Change the image of the loading of graphic type objects.

(% class="box" %)

(((

Example : .loadingImg {background: url (my_image.png) no-repeat! Important; }

)))

**.loadingTxt**

Description: Change the text of the loading of graphic type objects.

(% class="box" %)

(((

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**

= APPENDICES =

== 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.

Important:

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.

Notes:

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:

. in , . out {

-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 ;

}

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

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

}

}

if (currentPage)

{

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

}

}

if (nextPage)

{

var pageDiv = document .getElementById (nextPage);

1417

if (pageDiv && pageDiv.slideable)

1418

{

1419

pageDiv.className + = "slide in"

1420

+ (slideDir == - 1 ? "right" : "left" );

}

}

return true ;

}

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" ;

}

}

}

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

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

startTime = 0 ;

startX = 0 ;

}

else

{

startTime = e .timeStamp;

1487

startX = touch ? e.touches [0 ] .pageX : e.pageX;

1488

}

1489

}, false );

1490

target.addEventListener (endEvent, function (e)

{

startTime = 0 ;

startX = 0 ;

}, false );

target.addEventListener (moveEvent, function (e)

{

if (startTime == 0 )

{

return ;

}

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

e.preventDefault ();

nextPage ();

}

else if (currentX > startX)

1518

{ // swipe right code here

e.preventDefault ();

prevPage ();

}

startTime = 0 ;

startX = 0 ;

}

}, false );

}

function onChartDrawn (doc, dm, dmsel, chart)

1529

{

1530

// also add the swipe event listener on each chart content

1531

addSwipeEventListener (doc);

}

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}**

__Examples of use:__

- Today's date: 02/05/2019

- Example 1:

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

- Example 2:

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

- Example 3:

ddCtrl.filter (new FilterOperand ('Date', '$ {filter.current.year}', '-1', '-1'));

1615

1616

→ interval type filter: 01/01/2019 - 31/12/2019

1617

1618

Wiki source code of Customisation de tableaux de bords

Sommaire