DigDash Enterprise customization

Last modified by Aurelie Bertrand on 2021/10/11 15:43

This document provides additional technical information to assist with advanced customization of DigDash Enterprise.

DigDash Enterprise can be further customized by modifying or using the following:

Customizable elements visualizations:

  • Additional cartographic module

Customizable Dashboard Elements:

  • Javascript functions (Dashboard API)

Appendices:

Example : Support for swiping left and right to change the Dashboard page (Touch pads)

Customizable elements Visualizations

Additional cartographic module

To add additional maps, consult the documentation mapguide

Customizable Dashboard Elements

Javascript functions (Dashboard API)

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.

Thanks to these functions, you can order a page change, filtering on a given dimension, change a DigDash variable, etc.

Each function is called on an implicit ddCtrl object defined by the dashboard engine. Here is the list of functions:

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

A parameter in square brackets [] is optional and may be omitted if it is not necessary in the context.

Variable functions (DDVariables)

void ddCtrl.changeVariable (name, value)

Description: Change the value of the variable <name>.

Example : <a href = "javascript:ddCtrl.changeVariable('ratioEuro', 1.30) "> EuroDollar: 1.30 </a>

(Number) ddCtrl.getDDVar (name)

Description: Returns the value of the variable <name>.

Example : <a href = "javascript: ddCtrl.changeVariable ('ratioEuro', ddCtrl.getDDVar('ratioEuro') + 0.1) "> Increase EuroDollar </a>

Data filtering and navigation functions

FilterOperand (dimension, member, hierarchy, level, formatted member, bAddFilter, bExcludedFilter)

Description: Object used to specify the filter to apply.

Example : <a href=" javascript: ddCtrl.filter('Dim Géo', new FilterOperand('Dim Géo','France','Géo','Pays', false, false))"> Filter France </ a >

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

FilterOperandContinuous (dimension, min, max, bExcluFiltre)

Description: Object used to specify the interval type filter to apply on a continuous dimension.

Example : <a href = " javascript: 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>

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

void ddCtrl.filter (dimension, member)

Description: filter on one dimension.

Example : <a href = "javascript:ddCtrl.filter('Country', 'France') "> Filter France </a>

Note: The specified member filters on the hierarchy and the current level for this dimension.

void ddCtrl.filter (oFilterOperand)

Description: filter on a dimension by specifying a hierarchy and a level.

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.

void ddCtrl.filterAndChangePage (page, dimension, member)

Description: filter on one dimension and change page.

Example : <a href = "javascript:ddCtrl.filterAndChangePage('Production.Details Country', 'Country', 'France') "> France details </a>

void ddCtrl.setFilterMinMax (dimension, min, max)

Description: filter on a continuous dimension by specifying a min value and a max value. Note: a DigDash date is a timestamp in seconds.

Example: <a href = "javascript:ddCtrl.setFilterMinMax('Date', new Date (2014, 0, 1) .getTime () / 1000, new Date (). GetTime () / 1000 "> 2014 to date </a>

(Chain Table) ddCtrl.getDimensionFilter (dimension [, bContinue])

Description: Returns the list of elements filtered on the dimension (continuous or discrete).

Example : <a href = "javascript: alert (ddCtrl.getDimensionFilter('Country')) "> Filters On Country </a>

void ddCtrl.isDimensionFiltered (dimension [, bContinue])

Description: Returns true if the dimension (continuous or discrete) is filtered. Returns false otherwise.

Example : <a href = "javascript: alert (ddCtrl.isDimensionFiltered('Country')) "> Filtered Country? </a>

void ddCtrl.removeAllFilters ()

Description: Removes all filters from the dashboard.

Example : <a href = " javascript:ddCtrl.removeAllFilters() "> Reset </a>

void ddCtrl.removeAllFiltersCurrentPage ()

Description: Removes filters from the current page.

Example : <a href = "javascript:ddCtrl.removeAllFiltersCurrentPage() "> Reset </a>

void ddCtrl.removeFilters (dimension [, bContinue])

Description: Removes the current filters on the dimension (continuous or discrete).

Example: <a href = "javascript:ddCtrl.removeFilters('Country') "> All countries </a>

void ddCtrl.beginSelection ()

void ddCtrl.commitSelection ()

Description: In conjunction with the ddCtrl.filter filter function. Allows you to combine several filters on different dimensions without performing each filter (optimization).

Example : <a href = "javascript:ddCtrl.beginSelection(); ddCtrl.filter ('Country', 'France'); ddCtrl.filter ('Year', '2013');ddCtrl.commitSelection() "> France in 2013 </a>

