416.467.9100 | Dundas Data Visualization | Login
Welcome Guest
This is the support page for the legacy Dundas Dashboard application. For assistance with the current Dundas BI application please click here.
Dashboard v5.0

This site makes extensive use of JavaScript.

Please enable JavaScript in your web browser and reload the page before proceeding.

Using Themes

Hide navigation
RSS
Modified on Wed, 21 Aug 2013 11:52 AM
Click to return to: Documentation | Designing Dashboards


Overview

Theme resources are composed of color palettes and mappings between style resources and dashboard controls. Themes allow designers to easily reuse a look-and-feel across multiple dashboards. The key concepts in theming provide the basic building blocks for many design scenarios to improve productivity when styling dashboards.

  • A default theme can be assigned to the entire dashboard application as well as individual projects.
  • Themes can be easily switched from one to another.
  • Style resources have an association with the control they are applied to. This allows styles to be updated in a single location without the need to re-apply them.
  • Control properties can be configured to use style resource property values or be user-defined/customized for a particular usage. The property grid has visual indicators and commands to provide fine-grained control over the appearance and layout when using themes and styles.
  • Themes can be imported/exported using the Project Manager.

Apply a theme to your dashboard with just a single operation.

Apply a theme to your dashboard with just a single operation.


Theme resources

Project versus shared themes

Like other types of resources, themes can either be shared across the application or specific to one project. When you install Dundas Dashboard, a set of built-in themes is included as shared resources to get you started. You won't be able to edit these built-in themes but you can copy them in order to make modifications.

Theme resource folders.

Theme resource folders.


Setting the global default theme

Any shared theme can be set as the global default theme, via its context menu in the Design Explorer. Once you set this, the icon of the theme in the Design Explorer will change appearance to help you identify it as the global default.

Global default theme.

Global default theme.


The global default theme will then be used by any new dashboards that are created (across all projects in the Dundas Dashboard instance). The Theme property of a dashboard (i.e. canvas) using a default theme will be set to Automatic, which means that the theme is resolved automatically based on default theme settings.

Theme property of a dashboard.

Theme property of a dashboard.


Setting a project's default theme

For the current project in the Design Explorer, you can set any theme from either the Project Resources or Shared Resources folder as the default theme for that project. Once you set this, the icon of the theme in the Design Explorer will change appearance to help you identify it as the project's default.

Project default theme.

Project default theme.


The project default theme will then be used by any new dashboards that you create in the current project. The Theme property of a dashboard using a default theme will be set to Automatic, which means that the theme is resolved automatically based on default theme settings.

Clear or unset a default theme

To clear or unset a global or project default theme:

  1. Select the default theme's folder, then do a right-click to access its menu.
  2. From the menu, choose Clear Project Default or Clear Global Default.

Clearing a default theme.

Clearing a default theme.


Dashboard design

Setting the theme for a dashboard

A dashboard has a Theme property which you can set explicitly to an available theme. This will override any default theme settings.

Set dashboard theme explicitly.

Set dashboard theme explicitly.


If you want a dashboard to revert to using default theme settings, set its Theme property to Automatic. This is the initial value for newly created dashboards (when default themes are in effect).

The Style property of a dashboard element

When a dashboard uses a theme (either explicitly or indirectly via default theme settings), the Style property of controls on the dashboard will be set to Use Theme Style:

Style property for a Button.

Style property for a Button.


You can override the theme style by setting the Style property to a style resource explicitly:

Set a style resource explicitly.

Set a style resource explicitly.


Command menu indicator

The command menu icon beside each property value in the Properties grid serves a dual purpose. Besides providing access to property commands such as Copy and Paste, it also serves as an indicator of where the property value is sourced from:

  • When the command menu indicator appears with an unfilled color, this means that the property value is local to the control.

  • When the command menu indicator appears with a light blue color, this means that the property value comes from the style (e.g. from a theme) that the control is using. If the control's style/theme is subsequently modified, the control will automatically reflect the updated property value. If you only want to apply the property value from the style but not link to it, select the Unlink from Style option from the command menu.

  • When the command menu indicator appears with a dark blue color, this means that the control is using a style, but the actual property value has been overridden with a local value (or has been unlinked from the style). If you want to go back to using the property value from the style, select the Reset to Style option from the command menu.

Command menu indicators.

Command menu indicators.


Theme Selector

The Theme Selector general control is a simple dropdown that lists the available themes in the application and allows users to change the theme at viewing-time. A theme selector control can also be used to change a theme via script.

Theme selector control.

Theme selector control.


Managing themes

Creating a new theme

You can create a new project theme or shared theme as follows:

  1. Select the Themes folder, then do a right-click to access its menu.
  2. From the menu, choose New Theme.
    Themes folder menu.
  3. In the text box which appears, type a name for the theme, then press ENTER.
    Theme name.

The new theme appears as an item under the Themes folder and the Theme Setup dialog is displayed.

Theme Setup dialog.

Theme Setup dialog.


Theme palette

The Palette tab in the Theme Setup dialog lets you define standard brushes and custom brushes. A brush is simply an association between a brush name and a brush color.

For standard brushes, the names are fixed but their corresponding colors can be changed to other solid color values. This allows different themes to have different colors for the same brush name. For example, the Accent 1 brush may be a Red color in Theme A, but a Blue color in Theme B.

With a custom brush, you can choose the name and are not limited to using just solid colors. You can use gradients or even image brushes. Note that custom brush names must be unique within the theme and cannot have the same name as any:

  • Named colors (e.g. Red, Blue, White, DarkGrey, etc.)
  • Standard brush names (e.g., Accent 1, Background, etc.)

Theme styles

The Styles tab in the Theme Setup dialog lets you set up mappings between dashboard control types and style resources.

Theme Styles tab.

Theme Styles tab.


Use the text box at the top of the tab to filter the list of mappings. For example, to see only mappings for gauge control types, type “gauge” into the box.

To set a style for a control type, use the dropdown list in the Style grid column.

Click OK when the mappings are completed.

Check-in

To complete the process, select your new theme in the Design Explorer, right-click, then select Check In from the menu.

Related topics


Click to return to: Documentation | Designing Dashboards

About Dundas | Contact Us Follow us on Twitter! | Privacy Statement | Report Site Issues

Copyright © 2009-2014 Dundas Data Visualization, Inc.