FVS Query Panel

This document is applicable to users who have installed the FineVis Data Visualization plugin to learn plugin functions.

Version

Application Scenario

In FVS templates, parameter widgets for data query need to be directly added to the canvas before being used.

However, in some cases (especially when you need to view templates on mobile terminals), you may want the widget query panel to be collapsible and expandable, rather than to be directly displayed in templates.

With the FineVis Data Visualization plugin of 2.3.0 and later versions, you can achieve the above need by enabling the query panel, as shown in the following figure.

Note:

Widgets on the query panel are not subject to widgets on the canvas. No linkage effect exists even between widgets with the same bound parameters on both the query panel and canvas.

Function Entry

The query panel setting is shared by all pages. The setting entry is in the page area below the canvas. Click Query Panel Setting. The setting page pops up.

You can select Enable Query Panel, add widgets on the query panel, and set the query panel style, as shown in the following figure.

After you enable the query panel and add widgets, the query icon appears in the bottom left corner of the preview page. If multiple pages exist in the template, the query icon is displayed on the left of the page switchover icon.

Note:

If the query panel is enabled but no widgets are added, the query icon will not be displayed on the preview page.

Content

Click Add Widget, select a widget from the drop-down list, and set the widget content on the right.

Note:

You cannot set character styles for widgets on the query panel.

You can adjust the order of widgets (namely the display order of widgets on the preview page) by dragging.

Style

Note:

The styles of the query panel and widgets are subject to the FVS Template Theme.

Enabling Auto Query

You can determine whether to select Enable Auto Query in Style.

This setting item is shared between PC and mobile terminals, and the effect is the same.

If you select Enable Auto Query, the query panel will collapse by default when you preview the template for the first time or refresh the template. The widget query will be automatically triggered and all template contents will be displayed.

If you deselect Enable Auto Query, the query panel will be expanded by default when you preview the template for the first time or refresh the template. The template content will not be displayed and you need to click the query icon for display.

Mobile Style

When the template is switched to the mobile mode, the query panel style allows you to set Style, including Default and Top.

For details, see [General] Mobile Parameter Panel Style.

Template Preparation

Choose File > New FineVis Visualization Dashboard in the upper left corner of the designer and create a blank dashboard.

2. Create a database query named ds1 and enter the SQL query statement SELECT * FROM SALES_BASIC where Region='${area}'.

Set the default value of the parameter area to Jiangsu Province. That is, the sales data from the Jiangsu province is obtained by default.

Column Chart Adding

Click the Chart icon in the component area and click Column Chart to add the column chart component to the page. 

Bind data with the area parameter in the dataset to the column chart, as shown in the following figure.

Query Panel Setting

1. Click Query Panel Setting below the canvas, select Enable Query Panel, click Add Widget, and select Dropdown Box from the drop-down list.

2. Set Name to Region and Bound Parameter to area.

3. Set Option Source to Database Table, set Database to FRDemo, set Database Table to SALES_BASIC, set Actual Value and Display Value to Region, and click OK.

4. Enter Jiangsu Province in the input box of Default Value and click OK.

Setting Mobile Query Panel Style

1. Click the  icon, choose Query Panel Setting > Style, and set Style to Top.

2. Deselect Auto Query After Widget Value is Edited and click OK.

Effect Display

PC

Click Save in the upper right corner and click Preview. The query icon appears in the bottom left corner of the template. You can click the icon to expand the query panel, as shown in the following figure. 

Mobile Terminal

For details, see FVS Mobile Attribute. The dashboard is shown in the following figure.

You can download the example template FVS Query Panel.fvs.