Overview
Version
Report Server Version | Plugin Version | HTML5 Mobile Display Plugin Version | Functional Change |
11.0.16 | 1.0 | / | / |
11.0.16 | 1.0 | V11.0.83 |
Partial widgets of the Widget Display Enhancement plugin support the HTML5 terminal, including text widgets, text area widgets, password widgets, drop-down box widgets, drop-down checkbox widgets, drop-down tree widgets, view tree widgets, radio button group widgets, checkbox group widgets, checkbox widgets, file widgets, date widgets, and number widgets. |
11.0.16 | 1.0.2 | V11.0.85 | The Widget Display Enhancement plugin supports new multi-select drop-down tree widgets. |
11.0.16 | 1.0.2 | V11.0.87 |
Partial widgets of the Widget Display Enhancement plugin support the App terminal, including text widgets, text area widgets, password widgets, drop-down box widgets, drop-down checkbox widgets, drop-down tree widgets, view tree widgets, radio button group widgets, checkbox group widgets, checkbox widgets, file widgets, date widgets, and number widgets. |
11.0.24 | The plugin is built in the JAR package. | V11.0.89 | Embedment of the Widget Display Enhancement Plugin. PC terminal: Text Style, Font Color, and Drop-down Panel Color are added. Mobile terminal: Text Style and Font Color are added. The original Background Setting at the top and bottom toolbars is adjusted to Style Setting, where Auto, Light, and Dark are added. |
| 11.0.25 | / | V11.0.90 | Border Line can be set to None. Customizing the border line color is supported. The widget background can be set. Customizing the background and background opacity is supported. The setting item Icon Color is added, supporting the customization of the icon color. The setting items Text Style and Font Color are merged into Text Style, which supports the setting of font, text color, italics, and bold. |
Application Scenario
FineReport provides the Template Theme function, allowing you to switch overall report color styles. However, the function does not support the switchover of widget styles, resulting in inconsistent colors between widgets and overall reports.
To solve the problem, FineReport has introduced the Widget Display Enhancement function. You can customize Parameter Panel and Widget Style in Template Theme Management to match the styles of widgets and overall reports.
Function Introduction
The Widget Display Enhancement function is disabled by default and needs to be manually enabled.
Choose Template > Widget Display Enhancement, tick Enable Widget Display Enhancement, and click OK.
Parameter Panel
For general reports, this function is available with Engine-X enabled.
For general reports, this function applies to Pagination Preview, Data Entry Preview, and Data Analysis Preview.
Both the new adaptive and old adaptive dashboards support the use of this function.
Customizing the background color of the parameter panel is supported for both desktop and mobile terminals.
Widget Style
It supports the settings for both Desktop and Mobile terminals.
Desktop Setting
For general reports, this function applies to Pagination Preview, Data Entry Preview, and Data Analysis Preview.
For general reports, this function is available with Engine-X enabled.
Both the new adaptive and old adaptive dashboards support the use of this function.
The settings supported on Desktop App are shown in the following figure.
The following table describes differences in Desktop setting items of Parameter Panel between widgets.
| Setting Item | Explanation |
|---|---|
| Theme Color | Customize the theme color of the widget, which mainly refers to the border color of the widget on which the cursor is hovering and the background color of the selected widget.Note: |
| Widget Background | Customize the background color of the widget and the opacity.Note: |
| Border Line Style | Customize the thickness and color of widget border lines. |
| Rounded Border | Customize the size of the rounded corner of widget border lines. |
| Icon Color | Customize the color of the widget icon, such as the drop-down icon of drop-down widgets. |
| Text Style | Customize the font, color, size, bold, and italics of texts in the widget. |
| Drop-down Panel Color | Customize the color of the drop-down panel of the widget. |
| Widget Type | Theme Color | Widget Background | Border Line Style | Rounded Border | Icon Color | Text Style | Drop-down Panel Color |
|---|---|---|---|---|---|---|---|
| Text Widget | ✔ | ✔ | ✔ | ✔ | ✔ | ||
Number Widget | ✔ | ✔ | ✔ | ✔ | ✔ | ||
Password Widget | ✔ | ✔ | ✔ | ✔ | ✔ | ||
Text Area Widget | ✔ | ✔ | ✔ | ✔ | ✔ | ||
Label Widget | |||||||
Button Widget | ✔ | ✔ | |||||
| Radio Button Widget/Radio Button Group Widget | ✔ | ✔ | ✔ | ||||
Checkbox Group Widget/Checkbox Widget | ✔ | ✔ | ✔ | ||||
Drop-down Box Widget/Drop-down Checkbox Widget | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
Drop-down Tree | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
New Multi-Select Dropdown Tree | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
View Tree Widget | ✔ | ✔ | ✔ | ||||
Date Widget | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
| Query Widget | ✔ |
The following table describes differences in Desktop setting items of Widget Style between widgets.
| Widget Type | Theme Color | Widget Background | Border Line Style | Rounded Border | Icon Color | Drop-down Panel Color |
|---|---|---|---|---|---|---|
| Text Widget | ✔ | ✔ | ✔ | ✔ | ||
Number Widget | ✔ | ✔ | ✔ | ✔ | ||
Password Widget | ✔ | ✔ | ✔ | ✔ | ||
Text Area Widget | ✔ | ✔ | ✔ | ✔ | ||
Button Widget | ✔ | ✔ | ||||
| Radio Button Widget/Radio Button Group Widget | ✔ | ✔ | ||||
Checkbox Group Widget/Checkbox Widget | ✔ | ✔ | ||||
Drop-down Box Widget/Drop-down Checkbox Widget | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
Drop-down Tree | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
New Multi-Select Dropdown Tree | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
View Tree Widget | ✔ | ✔ | ||||
| Date Widget | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
Mobile Terminal Setting
For general reports, this function applies to Pagination Preview and Data Entry Preview.
For general reports, this function is available with Engine-X enabled.
Both the new adaptive and old adaptive dashboards support the use of this function.
The settings supported on mobile terminals are shown in the following figure.
The following table describes differences in mobile setting items of Parameter Panel between widgets.
The following table describes differences in mobile setting items of Widget Style between widgets.
| Setting Item | Explanation |
|---|---|
| Theme Color | Customize the theme color of the widget, which mainly refers to the border color of the widget on which the cursor is hovering and the background color of the selected widget.Note: |
| Widget Background | Customize the background color of the widget and the opacity.Note: 2. The setting only applies to widgets in the parameter panel and dashboards. |
| Border Line Style | Customize the thickness and color of widget border lines. |
| Rounded Border | Customize the size of the rounded corner of widget border lines. |
| Icon Color | Customize the color of the widget icon, such as the drop-down icon of drop-down widgets. |
| Text Style | Customize the font, color, size, bold, and italics of texts in the widget. |
| Widget Type | Theme Color | Widget Background | Border Line Style | Rounded Border | Icon Color | Text Style |
|---|---|---|---|---|---|---|
| Text Widget | ✔ | ✔ | ✔ | ✔ | ✔ | |
Number Widget | ✔ | ✔ | ✔ | ✔ | ✔ | |
Password Widget | ✔ | ✔ | ✔ | ✔ | ✔ | |
Text Area Widget | ✔ | ✔ | ✔ | ✔ | ✔ | |
Label Widget | ||||||
Button Widget | ✔ | ✔ | ||||
| Radio Button Widget/Radio Button Group Widget | ✔ | ✔ | ✔ | |||
Checkbox Group Widget/Checkbox Widget | ✔ | ✔ | ✔ | |||
Drop-down Box Widget/Drop-down Checkbox Widget | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
Drop-down Tree | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
New Multi-Select Dropdown Tree | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
View Tree Widget | ✔ | ✔ | ✔ | |||
Date Widget | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
| Query Widget | ✔ |
| Widget Type | Theme Color | Icon Color |
|---|---|---|
| Text Widget | ✔ | |
Number Widget | ✔ | |
Password Widget | ✔ | |
Text Area Widget | ✔ | |
Button Widget | ✔ | |
| Radio Button Widget/Radio Button Group Widget | ✔ | |
Checkbox Group Widget/Checkbox Widget | ✔ | |
Drop-down Box Widget/Drop-down Checkbox Widget | ✔ | ✔ |
Drop-down Tree | ✔ | ✔ |
New Multi-Select Dropdown Tree | ✔ | ✔ |
View Tree Widget | ✔ | |
| Date Widget | ✔ | ✔ |
Top Toolbar
The top/bottom toolbars provide Auto, Light, and Dark setting options.
Optimization of Preview Effects of Mobile Widgets
The interactive effects of widgets during a preview are optimized if Widget Display Enhancement is enabled.
Drop-Down Widget
The drop-down list is expanded from the bottom instead of the side after the drop-down icon is clicked to cater to users' operating habits, as shown in the following figure.
The page and interactive effects of drop-down box widgets and drop-down tree widgets are optimized to simplify the filtering operation.
Full-screen display of the search page is supported to display more search content.
The OK button on the expand widget panel is deleted and the filtering can be executed exactly by clicking Query after you select an option or click Clear, as shown in the following figure.
Text Widget
The interactive effects and operation steps of uploading images are optimized.
Click the + icon to add images.
Zoom in the image for viewing.
Delete the thumbnail by clicking the
icon in the upper right corner.If more than six images are collapsed, click the image with a "+N" mark to view the thumbnails of all these collapsed images. Viewing large images and deleting images are also supported.
Previous：Custom Scroll Bar Plugin
