New FVS Template Style

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 under Server > FVS Template Style Management where you can select from eight built-in styles or create custom styles.

2. When creating a blank FVS dashboard, you need to select a template style. The template style is applied on a one-time basis, that is, editing the template style does not affect templates that have already applied the style.

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. You need to select one style before clicking Create Dashboard.

1. Built-in Style: Eight built-in theme styles are available for FVS dashboards, with Dark Blue as the default selection.

2. Custom Style: The message "No custom style. Go to FVS Template Style Management and add one." will be displayed if no custom style has been added.

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

• After you add custom styles, close the pop-up window to return to the template style selection page, and click Refresh Resource in the lower right corner to obtain custom template styles, as shown in the following figure.

• When custom styles have been added, you can also click FVS Template Style Management in the lower left corner to open the template style management pop-up window.

Switching the Theme Style

After creating a blank FVS dashboard, you can switch the theme style of the current template by clicking the 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 style, you need to select it and switch the theme style.

• 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 choose Server > FVS Template Style Management to open the pop-up window.

Built-in Style

The eight built-in FVS styles cannot be edited or deleted, but can only be copied as custom styles.

You can hover the cursor over a built-in style and click the  button in the upper right corner to copy the style as a custom style.

Custom Style

The Create Style card is fixed in the upper left corner of the Custom Style tab page. When you hover the cursor over the card, the Create from Dark Color Style and Create from Light Color Style buttons appear. You can click either button to open the Template Style Setting box.

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.

Theme Style Composition

On the Custom Style tab page, you can hover the cursor over a style and click the  button in the upper right corner to go to the Theme Style Setting page.

The Theme Style Setting page consists of six sections: Style Name, Preview Image, Theme Color, Background, Chart, and Widget, as shown in the following figure.

The following table describes the theme style setting in detail.

Configuration Item	Content Setting	Scope of Effect
Style Name	Empty or duplicate names are not supported.	/
Preview Image	Displays the title, widgets and chart examples. Preview images are updated in real-time when style configuration is modified.	/
Theme Color	Allows you to configure a 10-color palette. Background Color and Text Color: displayed as default colors, adapting to light or dark color styles, with customization supported Color Combination: applicable to chart color schemes, allowing selection from the drop-down list or customization.	Effective for all color pickers
Background	Allows you to set Border Background to None, Color, Resource Center, or Custom Upload. Note: The 3D background is currently unsupported.	Effective for page backgrounds.
Chart	Allows you to configure certain settings in Legend, Label, Series, Axis, Background, and Tip for charts. You can configure Color Combination and Gradient in Series. Color Combination: The default color combination follows the theme color combination. You can select other color combinations from the drop-down list. Gradient: You can set the default gradient color when you set Color Scheme to Custom Gradient Color for charts.	Effective for all basic charts and extended charts. Unsupported chart types: Carousel Luminous Gauge Fancy Tree - Electronic and Fancy Tree - Model Carousel 3D Combination Map, Carousel GIS Point Map, and Scene Map 3D Column/Point/Flow on Globe
Widget	Content Setting: allows you to configure settings for widget content. Component Setting: allows you to configure Border Background, Border Line, and Opacity. Note:  For the Query widget, the background color is influenced by the highlight color. The icon color of widgets can be configured separately.	Effective for all widgets

Theme Style Switching Rule

The following table shows the effect mechanism when you switch theme styles for different component objects.

1. Currently, some components do not support style configuration, but they will be displayed differently in light and dark themes. Examples:

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

• In V11.0.26 and later versions, the table text color adapts to dark and light themes (displayed in white or black). In previous versions, the text color was fixed as white.

• When you select Inline Style as Style for tab components, the tabs are displayed according to the theme style.

• The background of widget drop-down panels adapts to dark and light themes, with text selection effects following the theme style.

2. Components copied and pasted from templates in different styles are not affected by the current template style. You need to click Switch Theme Style, select the required theme, and click Switch.