Hiding Table Component Scrollbars in FVS by JS

This document applies users who have installed the FineVis Data Visualization plugin to learn relevant functions.

Problem

If a table component contains excessive content in a template, the table component scrollbar will appear when you hover the cursor over the table and disappear when you move the cursor away. How to hide the scrollbar when you hover the cursor over the table component while scrolling the content vertically via the mouse wheel?

Solution

You can use official APIs to hide the scrollbar. For details, see API for Hiding the Scrollbar.

Template Creation

1. Choose File > New FineVis Visualization Dashboard in the upper left corner of the FineReport designer.

2. Customize the template name and size in the Create Blank FVS Dashboard tab, and choose Built-in Style > Dusk Sea Blue in Template Style. 

3. Click Create Dashboard.

Data Preparation

Create a dataset named ds1 with the SQL statement SELECT * FROM Sales_Volume, as shown in the following figure.

Table Design

1. Choose Other > Table in the component area to add a table component to the page, adjust the size and position for the component, and name the component Table1, as shown in the following figure.

2. Select the table component, and choose Content > Edit Component on the right configuration panel to enter the table editing page.

3. Drag fields in the dataset ds1 into cells, and set corresponding cell titles, respectively. The following figure shows the table style.

4. Select the title row, and configure Repeat and Freeze settings, as shown in the following figure.

After Initialization Event Adding

Click Return to Finevis Visualization Dashboard, add an After Initialization event, and enter the following JavaScript code.

Enter the JavaScript code to hide the vertical scrollbar: 

setTimeout(function(){

     duchamp.getWidgetByName('Table1').setVScrollBarVisible(false);

}, 500);

The following figure shows the steps.

Note: 

You can replace the API in the above JS code with setHScrollBarVisible to hide the horizontal scrollbar, after which you can use the trackpad rather than the mouse to scroll the report. 

Effect Display

PC

Save the template and click Pagination Preview. The following figure shows the effect.

Mobile Terminal

Adjust components for the mobile terminal and enable FVS Mobile Layout. For details about the preview method, see FVS Template Preview and Mounting. The following figure shows the effect.

For details, you can download the template Hiding Scrollbars in FVS.fvs