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 control instances 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 appearance (i.e., Look) settings for a component or data visualization. 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.
Go to 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.
Go to 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
Click the canvas, go to the toolbar, click Components, and then click Button in order to 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
Regarding data visualizations such as charts and gauges that have many different types, note that styles should be applied to matching data visualization types. For example, linear gauge styles need to be applied to other linear gauges, and radial gauge styles need to be applied to radial gauges. Also, gauge pointer styles are only applied to matching pointer types.
As a best practice, you should apply styles before customizing the visualization. Applying a style may remove existing settings, such as a discrete color rule.
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, go to the toolbar, and click Create Theme.
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.