void ddCtrl.setDimensionNavigation (flow, dimension, bNavigation)

Description: Changes the authorization to navigate on a dimension for the specified flow.

Example : <a href = "javascript:ddCtrl.setDimensionNavigation('chart1', 'Region', true) "> Activate navigation on Region </a>

(String array) ddCtrl.getCurrentDrill (portlet, dimension [, hierarchy])

Description: Returns the dimension, hierarchy and explored level of a graph in the form of a table.

Note: The function can only be called on a graph having a "Navigate in hierarchy" or "Change dimension" interaction.

Example:

ddCtrl.addChartRefreshListener ( function (doc, dm, dmsel, chart) {
 if (chart.title == 'My chart' ) {
 var curDrill = ddCtrl.getCurrentDrill (doc.frameId, 'Region' , 'Geographic' );
 var dim = curDrill [ 0 ];
 var yesterday = curDrill [ 1 ];
 var lvl = curDrill [ 2 ];
 alert ( "The exploration is" + hier + "/" + lvl + "on dimension" + dim);
 }
 });

(BreadPath) ddCtrl.getBreadPath (portlet, dimension)

Description: Returns the current navigation path (BreadPath) on a dimension in a graph. This object can be used by drillTo (see below).

Example : <a href = "javascript:ddCtrl.drillTo(portletId2, 'Location', ddCtrl.getBreadPath(portletId1, 'Location')) "> Current Location Details (Chart 2) </a>

void ddCtrl.drillTo (portlet, dimension, oBreadPath)

Description: Navigate in a graph on a hierarchy of the chosen dimension, using a navigation path defined by the BreadPath object.

Example: See example above (getBreadPath)

void ddCtrl.drillDown (portlet, dimension, hierarchy, member, formatted member)

Description: Navigate on a hierarchy of the chosen dimension to the member specified at the lower level.

Note: The action is performed on all graphs sharing the same navigation interaction ("synchronized drill").

Example : <a href = "javascript:ddCtrl.drillTo(portletId, 'Lieu', 'Géographique', 'FR', 'France') "> France details </a> 0

void ddCtrl.resetDrill (portlet, dimension [, hierarchy])

Description: Resets navigation on the dimension hierarchy.

Note: The action is performed on all graphs sharing the same navigation interaction ("synchronized drill").

Example : <a href = "javascript:ddCtrl.resetDrill(portletId, 'Lieu') "> Back to the world map </a>

(Number | String) ddCtrl.getDataModelDate (dmId, bFormat)

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

Note: The timestamp is the number of milliseconds since January 1, 1970.

Example : <a href = "javascript: alert (ddCtrl.getDataModelDate('a1234567890 ..', true)) "> Display the date of the data </a>

(Number | String) ddCtrl.getFlowDate (stream, bFormat)

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

Note: The timestamp is the number of milliseconds since January 1, 1970.

Example : <a href = "javascript: alert (ddCtrl.getFlowDate(fluxId, true)) "> Display the date of the flow </a>

Data request functions

(Number | String) ddCtrl.getResultCubeValue (flow, measure, lMembers, bFormatted)

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.

Note: The list of axis members must specify one and only one member for each axis usedin the graph, and this in the natural order of the axes of the graph. The measure parameter is the measure ID.

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:
 <a href = "javascript: alert (ddCtrl.getResultCubeValue('chart1', 'Marge', ['2013', 'France'], true)) "> Show the margin for France in 2013 </a>

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

(Row table) ddCtrl.getResultCubeRowSet (stream, oQueryMembersAxes [, bFormatted])

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.

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

Example : To retrieve the rows corresponding to the year 2014 and to the person 'John' from a cube resulting from a chart 'chart1':
 <a href = "javascript: alert (ddCtrl.getResultCubeRowSet('chart1', {'Year': '2014', 'Person': 'John'}) [0] [2]) "> Show John's first value in 2014 </a>

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.

(Number) ddCtrl.getResultCubeLinesCount (stream)

Description: Returns the number of flattened rows in the result cube.

Example : <a href = "javascript: alert (ddCtrl.getResultCubeLinesCount ('chart1') "> Number of rows </a>

Dashboard functions

void ddCtrl.loadJS (urlJS)

Description: Loads a Javascript file from a URL.

Example (in the Javascript editor):

ddCtrl.loadJS(' http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js ');
 var hash = CryptoJS.MD5 ("The message");

void ddCtrl.includeJS (nameJS)

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.

Example (in the Javascript editor):

