Custom Scrollbar Plugin-FineReport Help Document

Last update：April 19, 2024

Overview

Version

Report Server Version	Plugin Version
11.0	V1.4.3

Application Scenario

Early versions of IE browsers adopt the interface design style of their operating systems. However, such style is not consistent with the flat style of the designer, causing a bloated look, particularly noticeable when you activate some special modes such as freezing breezing in the browser. The following figure shows the effect.

老IE.gif

After the plugin is installed, the scrollbar style is modified to a long, rounded rectangle in gray. The modified scrollbar follows mouse wheel scrolling and automatically hides when idle, contributing to a cleaner interface. The following figure shows the effect.

插件后.gif

Plugin Introduction

Plugin Installation

You can obtain the plugin at Custom Scroll Bar.

For details about installing the plugin in the designer, see Designer Plugin Management.

For details about installing the plugin on the server, see Server Plugin Management.

Function Description

Once the plugin is successfully installed, there is no need to configure or restart the designer. The new scrollbar style takes effect immediately, and you can check the new scrollbar by simply opening a template where the scrollbar is visible.

After the plugin is successfully installed, you can download and open the sample template: Custom Scrollbar Style.cpt.

You can see that the style of the scrollbar has been modified, and after the mouse cursor is still for a while, the scrollbar will be hidden automatically.

插件后消失.gif

Notes

1. The plugin takes effect in the report blocks of general reports and dashboards. The plugin does not take effect in the overall content of the dashboard, that is, the dashboard body.

2. The plugin takes effect in Pagination Preview, Data Entry Preview, and Data Analysis Preview. The plugin does not take effect in Mobile Preview.

3. After installing the plugin, the new scrollbar style applies to all templates on the server. If you want to customize the scrollbar style for a template, you can refer to section "Custom Scroll Bar Style" to use the plugin's API interface to add JavaScript events for implementation.

Custom Scroll Bar Style

Interface Description

The plugin also offers a styling configuration API interface. If you are not entirely satisfied with the new scrollbar style, you can utilize the interface to customize the scrollbar style of this plugin according to your preferences. The following table shows the API document.

Note:

The new version of the dashboard is not supported.

Attribute	Attribute Value Type	Default Value	Description
distance	string	"1px"	refers to the distance between the scrollbar and the window boundary.
size	string	"10px"	refers to the width size of the scrollbar.
alwaysVisible	boolean	false	refers to whether the scrollbar is always visible. When set to false, the scrollbar will gradually disappear after the mouse stops moving.
color	string	"#000"	refers to the color of the scrollbar.
axis	string	"y"	refers to setting the horizontal scrollbar or the vertical scrollbar, and the value range is ("x"; "y"; "both"). The customization of the axis is not supported temporarily, and the axis uses the default attributes of the report.
borderRadius	string	"7px"	refers to the rounded corner settings of the scrollbar.
disableFadeOut	boolean	false	refers to whether the scrollbar disappears when you hover the mouse over the page.
opacity	number	0.4	refers to the value of the transparency of the scrollbar, and the value range is (0.0~1.0).
positionX	string	"bottom"	refers to setting the position of the horizontal scrollbar on the page, and the value range is ("top", "bottom").
positionY	string	"right"	refers to setting the position of the vertical scrollbar on the page, and the value range is ("left", "right").
startX	string	"left"	refers to setting the initial scroll position of the horizontal scrollbar on the page, and the value range is ("left", "right").
startY	string	"top"	refers to setting the initial scroll position of the vertical scrollbar on the page, and the value range is ("top", "bottom").
wheelStep	number	60	refers to the distance of one scroll of the mouse wheel.

Custom Example

1. This interface is provided by the plugin, so if you want to customize the scrollbar style, you must install this plugin.

2. After the plugin is successfully installed, you can download and open the sample template: Custom Scrollbar Style.cpt

3. Add the Loading End event on the Pagination Preview settings page, as shown in the following figure.

Note:

1. If the ultimate preview mode of the template is Data Analysis Preview and Data Entry Preview, you are advised to add the Loading Start event.
2. If the template is a dashboard, you need to add the After Initialization event to the report block.

The following content shows the JavaScript codes.

 FR.Report.Plugin.ScrollProcessor.config = {
     alwaysVisible : true, //This scrollbar is not hidden automatically.    
     color : "red", //The scrollbar color is set to red.    
     size : "15px" //The scrollbar width is set to 15px
 };