Edit a dashboard

Last modified by Aurelie Bertrand on 2023/11/13 16:45

Edit graphic objects

Dashboard widgets are displayed in the section Graphic objects. These objects are ranked in ascending order of their depth in the dashboard (in case the objects overlap).
In the example below, « Sales by year» is displayed at the bottom of the dashboard and « Product Stock » at the top :

A set of actions is available on these objects :

Copy objects : select objects, right click, then choose Copy or Ctrl +C.
Cut objets : select objects, right click, then choose Cut or Ctrl +X.
Paste objects : Paste objects using right click then Paste or typing Ctrl +V. You can paste objects at the initial position (choose Paste at the initial position) or at the position of your mouse on the screen (choose Paste at this position).
Copy objects as templates : copies objects settings without copying the objects themselves. Select the objects, right click then choose Copy as template
Paste templates : right click then choose Paste templates at the initial position or Paste templates at this position.
Remove objects : select objects, right click then choose Remove (or use CTRL+DEL keys).
Hide object : click the Hide icon to hide the object while you are editing the dashboard.
Lock object : click the Lock icon to prevent movement of the object while you are editing the dashboard.
Increase/dicrease the depth of an object : click the up or Down arrows (under the graphic objects list) to move up or down the objects in the list. Moving an object up decreases its depth in the dashboard, moving it down increases its depth.

All widgets editing functions (sizing, renaming,...) are also available after right clicking the object. These functions are described in the chapter “Edit dashboard items”

Edit dashboard itemsEdit

► Click the Edit icon cog at the top right of the widget. The Edit menu is displayed.

Using this menu, you can modify the display of the widget :
► Change name : by default, the name of the widget is the name of the selected content (information flow or static content name). Click the Change name button to modify it.
► Copy : copy the selected item
► Copy as template : Copy the parameters of the selected widget (size, position, display parameters,..) but not the widget itself.

To paste the template, right click and choose Paste template. The template can be pasted in all dashboard pages, at the same position as the object previously selected (choose Paste template(s) at the initial position) or at the mouse position (choose Paste template(s) at this position).

Drag and drop the graphic object of your choice (flow, dimension, variable,...) on the template (marked by a dotted frame). The object will get the same properties as the original object.

Note: you can copy as templates several graphical objects simultaneously or a widget container (in that case, all widgets belonging to the container will be copied as templates)

          ► Delete : remove the widget from the dashboard.
          ► Activate maximize : a button at the top right of the widget allows the user to maximize or minimize the widget
          ► Show windows border : by default, the windows border is displayed. Clear the check box if you don't want it to appear.
          ► Hide widget : hide selected widget
          ► Size and position :

allows you to define :

The position: X and Y coordinates are used for horizontal and vertical positioning. They can be defined in pixels or percentages. The percentages are relative to the page size or the widget container size (if the widget is in a widget container). If you use the pixels positioning, X=0 and Y=0 positions the widget at the top left corner of your dashboard.
The size: the width and height of the widget can be defined in pixels or percentages. The percentages are relative to the page size or the widget container size (if the widget is in a widget container).
Margins: you can define top, bottom, left and right margins in pixels.

► Depth : modify the depth at which the widget is displayed (in case several widgets overlap). Select Raise (to display the widget one level up), Lower (to display the widget one level down), Raise to top or Lower to bottom.

► CSS : Select the CSS you want to use. Select CSS type then enter the CSS (example:background-color:red) or select CSS class and enter the name of the class (CSS classes must be in <DigDashenterprise installation folder>\apache-tomcat\webapps\digdash_dashboard). Some classes are already defined in this folder (example hiddenPorlet to hide the portlet)

► Color : Select Color then select the color you want to display in the background

► Drag and drop mode : for table charts (tables, cross tables, OLAP tables, tree tables), two modes are available :

drag and drop mode: allows you to move the item in the dashboard
edit mode: allows you to edit the item (change the columns size, modify the style,...)

By default, objects use the drag and drop mode. Clear the Drag and drop mode check box to switch to edit mode.

► display menu : displays the menu on selected item (menu is used in the dashboard viewer to print the chart, save it as PDF, PPT,...)

► Export : allow to choose available type of exports (PDF, PPT, Excel or CSV). Clear the check boxes to restrict authorized exports types.
► information : displays the date of data, the flow URL (that you can use to integrate the flow in an iframe, for example) and the widget identifier.

Edit dashboard propertiesEdit

By default, a dashboard has one page. This page is named My dashboard or has the role name. You can add new pages, modify them, change the background,...

Add a dashboard page

click the + button besides the latest page of the dashboard.

Enter the name of your page. If you want to localize the name, click the Edit button and enter the value for each language.

To add a sub level to a page :

Select the page, right click and choose Add sub level. A page appears below the selected page. If you want to rename it, right click and choose Change name.
Sub-levels can be displayed as tabs or menus. To choose the visualization type, select the page, right click and choose Visualization type then Tabs or Menus.
In the following example, the user has a page for his role “Sales”. In this role two pages have been created “2013” and “2014”. This sub level has 2 pages “invoices” and “Payments tracking”. These sub levels are displayed as tabs :

if you display the sub levels as menus, the page will be displayed as follow :

Note: you can add as many sub levels as you want

Rename a page

Select the page, right click and choose Change name. Enter the name you want to use. If you want to localize the name, click the Edit button and enter the value for each language.

Hide page

Select the page, right click and choose Hide page

Remove a page