ddCtrl.includeJS('functions_date.js');

void ddCtrl.changePage (page)

void ddCtrl.switchPage (page)

Description: Changes the current page to <page>.

Example : <a href = "javascript:ddCtrl.changePage('Général.Index') "> Back to index </a>

void ddCtrl.nextPage ()

Description: Change to the next page (same role).

Example : <a href = "javascript:ddCtrl.nextPage() "> Next page </a>

void ddCtrl.prevPage ()

Description: Change to the previous page (same role).

Example : <a href = "javascript:ddCtrl.prevPage() "> Previous page </a>

(Boolean) ddCtrl.isCurrentPage (page)

Description: Returns true (true) if the current page is the identifier page specified in parameter. Returns false otherwise.

Note: This function replaces the deprecated function ddCtrl.getCurrentPage ()

(String) ddCtrl.getCurrentPage ()

Description: Returns the name of the current page in the following format: < Role name>. <Page name> .

Deprecated : This function is no longer supported since November 2014 due to a change in format of the page names. Please use the functionddCtrl.isCurrentPage (page) instead.

(Boolean) canChangeCurrentPage (page)

Description: Returns true if it is possible to change to the <page> page. Returns false otherwise.

void ddCtrl.hidePage (page)

Description: Hides the tab of the page <page> if it is visible, without changing the current page.

Example : <a href = "javascript:ddCtrl.hidePage('Production.Country Details'); ddCtrl.changePage('Production.Global') "> Leave details </a>

void ddCtrl.showPage (page)

Description: Displays the tab of the page <page> if it is hidden, without changing the current page.

Example : <a href = "javascript:ddCtrl.showPage('Production.Country Details'); ddCtrl.changePage('Production.Details Country') "> Show details </a>

void ddCtrl.openFlowInWindow (stream, iWidth, iHeight)

Description: Opens a stream in a popup window of given width and height.

Example : <a href = "javascript:ddCtrl.openFlowInWindow(fluxId, 250, 200) "> View product breakdown </a>

void ddCtrl.openPortletInWindow (portlet, iWidth, iHeight)

Description: Opens a portlet in a popup window of given width and height.

Example : <a href = "javascript:ddCtrl.openPorletInWindow(portletId, 250, 200) "> Show product breakdown </a>

void ddCtrl.openFlowInWindowWithFilter (stream, iWidth, iHeight, dimension, member [, dimension, member, ...])

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

Note: Filters will only be applied on the new window.

Example : <a href = "javascript:ddCtrl.openFlowInWindowWithFilter(fluxId, 250, 200, 'Year', '2014', 'Country', 'France') "> Show details France 2014 </a>

void ddCtrl.openPortletInWindowWithFilter (portlet, iWidth, iHeight, dimension, member [, dimension, member, ...])

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

Note: Filters will only be applied on the new window.

Example : <a href = "javascript:ddCtrl.openPortletInWindowWithFilter(portletId, 250, 200, 'Year', '2014', 'Country', 'France') "> Show details France 2014 </a>

void ddCtrl.openFlowInElement (div, stream, iWidth, iHeight)

Description: Opens a stream in an existing DIV element.

Example : <a href = "javascript:ddCtrl.openFlowInElement('myDiv', fluxId, 250, 200) "> Show product breakdown </a>

void ddCtrl.openDocument (serverName, fileName)

Description: Opens a document in a new window.

Example : <a href = "javascript:ddCtrl.openDocument(' Common Datasources', 'catalog_produits.pdf') "> View the product catalog </a>

void ddCtrl.uploadDocument (serverName, fileName)

Description: Upload a document to a document server. Opens a file selection window on the workstation.

Example : <a href = "javascript:ddCtrl.uploadDocument('Common Datasources', 'catalog_produits.pdf') "> Upload the product catalog </a>

void ddCtrl.refreshDashboard ()

Description: Refreshes the dashboard (same behavior as the Refresh button in the dashboard header).

Example : <a href = "javascript:ddCtrl.refreshDashboard() "> Refresh </a>

void ddCtrl.refreshFlow (flow [, event])

Description: Refreshes the specified stream with an optional event name.

Example : <a href = "javascript:ddCtrl.refreshFlow(flowId, null) "> Refresh the flow </a>

void ddCtrl.refreshFlows ([event])

Description: Refreshes all dashboard flows with an optional event name.

Example : <a href = "javascript:ddCtrl.refreshFlows('MAJ_QUOTIDIENNE') "> Refresh all </a>

(String) ddCtrl.getCurrentRole ()

