Styles and themes
Styles and themes give you an easy way to save the appearance settings for components and data visualizations, and then apply the saved settings to other content.
A typical scenario for using styles and themes is when you have several related dashboards and you want all their contents to have a consistent appearance from one dashboard to the next.
Related video: 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 the submit button at the bottom 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 in the toolbar, and then click Apply Style.
In the Open File dialog, select the saved style that you want to apply, and then click the submit button at the bottom.
2.3. Styles for data visualizations
Styles should be applied only to compatible data visualization types. For example:
- Linear gauge styles should be applied to linear gauges, while radial gauge styles should be applied to radial gauges.
- Gauge pointer styles are only applied to matching Pointer Types - the style may apply to the rest of the gauge but not the pointer if no pointer types matched.
- Only series of a similar chart type in the style can apply to a chart series. Charts can include multiple series of data points that are each a different Chart Type, such as a bar chart with a reference line. A style created from a chart with line series can be applied to a bar chart, but the styling of the data point series (i.e., the properties specific to the line itself) will not be applied if there are no line series, as these two chart types are very different.
- Reports and scorecards include some specialized versions of charts that are not compatible with regular chart styles. Sparkline, Data Bar, and Horizontal Plot have their own preconfigured styles that include the typical absence of visible axes. These are kept separate from regular charts so that you can create themes that can apply separate styles to data bars and bar charts without turning one into the other.
- Styles for all of the relationship diagram types are compatible with each other because they are each made up of nodes and links that have similar settings.
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 in 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 the submit button at the bottom 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 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 Apply Theme in the toolbar. (If an element is selected, first click the canvas or an empty area to de-select it.)
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.