FVS Template Style

This document is applicable to users who have installed the FineVis Data Visualization plugin to learn plugin functions.

Version

Application Scenario

When creating FVS templates, you can select template styles in advance and predefine Theme Style and Component Style of templates, enhancing the efficiency of subsequent template creation.

Function Description

1. You can manage template styles by choosing Server > FVS Template Style Management where you can select 4 built-in styles or create custom styles.

2. When creating blank FVS dashboards, you need to select template styles. Template styles are applied on a one-time basis, meaning that editing template styles does not affect templates with used styles.

3. Template styles are divided into Theme Style and Component Style. Theme styles can be switched in created templates, while component styles only take effect when creating templates.

Note:

You are advised to create custom styles in advance by predefining the required styles before creating templates.

Creating a Blank FVS Dashboard

When you create a blank FVS dashboard, all built-in styles and custom styles of the current server will be displayed in Template Style, and you need to select one of the styles before creating the dashboard.

1. Built-in Style: Four FVS built-in theme styles are available, with Dark Theme 1 as the default selection.

2. Custom Style: The message "No custom style. Go to FVS Template Style Management and add one" will be prompted if you have no added custom styles.

Click FVS Template Style Management to open a pop-up window where you can copy built-in styles or create styles for customization.

Close the pop-up window to return to the template style selection page after you add template styles, and click Refresh Resource in the bottom right corner to obtain custom template styles.

Click Add Manually on the prompted message "Nothing appropriate. Go to Add Manually." in the bottom left corner to open the FVS    Template Style Management pop-up window if you have added custom styles.

Switching a Theme Style

After creating a blank FVS dashboard, you can switch theme styles of the current template by clicking Switch Theme Style button in the upper right corner of the template.

Since template styles are applied on a one-time basis, the currently applied template style will not be selected here.

Modifying template styles in FVS Template Style Management does not affect the current template. If you want to apply the modified      theme styles in FVS Template Style Management, you need to reselect the modified ones to switch.

The FVS Template Style Management and Refresh Resource buttons at the bottom of the Switch Theme Style panel function the same as they do during template creation.

Function Entry

You can open the pop-up window by choosing Server > FVS Template Style Management.

Built-in Styles

Four FVS built-in styles are uneditable and undeletable, and only support copied as custom styles.

You can hover the cursor over a style and click the  button to copy the style as the custom style.

Custom Styles

The Create Style card is fixed and displayed in the upper left corner of the Custom Style page. The two buttons Create from Dark Color Style and Create from Light Color Style are displayed when you hover the cursor over the card. The Template Style Setting box pops up when you click one of the two buttons.

You can delete, edit, and copy a custom style by hovering the cursor over the style and clicking the corresponding buttons in the upper right corner.

Template style settings include style names, preview images, theme styles, and component styles.

Names and Preview Images

1. Style names cannot be empty or duplicated.

2. Titles, widgets, and example charts are displayed in preview images. Preview images are updated in real-time when style configuration is modified.

Theme Styles

You can configure the overall color blocks of templates. The following table shows the configurable items.

Component Styles

You can configure content styles and component styles for parts of the components. The following table shows the configurable items.

Style Application Logic

1. Theme Style and Component Style share part of the same setting, such as Widget Icon and Widget Highlight.

The setting (same as that in Theme Style) can be individually modified in Component Style. Modifications in Component Style does not affect the same setting in Theme Style, and the effects will be applied to components according to the modifications performed in Component Style.

However, if you modify the setting (same as that in Component Style) in Theme Style, then the same setting in Component Style will be modified according to Theme Style.

2. You can apply Component Style to templates only when creating blank FVS dashboards. You can only apply new Theme Style to templates through Switch Theme Style after creating templates.

3. The styles of copied and pasted components from different templates are not affected by the current template style. You need to reselect the theme to switch the styles of those components if you want.

Parts of the components are currently not supported in style configuration, but they will be displayed differently under light and dark themes. For example:

Toolbar Background and Button Style are supported in Table Toolbar. For details, see FVS Table Toolbar Application.

If the designer is in version 11.0.26 or later, the table content text color will be displayed as white or black (always white in earlier versions) to distinguish light themes and dark themes.

When you select the default style of tab components as Inline Style, the Tab bar buttons are displayed according to Theme Style.

The background of the drop-down widgets differentiates between light and dark themes, and the selection effects of text are displayed according to Theme Style.

Only Theme Style can be applied to the widgets in the query panel.