Description: Returns the role identifier of the current page or the user name for a user page.

(String) ddCtrl.getRole (page)

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.

void ddCtrl.hidePortlet (portlet)

void ddCtrl.showPortlet (portlet)

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.

Example : <a href = "javascript:ddCtrl.showPortlet(portletId) "> View Details </a>

void ddCtrl.setPortletPos (portlet, x, y)

void ddCtrl.setPortletSize (portlet, width, height)

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.

Example : <a href = "javascript:ddCtrl.setPortletPos(portletId, 100, 100); ddCtrl.setPortletSize(portletId, 600, 400) "> Enlarge Details </a>

void ddCtrl.setPortletMargins (portlet, marginTop, marginRight, marginBottom, marginLeft)

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.

Example : <a href = "javascript:ddCtrl.setPortletPos(portletId, 10, 10, 10, 10); ddCtrl.setPortletMargins(portletId, 600, 400) "> Change the margins </a>

(Boolean) ddCtrl.chartIsHidden (portlet)

Description: Returns true (true) when the portlet is hidden (see hideChart) and false (false) otherwise.

void ddCtrl.genTemplatePPT (stream)

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.

Example : <a href = "javascript:ddCtrl.genTemplatePPT('Id Fabrique De Document') "> Load PPT </a>

void ddCtrl.exportCurrentPageAsPPT ()

Description: Saves the current page of the dashboard in PPT format. The user can download the PPT generated.

Example : <a href = "javascript:ddCtrl.exportCurrentPageAsPPT() "> Load this page in PPT format </a>

void ddCtrl.exportPageAsPPT (role, page)

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

Example : <a href = " javascript:ddCtrl.exportPageAsPPT('Telecom', 'telecom_ventes_1') "> Load the PPT of telecom sales </a>

void ddCtrl.genTemplatePDF (stream)

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.

Example : <a href = "javascript:ddCtrl.genTemplatePDF('Id Fabrique De Document') "> Load PDF </a>

void ddCtrl.exportCurrentPageAsPDF ()

Description: Saves the current page of the dashboard in PDF format. The user can download the generated PDF.

Example : <a href = "javascript:ddCtrl.exportCurrentPageAsPDF() "> Load this page in PDF format </a>

void ddCtrl.exportPageAsPDF (role, page)

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

Example : <a href = " javascript:ddCtrl.exportPageAsPD F('Telecom', 'telecom_ventes_1') "> Load the PDF of telecom sales </a>

void ddCtrl.genTemplateXLS (stream)

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.

Example: <a href = "javascript:ddCtrl.genTemplateXLS('Id Fabrique De Document') "> Load the XLS </a>

void ddCtrl.exportAsPDF (stream)

Description: Save the stream in PDF. The user can download the generated PDF.

void ddCtrl.exportAsPPT (stream)

Description: Save the flow in PPT. The user can download the PPT generated.

void ddCtrl.exportAsXLS (stream)

Description: Saves the stream in XLS. The user can download the generated XLS.

void ddCtrl.exportAsXLSWithoutStyles (stream)

Description: Saves the stream in XLS without applying table styles for more performance. The user can download the generated XLS.

void ddCtrl.exportAsCSV (stream)

Description: Saves the stream in CSV (Fields Separated by Commas). The user can download the generated CSV.

void ddCtrl.saveDashboardState (name, bDefault)

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.

(String) ddCtrl.getCurrentPortletInGroupOfTabs (portletTabId)

Description: Returns the identifier of the current portlet of the Tab group object. The porletTabId parameter is the identifier of the Tab group.

void ddCtrl.changePortletInGroupOfTabs (portletTabId, portletId)

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.

(Table) ddCtrl.getCurrentPagePath ()

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.

The event diagram is available in Annex III.2

void ddCtrl.addChartBeforeRefreshListener (Function)

Description: Adds a function to listen to the event triggered before the graph is refreshed.

Example : ddCtrl.addChartBeforeRefreshListener (function (doc, dm, dmsel, chart, errorMsg) {alert ("The chart" + chart.title + "will be refreshed");});

void ddCtrl.addChartRefreshListener (Function)

Description: Adds a function to listen to the event triggered after the graph is refreshed.

Example : ddCtrl.addChartRefreshListener (function (doc, dm, dmsel, chart, errorMsg) {alert ("The chart" + chart.title + "has been refreshed");});

void ddCtrl.addChartDrawnListener (Function)

Description: Adds a function to listen to the event triggered when the graph has finished being drawn (first display).

