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.
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.
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.
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: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: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
};4. Save the template and click Pagination Preview. The following figure shows the effect.
Template Download
You can download the example template.
Note: