Styles and Themes
Styles and themes give you an easy way to save the appearance settings for controls, such as components and data visualizations, and then apply the saved settings to other controls or views.
A typical scenario for using styles and themes is when you have several related dashboards and you want all the controls to have a consistent appearance from one dashboard to the next.
Related video: Working with Styles and Themes
A style contains the settings for most of the properties of a component or data visualization. The only exclusions are the properties tied either to the metric set or to the specific dashboard. Once you've saved a style, you can easily apply it to another instance of the same type of component or data visualization.
2.1. Save a style
For this example, create a new blank dashboard.
On the toolbar, click Components, and then click Button. A button component is added to your view.
With the button selected on the canvas, click Properties and then click Look in order to change the appearance of the button. Scroll down to see the Rest-related properties and change a couple of them.
On the toolbar, click Styles, and then click Save Style.
In the Save File dialog, select a folder location and enter a file name for the style.
Click Submit to save the style.
To see the saved style, go to the EXPLORE window and expand the Styles folder. If your style doesn't appear there, right-click on the Styles folder and click Refresh.
2.2. Apply a style
Add a second button to the dashboard.
There are a couple of ways to apply the saved style to this second button. The first way is to go to the EXPLORE window and expand the Styles folder.
Drag the style from the EXPLORE window and drop it onto the second button.
You now have two similarly-styled components.
The second way to apply a style is to select the component or data visualization on the canvas, click Styles from the toolbar, and then click Apply Style.
In the Open File dialog, select the saved style that you want to apply, and then click Submit.
2.3. Styles for data visualizations
Styles should be applied to data visualizations of the same type. For example, Linear Gauge styles should be applied to Linear Gauges, while Radial Gauge styles should be applied to Radial Gauges. Furthermore, gauge pointer styles are only applied to matching Pointer Types, which means the style will apply to the whole data visualization but may not apply to the pointer if the type does not match.
Some data visualization types include more than one data visualization. For example, Relationship Diagram styles can be applied to a Sankey diagram, and vice versa. Another example is the Chart type of data visualizations. The Line Chart style can be applied to a Bar Chart, as both are part of the Chart data visualization type; however, the styling of the data point series (i.e. the properties specific to the line itself) will not be applied, as the Chart Type on the series does not match.
Some pre-configured data visualizations, which are found in the Recommended section when selecting a data visualization in a scorecard or report, are handled as an exception. Examples of such data visualization are the Sparkline, Data Bar, Horizontal Plot, and Bullet Graph. In order to maintain their default configurations, Dundas BI treats them as separate types. This means that while a Sparkline is a line chart, the styles from a line chart will not be applied and styles specific to Sparklines should be used.
A theme is a collection of existing styles, which you can apply all at once to a view such as a dashboard or report.
3.1. Create a theme
To create a theme, click Create Theme on the toolbar.
In the New Theme dialog, click Select file name. In the Save File dialog, select a folder location and type in a file name for the theme.
Returning to the New Theme dialog, click Add style. In the Open File dialog, select an existing style to be added to the theme.
Add other styles to the theme as desired.
Click Submit to save the theme.
To see the new theme, go to the EXPLORE window and expand the Themes folder. If you don't see your theme, right-click over the Themes folder and click Refresh.
3.2. Apply a theme
For this example, create a new blank dashboard. Then add a couple of button components and a metric set visualized as a bar chart.
There are a couple of ways to apply a theme to this dashboard. The first way is to simply drag the existing theme from the EXPLORE window and drop it onto the canvas.
The theme is applied to the current view.
The second way to apply a theme is to click the canvas and then click Apply Theme from the toolbar. In the Open file dialog, select the theme you want to apply, and then click Submit.
4. Built-in styles and themes
The GLOBAL project in Dundas BI includes a set of built-in styles and themes you can use. But you don't need to switch to the GLOBAL project to access these styles and themes. Just expand the Shared subfolder under the Styles and Themes folders in your current project. The Shared subfolder basically links to the corresponding Styles or Themes folder in the GLOBAL project.
These built-in styles and themes are just a few samples to get you started. To see what these styles/themes look like when applied to your data visualizations, follow these steps:
- Create a new metric set with one measure, row hierarchy, and column hierarchy.
- Create a new dashboard and add a few different types of data visualizations such as a bar chart, area chart, linear gauge, radial gauge, and table.
- Drag the metric set onto each data visualization in turn.
- Expand the Themes Shared folder and drag a theme to the canvas that you want to apply.
As you can see from the above figure, data visualizations use the built-in themes/styles in different ways. For example:
- Charts apply the styles to the color of each series.
- Table visualizations use the styles to determine the selection colors of cells or rows when you hover over or click on them.
- Gauges use the styles to determine the color of their pointers.