Example : ddCtrl.addChartDrawnListener (function (doc, dm, dmsel, chart, errorMsg) {alert ("The chart" + chart.title + "has been drawn");});

void ddCtrl.addChartModelReadyListener (Function)

Description: Adds a function to listen to the event triggered before drawing the graph (first display).

Example : ddCtrl.addChartModelReadyListener (function (doc, dm, dmsel, chart, errorMsg) {alert ("The graph" + chart.title + "will be drawn");});

void ddCtrl.addDimensionFilterListener (Function)

Description: Adds a function to listen to the event triggered after filtering a dimension.

Example : ddCtrl.addDimensionFilterListener (function (dimension, hierarchy, level, members, membersFormated, bExclude, min, max) {alert ("The dimension" + dimension + "has been filtered on" + membersFormated);});

void ddCtrl.addVariableChangeListener (Function)

Description: Adds a function to listen to the event triggered after changing a variable.

Example : ddCtrl.addVariableChangeListener (function (variable, value) {alert ("The variable" + variable + "has changed, new value:" + value);});

Dashboard event management

void ddCtrl.addCurrentPageLoadListener (Function)

Description: Adds a function to listen to the event triggered when the dashboard page is fully loaded.

Example : ddCtrl.addCurrentPageLoadListener (function (currentPage) {alert ("The page" + currentPage + "has been loaded");});

void ddCtrl.addCurrentPageChangeListener (Function)

Description: Adds a function to listen to the event triggered during a page change.

Example : ddCtrl.addCurrentPageChangeListener (function (currentPage, bFirstTime) {alert ("The page is now" + currentPage);});

void ddCtrl.addUserLoggedListener (Function)

Description: event triggered once the user is authenticated. May be useful when using the ddCtrl.getUserAttribute function.

Example : ddCtrl.addUserLoggedListener (function () {alert ("You are authenticated");});

void ddCtrl.addPortletHiddenListener (Function)

Description: event triggered when the status of the object has changed from visible to hidden.

Example : ddCtrl.addPortletHiddenListener (function (portletId) {alert ("Object is hidden");});

void ddCtrl.addPortletVisibleListener (Function)

Description: event triggered when the status of the object has changed from hidden to visible.

Example : ddCtrl.addPortletVisibleListener (function (portletId) {alert ("Object is visible");});

void ddCtrl.addPortletCollapseListener (Function)

Description: event triggered when the user clicks on the icon used to hide a retractable element

Example : ddCtrl.addPortletCollapseListener (function (portletId) {alert ("Object will be hidden");});

void ddCtrl.addPortletCollapsedListener (Function)

Description: event triggered once the retractable element is hidden,

Example : ddCtrl.addPortletCollapsedListener (function (portletId) {alert ("Object is hidden");});

void ddCtrl.addPortletExpandListener (Function)

Description: event triggered when the user clicks on the icon allowing the display of a retractable element

Example : ddCtrl.addPortletExpandListener (function (portletId) {alert ("The object will be displayed");});

void ddCtrl.addPortletExpandedListener (Function)

Description: event triggered once the retractable element is displayed,

Example : ddCtrl.addPortletExpandedListener (function (portletId) {alert ("Object is displayed");});

void ddCtrl.addGroupOfTabsChangeListener (Function)

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.

Example : ddCtrl.addGroupOfTabsChangeListener (function (portletTabId, curPortletId) {alert ("The current portlet is:" + curPortletId);});

void ddCtrl.addDocumentUploadListener (Function)

Description: event triggered when the user adds a file via the dashboard.

Example : ddCtrl.addDocumentUploadListener (function (serverName, filesName) {alert ("The file" + filesName [0] + "has been added");});

Miscellaneous functions

(Array of strings) ddCtrl.getUserRoles ()

Description: Returns the list of identifiers of the roles of the logged in user.

(Associative array of strings / booleans) ddCtrl.getUserACLs ()

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.

Example : if (ddCtrl.getUserACLs () ['SaveAsPPT']) alert ('You can save in PPT');

List of all possible rights:

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

(String) ddCtrl.getUserAttribute (attr)

Description: Returns the LDAP attribute <attr> of the user.

(String) ddCtrl.getUserAttribute (attr, Function)

Description: Returns the LDAP attribute <attr> of the user via an asynchronous call function.

Example : ddCtrl.getUserAttribute ('displayName', function (attrVal) {alert (attrVal)});

(String) ddCtrl.getSessionAttribute (attr)

Description: Returns the <attr> attribute of the user session.

See the tutorial Session variables (session_variables_tutorial_en.pdf) for more information on session variables.

