Design tips

1. Overview

A collection of design tips and miscellaneous how-tos for designing dashboards, reports, and other views in Dundas BI.

2. Brush editor

In Dundas BI, color settings can be set in the Properties window using a number of different formats, including hex codes and RGB/RGBA values.

These can make it easier to paste in an existing color you have from outside of Dundas BI. You can also copy the hex code from one property in Dundas BI and paste it into another.

To set up more complex fills or backgrounds than a solid color, change the Brush dropdown from Solid to other options such as a Linear or Radial gradient, or an Image.

3. Default font settings

Define the font settings for the whole dashboard or template. All items on the dashboard will default to these settings, but you can still override them when necessary by setting their font properties separately.

With nothing selected on the dashboard, open the Properties panel and go to the Text tab.

4. Re-Size action

Add a Re-Size script action on a view such as a dashboard so you can respond when the view is resized. This may occur when the user resizes their browser or when the orientation is changed on the user's device. But note that orientation changes are not always detected because some devices fire a different event in this situation.

Scripting the Re-Size action may be useful for responsive design. For example:

• Add a script to detect a change in screen width (e.g., from 500 px to 1200 px), and then show or hide layers in response.
• Add a script to detect a change in screen width, and then redirect to another dashboard more suited for the size of the screen.

5. Align content

As you drag or resize any item, contextual guidelines (dotted lines) appear to help you align it with other content.

When your item snaps into alignment with another, a red line is displayed along the points that are being aligned (such as the center or edge of each element), and the outer boundaries of the other items appear.

If you want to temporarily disable snapping to other content, hold the Alt or Option key while dragging or resizing.

If snap-to-grid is enabled, positions are also snapped to the grid while dragging or resizing. To turn snap-to-grid off, click Disable snap grid in the the status bar.

5.1. Arrange multiple items

When multiple elements are selected, you can adjust their alignment using the Arrange option on the toolbar.

You can use these options to quickly Distribute, Align, and Size.

6. Resize within template grid

Double-click the resize handle of an element that has been placed within a template grid cell to expand/contract that side (or corner) to the template cell's edge (or corner).

7. Select overlapping items

When elements are overlapping each other, it can be harder to select elements below the one on top when you want to re-position them or change their settings.

You can right-click (or long-tap) any of these elements and choose Select to choose from a list of the overlapping items.

8. Upload multiple files

Instead of using drag-and-drop, you can upload one or more image files, maps, or diagrams to corresponding Explore folders using a context menu option.

For example, right-click on the Images folder and select Upload File.

In the Upload File dialog, click Choose Files. Then select one or more image files from your computer or device.

The images will be uploaded to the Images folder in Explore.

9. See also

• Design overview
• List of keyboard shortcuts
• Using a template grid for resizing
• Layers and groups
• Design tips for reports and scorecards