Click the cross at the top right of the page. Confirm the deletion by clicking the OK button in the confirmation dialog box.

Move a page

Drag and drop the page at the correct position

Transform widget positions to percentage

By default, widget size is defined in pixels but you can define it in percentages of the page. This allows you to view dashboards on other devices (tablets,..) without resizing objects in the pages.
To do so, right click the page ans select Transform widget positions to percentage.

Change the background

You can modify the background of all the pages of the dashboard or only change the background of one page :

To modify the background of all the pages, click the Menu icon in the toolbar (at the top right of the Dashboard Editor page), then click images manager
Click New image then select the image you want to use as a background and click Apply as background. This background will be used on all pages of the dashboard unless you have defined specific backgrounds for some pages.
To modify the background of one page, right click the page and choose Background. If you want to set a background image, click Background image, then select the image you want to use. If you want to modify the color, select Background color and select the color.

Change the foreground

To modify the items displayed in the foreground, open the foreground page, then add the items you want to display as the foreground of your dashboard pages. The items you have added are displayed on all dashboard pages.

To add a header or a footer in the foreground, create a widget (example : HTML editor) with the desired content. Click the Edit icon cog at the top right of the item. The edit menu is displayed. Check Page header or Page footer.
The selected item will be placed on top of the page if you have selected Page header or at the bottom if you have selected Page footer
The item width will be the same as the page width (100% of the page).
When you display a dashboard page, header and footer are inserted on top or at the bottom of the page.

Manage legends

By default, colors are managed independently on each chart (for example, a same area can have two different colors on two different charts).
If you want to use the same colors for several charts displayed on the same page, you must first check the option Share colors between analytics on the same page in the visualization parameters of your charts (refer to the documentation “wallet_editor_guide_en.pdf” for more information).
You can then modify the legend of the charts displayed in the dashboard.
To do so, click the Parameters icon cog in the toolbar (at the top right of the dashboard editor page), then click Legend manager.

Select a dimension value in the drop down box on the left, then select a color in the palette (or click New color to add a new one).
Click the + button on the right to select another value and define the color you want to associate to this value.

Note: The legends are managed independently for each user and role.

Manage filters

You can modify parameters of the interactive filters bar displayed at the top of the dashboard pages.

To do so, click the Parameters icon cog in the toolbar of the dashboard editor, then click Filters manager. The Filters manager dialog box opens up.

From this dialog box, you can :

Modify sort order : in the drop down box displayed besides Sort:, select A-Z for ascending sort, Z-A for descending sort or Manual. If you select Manual, drag and drop the dimensions at the desired position.

To sort dimensions by data model name, click the Data Models header. In that case, Sort order will automatically switch to Manual.

Hide element “All” : if you select this option, the element “All” won't be displayed in the values you can use to filter the dimension.

Hide elements with no values : if you select this option, values will be filtered according to values selected for other dimensions (example: if you have selected “America” for the dimension “Country”, the “state” dimension will only display American states).

Show/Hide a dimension : in the Display column, click the default column and select “Yes” to display the dimension, “No” to hide the dimension and “default” to keep the “display” parameter defined in the data model or the visualization.

The Data model column displays the model to which the dimension belongs. Click the column header to sort it.

Modifiy dashboard styles

By default, styles used in dashboards are located in the file:
<DD Install>/apache-tomcat/webapps/digdash_dashboard/Dashboard.css.
To modify the styles, you can change this file but if you update the webapps, the initial styles will be restored (for more information, refer to the documentation “customisation_en.pdf”).

Therefore, we advise modifying the styles from the CSS editor available in the dashboard editor (you must have the authorization “Customize dashboard”). The styles modified this way are stored in a file called “default.css” located in the application data folder. These styles can be saved and restored by DigDash Enterprise backup.

Dashboards use in priority the styles stored in default.css. If no style is found in default.css, styles used are “dashboard.css” styles.

To modify CSS styles from the dashboard editor, click the Parameters icon cog in the toolbar of the dashboard editor, then click CSS Editor. Click Graphic objects then select objects you want to modify. CSS classes are displayed. Modify the styles then click OK to to save them.

Execute Javascript code

To execute JavaScript, click the Parameters icon cog in the toolbar (at the top right of the Dashboard Editor page), then click Javascript editor.

Enter the JavaScript you want to execute then click OK.

Type the first letters of a function to get the full list of matching functions (example: by typing « add », the function ddCtrl.addVariable is displayed in the list of proposals).

The JavaScript code is stored in a file js-default.js.

This JavaScript file can include other JavaScript files. To create a new JavaScript, open the JavaScript editor menu, then select New JavaScript. Enter the file name then the JavaScript you want to execute.

To include this JavaScript in another .js file, use the function includeJS (example: includeJS('file.js') ;

Note: You can find descriptions of JavaScript function used to manage dashboard events in the documentation customisation_en.pdf (display of a page, user connection,...).

Customize role pages

You can customize role pages to display personalized view of the page. By default, user will see the page of the role, unless a personalized view of the page exists.

To allow customization of a page, right click the page, then check Allow customization of the page.

Once you have allowed page customization, users who want to personalize their page must right click the page and then select Personalized view. They can then edit their personalized view of the page.

To delete a personalized view, select Back to the role page. You are asked whether you want to remove the personalized view. Click OK to remove it.

Protect role pages

You can protect edition of roles pages. To protect a page, right click the page then select Protect page

A user can edit a protected page only if he has the appropriate role and the authorization « edit protected dashboard pages » .