(String) ddCtrl.getSessionAttribute (attr, Function)

Description: Returns the <attr> attribute of the user session via an asynchronous call function.

Example : ddCtrl.getSessionAttribute ('regionChoisie', function (attrVal) {alert (attrVal)});

See the tutorial Session variables (session_variables_tutorial_en.pdf) for more information on session variables.

void ddCtrl.setSessionAttribute (attr, value)

Description: Updates the <attr> attribute of the user session with the specified value.

Example : ddCtrl.setSessionAttribute ('regionChoisie', 'France');

See the tutorial Session variables (session_variables_tutorial_en.pdf) for more information on session variables.

(String) ddCtrl.getServerAttribute (attr)

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.

(String) ddCtrl.getServerAttribute (attr, Function)

Description: Returns the <attr> attribute of the server via an asynchronous call function.

Example : ddCtrl.getSessionAttribute ('serverMode', function (attrVal) {alert (attrVal)});

See the advanced server configuration document (guide_avance_systeme_fr.pdf) for more information on server variables.

void loadCSS (cssFile)

Description: Loads a CSS file.

void ddCtrl.loadTheme (cssTheme)

Description: Loads a DigDash CSS theme on the dashboard.

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

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

.logoTopPanel

Description: Change the banner logo.

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

.userLabel

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

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

.topPanelIconLabelPanel_Label

Description: Changes the menu to the right of the banner.

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

Filter bar

#interactBar

Description: Change the div containing the filter boxes.

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

.selHierTitleDiv

Description: Change the title of the filter box.

