Overview
This document is applicable to users who have installed the FineVis Data Visualization plugin to learn plugin functions.
Version
| Report Server Version | Plugin Version | Functional Change |
|---|---|---|
11.0.16 | V2.0.0 | Displayed Select All by default during the preview in the historical version. Added a configuration item, which allowed you to determine whether to display the Select All button or not. |
11.0.16 | V2.0.1 | Added Content Style for the setting of the widget. For details, see section "Content Style." |
11.0.22 | V2.2.1 | Supported dropdown box style selection on the mobile terminal. For details, see section "Content Style." |
11.0.22 | V2.8.0 | Separated the parameter from the widget name, and added a new logic for parameter binding. For details, see section "Content." |
11.0.22 | V2.10.0 | Merged the dropdown box widget and dropdown checkbox widget into the former one, which was moved to Widget > List. |
Function Introduction
During the template preview, you can select one/multiple option(s) from the drop-down list to link with other components through parameters. The following figure shows the effect.
For details about the component animation, see FVS Cross-page Component Animation.
For details about the component style, see FVS Component Style and Attribute.
Function Description
Widget Content
Content
The following figure shows the setting items in Content of the dropdown box widget.
The following table describes these setting items.
| Setting Item | Description |
|---|---|
Bound Parameter | The value is the parameter name, which is used to bind to the parameter. It is empty by default, and you can set the parameter based on the parameter in actual practice. Binding the existing parameter is supported. You can also enter a new value to create a parameter. |
Option Source | It is the option to be selected to bind to the widget. Option Source must be set, otherwise the widget will not display any options. For details about how to set the data dictionary, see Data Dictionary. |
If you select Remove Duplicates, the duplicate options in the dropdown box will be merged. If you deselect the option, the duplicate options will be retained. Allow Null is selected by default. | |
Option | If Multiselect is selected, the dropdown box supports multiple selections. Otherwise, the dropdown box only supports a single selection. Multiselect is deselected by default. |
Support Select All is available, but only displayed and selected by default after Multiselect is selected. After Support Select All is selected, you can select all items by clicking the Select All button. | |
Returned Value | Array: The returned value is an array. For example, select three values, and the returned values are value 1,value 2,value 3. |
String: The returned value is a string, in which Separator, Starter, and Terminator need to be defined. That is to say, multiple selected values are concatenated into a single string through the separator. You can manually enter or directly select these symbols. For example, the separator is defined as Comma (,), and the starter and terminator symbols are both defined as single quotation marks ('). Then the return value is 'value1,value2,value3'.
| |
Default Value | You can set the default value displayed in the dropdown box widget in the following three ways. 1. Custom String: You can enter the text directly. You can select multiple options when entering multiple values. When you enter multiple values, the formats need to be the same as those of the returned values of the widget. Returned values are separated by commas (,) by default, such as East China,North China.
2. Field: You can select the fields in the dataset. If multiple values exist in the field, multiple selections are available.
3. Formula: You can click fx on the right to enter the formula. If the formula corresponds to multiple values, multiple selections are available.
|
Watermark | Light gray watermark text is displayed in the widget during the preview, serving as a prompt for the required information to be entered. It disappears after an option is selected or a text is entered. The input box of Watermark is empty by default. |
Permission | It is used to set whether the widget is editable during the initial preview of the page. Allow Edit is selected by default. |
Validation | Null Value Validation: It is used to set whether the value in the widget is allowed to be null. If you select Allow Null, the widget allows a null value. If you do not select Allow Null, you can set Validation Prompt, which is displayed during the template preview. Allow Null is selected by default. |
Custom Value Validation: It is used to set whether you can enter values that are not included in the drop-down box options.
|
Content Style
Font Style: You can set the font styles of the text displayed in the widget, such as the type, size, and color.
The size of the widget icon is also affected by the setting of Font Style, as shown in the following figure.
Note:1. The font in the dropdown options is not affected by the setting. The font style of the dropdown options is only affected by the FVS Template Style.
2. If you modify the font color, and then set the FVS template style, the font color will change with the theme. You need to reset the color as needed.
3. The color of the widget icon can be set in the style setting of the template theme.
In V2.2.1 and later versions, dropdown style templates can be selected on the mobile terminal.
The following figure shows the effect.
Choose Interaction > Add Event to add JavaScript events to achieve more effects. After Initialization and Edit End events can be added in the dropdown box widget, as shown in the following figure.
The corresponding JavaScript event setting box will pop up after you click one of the events, as shown in the following figure.
Note:
Example
Template Preparation
1. Choose File > New FineVis Visualization Dashboard in the upper left corner of the designer to create a dashboard. You can customize the name and size of the dashboard.
2. Create a database query named ds1, input the SQL query statement SELECT * FROM Sales_Volume where Salesperson in ('${spe}'), and set the default value of the parameter spe to Mike, which means extracting sales data of the salesperson Mike by default, as shown in the following figure.
Adding a Dropdown Box Widget
1. Choose Widget > List, and Click Dropdown Box to add the widget to the canvas.
On the right Content configuration panel, set Bound Parameter to spe to match the defined parameter spe in the dataset, as shown in the following figure.
2. Click the xxx button to enter the Option Source setting box to bind the option source to the widget. Select Database Table from the drop-down list of Type Setting, select FRDemo from the drop-down list of Database, select Sales_Volume from the drop-down list of Database Table, and set the Column Name of Actual Value and Display Value to Salesperson, as shown in the following figure.
3. If you want to achieve multiple selections in the dropdown box, you need to select Multiselect and set Returned Value.
To match the IN statement in the SQL statement, the returned value of the widget is set to String here. Enter the separator (,). The default value is Mike.
Note: If you want to set multiple default options, the formats must be the same as those of the returned values. For example, the default values in this example can be set to Mike,John, as shown in the following figure.
Adding a Line Chart
Click Line on the Chart tab page to add a line chart component to the canvas. Bind data with the spe parameter in the dataset to the line chart, as shown in the following figure.
Effect Display
PC
Click Save on the upper right corner of the designer, and click Preview. Select different options, the line chart will display the sales volume(s) of the selected salesperson(s) accordingly.
If you do not select Multiselect, the effect is shown in the following figure.
If you select Multiselect, the effect is shown in the following figure.
Mobile Terminal
For details about the template preview method, see FVS preview on the mobile terminal.
If you do not select Multiselect, the effect is shown in the following figure.
If you select Multiselect, the effect is shown in the following figure.
Template Download
For details, you can download the template Drop-down Checkbox Example.fvs.
Previous：FVS Dropdown Tree Widget