Example : .selHierTitleDiv {background-color: # d5d7da; border-radius: 4px; }

.selHierTitleDivWhite

Description: Change the title of the filter box when hovered over the mouse.

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

Tabs

.dd-tab-bar

Description: Changes the bar containing the list of tabs.

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

.dd-tab-header

Description: Change the tab.

Example : .dd-tab-header {background-color: # f1f1f1! Important; border-right: 1px solid #cccccc; }

.dd-tab-header-selected

Description: Change the selected tab.

Example : .dd-tab-header-selected {background-color: # 009fa6! Important; color: white! important; }

.dd-tab-header-text

Description: Change the text of the tab.

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

Portlets

.portlet

Description: Change the portlet.

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

.portlet-header

Description: Changes the header of the portlet.

Example : .portlet-header {background-color: #eeeeee! Important; border-bottom: 1px solid # d0d0d0! important; }

.portlet-header-text

Description: Changes the text of the portlet header.

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.

Example : .portlet-content {background-color: white! Important; }

.x-tool-maximize, .x-tool-gear, .x-tool-help, .x-tool-restore, .x-tool-alert, .x-tool-comment

 Description: Changes the icons displayed in the portlet header.

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

Ariane file

.breadcrumbImg

Description: Changes the breadcrumb reset image.

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

.unclickablebreadcrumb, .clickablebreadcrumb

Description: Change the breadcrumb text.

Example : .unclickablebreadcrumb, .clickablebreadcrumb {color: # 6d6d6d! Important; }

Vertical / horizontal slicers

.tdMemberActive, .spanMemberActive

Description: Changes the member of the slicer with values.

Example : .tdMemberActive {background-color: # d5d7da! Important; border-radius: 5px! important; color: black! important; }

.tdMemberInactive, .spanMemberInactive

Description: Change the member of the slicer with no values.

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

.tdMemberSelected, .spanMemberSelected

Description: Change the selected member of the slicer.

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

Filters

.trHeaderFilter

Description: Changes the header of the Filter object.

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

.tdFilter

Description: Changes the content of the Filter object.

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

.tdFilterImage

Description: Change the filter deletion image.

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

Comments

.comments

Description: Change the Comment object.

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

.commentsDisplayAll

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

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

.commentsFilter

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

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

.How do you say

Description: Change the image used to edit a comment.

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

.commentsRemove

Description: Changes the image used to delete a comment.

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

.commentsDate

Description: Changes the date of the comment.

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

.commentsUser

Description: Change the user of the comment.

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

.commentsContent

Description: Change the content of the comment.

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

Sliders (slicers and variables)

.ui-widget-header

Description: Changes the cursor bar to interval mode.

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

.ui-widget-content

Description: Changes the cursor bar.

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

Loading

.loading

Description: Changes the display of Loading graphic objects.

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

.loadingImg

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

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

.loadingTxt

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

Example : .loadingTxt {font-family: 'Open Sans'! Important; }

The CSS selectors #dashboard_editor and #dashboard_viewer allow you to differentiate the dashboard in edit mode from the dashboard in consultation mode.

Migration of CSS styles (all versions to 2017R2, new dashboard)

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:

  • #viewportPanel should be replaced by #dashboard_viewer
  • .x-tab-strip-inner, .x-tab-left, .x-tab-right should be replaced by .dd-tab-header
  • .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
  • .x-tab-strip span.x-tab-strip-text should be replaced by .dd-tab-header-text
  • .x-panel must be replaced by .portlet
  • .x-panel-header must be replaced by .portlet-header
  • .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)

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

It shows the addition of new CSS styles to the dashboard, as well as the addition of custom Javascript.

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.

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.

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.

If the test browser chosen does not display your modifications after saving the file (s) concerned, remember to clear the browser cache.

Page change animation (CSS)

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 ;
         -webkit- animation-duration : 350 ms ;
}
. slide . in . right {
         -webkit- transform : translateX ( 0 );
         -webkit- animation-name : slideinfromright;
}
. slide . out . right {
         -webkit- transform : translateX (100 % );
         -webkit- animation-name : slideouttoright;
}
. slide . in . left {
         -webkit- transform : translateX ( 0 );
         -webkit- animation-name : slideinfromleft;
}
. slide . out . left {
         -webkit- transform : translateX ( 100 % );
         -webkit- animation-name : slideouttoleft;
}
@ -webkit-keyframes slideinfromright {
         from { -webkit- transform : translateX ( 100 % ); }
         to { -webkit- transform : translateX ( 0 ); }
}
@ -webkit-keyframes slideinfromleft {
         from { -webkit- transform : translateX ( -100 % ); }
         to { -webkit- transform : translateX ( 0 ); }
}
@-webkit-keyframes slideouttoleft {
         from { -webkit- transform : translateX ( 0 ); }
         to { -webkit- transform : translateX ( -100 % ); }
}
@ -webkit-keyframes slideouttoright {
         from { -webkit- transform : translateX ( 0 ); }
         to { -webkit- transform : translateX ( 100 % ); }
}
. x-hide-display . slide . out {
         position : absolute ;
         left : 0 px ;
         height : 0 px ! important ;
         background-color : red ;
         display : block ! important ;
}

These classes define the different CSS animations that we will use for moving pages when changing the page of the dashboard.

Save the dashboard.css file .

Page change animation (Javascript)

Open the <DDE install> /apache-tomcat/digdash_dashboard/js-dashboard.js file for editing. Add the following lines to the end of this file:

function canChangeCurrentPage (nextPage)
{
   var currentPage = getCurrentPage ();
   var slideDir = - 1 ; // slide to left
   if (currentPage && nextPage
   && ddCtrl.pageList [currentPage] && ddCtrl.pageList [nextPage])
    {
       if (ddCtrl.pageList [currentPage] .role
       ! = ddCtrl.pageList [nextPage] .role)
        { // role change
             return true ; // no slide
       }
       // check direction to slide
       if(ddCtrl.pageList [currentPage] .pos
       > ddCtrl.pageList [nextPage] .pos)
        { // slide to right
           slideDir = 1 ; // slide to right
       }
    }
   if (currentPage)
    {
       var pageDiv = document .getElementById (currentPage);
       if (pageDiv && pageDiv.slideable)
        {
            pageDiv.className + = "slide out"
               + (slideDir == - 1 ? "left" : "right" );
            pageDiv.style.top = pageDiv.parentNode.offsetTop
               + "px" ; // fix a shift issue
       }
    }
   if (nextPage)
    {
       var pageDiv = document .getElementById (nextPage);
       if (pageDiv && pageDiv.slideable)
        {
            pageDiv.className + = "slide in"
               + (slideDir == - 1 ? "right" : "left" );
        }
    }
   return true ;
}

function animEndListener (ev)
{ // remove animation styles classes at the end of animation
   var pObj = ev.target;
    pObj.className = pObj.className.replace ( / \ sslide / g , "" );
    pObj.className = pObj.className.replace ( / \ sin / g , "" );
    pObj.className = pObj.className.replace ( / \ sout / g , "" );
    pObj.className = pObj.className.replace ( / \ sright / g , "" );
    pObj.className =pObj.className.replace ( / \ sleft / g , "" );
}

function currentPageChanged (page, firstChange)
{
   if (firstChange && touch
       / * comment touch condition to debug on chrome * / )
    {
       var pageDiv = document .getElementById (page);
       if (pageDiv)
        {
            pageDiv.slideable = true ;
            pageDiv.addEventListener ( "webkitAnimationEnd" ,
                animEndListener, false );
            addSwipeEventListener (pageDiv);
            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.

The currentPageChanged (page) and canChangeCurrentPage (page, firstChange) functions are called by the dashboard engine. By default they are not implemented:

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

Left / right swipe gesture detection (Javascript)

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:

var maxTime = 150 , // allow movement if <150 ms  
 maxDistance = 100 , // swipe movement of 100 pixels min to trigger
 startX = 0 ,
  startTime = 0 ,
  touch = "ontouchend" in document ,
  startEvent = (touch) ? 'touchstart' : 'mousedown' ,
  moveEvent = (touch) ? 'touchmove' : 'mousemove' ,
  endEvent =(touch) ? 'touchend' : 'mouseup' ;

function addSwipeEventListener (target)
{
    target.addEventListener (startEvent, function (e)
    {
       if (startTime ! = 0 )
        { // already started (multitouch gesture) => cancel
           startTime = 0 ;
            startX = 0 ;
        }
       else
        {
            startTime = e .timeStamp;
            startX = touch ? e.touches [0 ] .pageX : e.pageX;
        }
    }, false );
    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,
        currentDistance =
            (startX === 0 ) ? 0 : Math .abs (currentX - startX),
        currentTime = e.timeStamp;
       if (currentTime - startTime < 50 )
        { // prevent default at the begining of the swipe
           e.preventDefault ();
        }
       if (currentTime - startTime < maxTime
        && currentDistance > maxDistance)
        {
           if (currentX < startX)
            {     // swipe left code here
                e.preventDefault ();
                 nextPage ();
            }
           else if (currentX > startX)
            {     // swipe right code here
                e.preventDefault ();
                 prevPage ();
            }
            startTime = 0 ;
            startX = 0 ;
        }
    }, false );
}

function onChartDrawn (doc, dm, dmsel, chart)
{
   // also add the swipe event listener on each chart content
   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.

Save the js-dashboard.js file .

Dashboard events diagram

customization_en_html_abafeb3784b894af.gif

 

Filtering on dates: Use of keywords

It is possible to use keywords allowing to filter on a date dimension, here is the list of keywords:

Date calculated from today's date:

  • Current year: $ {filter.current.year}
  • Current semester: $ {filter.current.semester}
  • Current quarter : $ {filter.current.quarter}
  • Current month: $ {filter.current.month}
  • Current week: $ {filter.current.week}
  • Current day: $ {filter.current.day}
  • First day of current year to current day: $ {filter.current.yearToDay}
  • First day of current month to current day: $ {filter.current.monthToDay}
  • Previous year: $ {filter.current.previousYear}
  • Previous semester: $ {filter.current.previousSemester}
  • Previous quarter : $ {filter.current.previousQuarter}
  • Previous month: $ {filter.current.previousMonth}
  • Previous week: $ {filter.current.previousWeek}
  • Previous day: $ {filter.current.previousDay}
  • Rolling year: $ {filter.current.slidingYear}
  • Rolling semester: $ {filter.current.slidingSemester}
  • Rolling term : $ {filter.current.slidingQuarter}
  • Rolling month: $ {filter.current.slidingMonth}
  • Slippery week: $ {filter.current.slidingWeek}

Date calculated from the last date of the data:

  • Current year  :  $ {filter.data.year}
  • Current semester: $ {filter.data.semester}
  • Current quarter : $ {filter.data.quarter}
  • Current month: $ {filter.data.month}
  • Current week: $ {filter.data.week}
  • Current day: $ {filter.data.day}
  • First day of current year to current day: $ {filter.data.yearToDay}
  • First day of current month to current day: $ {filter.data.monthToDay}
  • Previous year: $ {filter.data.previousYear}
  • Previous semester: $ {filter.data.previousSemester}
  • Previous quarter : $ {filter.data.previousQuarter}
  • Previous month: $ {filter.data.previousMonth}
  • Previous week: $ {filter.data.previousWeek}
  • Previous day: $ {filter.data.previousDay}
  • Rolling year: $ {filter.data.slidingYear}
  • Rolling semester: $ {filter.data.slidingSemester}
  • Rolling term : $ {filter.data.slidingQuarter}
  • Rolling month: $ {filter.data.slidingMonth}
  • Slippery week: $ {filter.data.slidingWeek}

Examples of use:

- Today's date: 02/05/2019

- Example 1:

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

→ if Year level found, filter on 2019

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

- Example 2:

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

→ if the specified hierarchy and level are found, filter on it

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

- Example 3:

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

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