FVS Dropdown Checkbox Widget

  • Last update:  2023-04-14
  • Overview

    Application scenarios: If you have installed the FVS plugin, you can view this article to learn about functions related to FVS templates.

    Note: Mobile devices are not supported.

    Version

    Report Server Version

    Plugin Version

    Function Changes

    11.0.6

    1.8.0

    Cancelled Visible on preview setting. You can hide or display components in Widget Layer list.

    11.0.6

    1.5.0

    Added Drop-downCheckbox Widget.

    Function Introduction

    When previewing the template, you can select one or more options from the drop-down list, and other components will be linked through parameters. As is shown below:

    1.2.gif

    For component animation, see FVS Component Animation.

    For component styles, see FVS Component Basic Attributes. If you want to modify the widget name, set it on the Content tab page.

    Functions

    Widget Content

    What can be set in the drop-down check box widget is shown as follows:

    2.1.png

    For details, see the table below:

    Settings

    Details

    Name

    The widget name is the parameter   name, and it is set as English by default. The name needs modifying according   to the actual parameter.

    Font size

    The font size of the displayed   text in the drop-down check box is 12px by default, which has no effect on   the font of the options in the drop-down menu.

    Data dictionary

    It is used to add options of the   widget. You must set it, otherwise the widget will not display options. For   how to set it, see Data   Dictionary.

    If you tick Remove Duplicates,   it will merge the same items in the drop-down options. Otherwise, it will not   merge them and will keep the duplicate options. It will be ticked by default.

    Default value

    You can set the displayed default value of the drop-down check box,   which supports the following three types

    1. Custom String: You can   input text directly, and when you enter multiple values, multiple selections   can be realized. When you enter multiple values, the format needs to be   consistent with the widget's Return   value. When the return value is not modified, it will be separated by a comma   in English by default, such as: East China,North China.

     2.1 1).png

    2. Field: You can select   field in the dataset. If a field has multiple values, all values will be   selected.

     2.1 2).png

    3. Formula: Click fx   on the right side to enter the formula. If the formula corresponds to   multiple values, all values will be selected.

    2.1 3).png

    Return

    Array: The return type is an array, for   example: if three values are selected, the return value will be: value1,value2,value3.

    String: The return value type is a string, and it needs to define Separator, Starting Symbol, and Terminator.   That is, multiple values that are checked will be concatenated into a string   according to the separator.

    You can input symbols by yourself or select them directly in the   drop-down box.

    For example: If the separator is defined as a comma and the starting   symbol and terminator are both defined as single quotes, the return value   will be value1,value2,value3.

    2.1 表最后一张.png

    Watermark

    The light gray watermark text displayed inside the widget during preview   will remind you what to input. It will disappear by default after you click   the widget to enter text. The widget content is empty by default.

    Permission

    It is used to decide whether the widget is editable when previewing. The   default option is editable.

    Validation

    Allow null: It will be ticked by   default. If ticked, the widget is allowed to be null. If not ticked, you can   set calibrate prompt text. And if the widget is empty during template   preview, the prompt text will be displayed. It will be ticked by default.

    Allow custom value: set whether to allow inputting   values not included in the drop-down menu options

    • If you tick it, it will allow inputting values not included in the   drop-down options and adding them to the drop-down options. However, they   will not be saved after refreshing.

    • If you do not tick it, it will not allow inputting values not included   in the drop-down options. When the input value is not included in the   drop-down options, the drop-down check box will not automatically clear the   input value and a prompt box will pop up: Value is not in the drop-down list.

    Widget Interaction Events

    Click Interaction > Add Event to add JavaScript events for more effects. The drop-down check box widget supports After Initialization and Edit Finish events. As is shown below:

    2.2第一张.png

    The JavaScript event settings box will pop up if you click a specific event. As is shown below:

    Note: For JavaScript supported by FVS, see JS Interface Scenarios Supported by FVS Large Screen.

    2.2第二张.png

    Examples

    Preparing the Template

    1. Click File > New FVS Report in the upper left corner of the designer to customize the template name and size.

    3.1 1).png

    2. Create a database query ds1, enter the SQL query statement SELECT * FROM Sales _Volume where Salesperson in ('${spe}') and set the parameter spe default value to Sun Lin. Then you will obtain sales data of Sun Lin by default.

    As is shown below:

    3.1 2).png

    Adding Drop-down Check Box Widget

    1. Click Widget > Drop-downCheckbox and add it to the page.

    On the Content tab page of the right configuration panel modify the name to spe to match the spe parameter defined in the dataset. And set the default value to Sun Lin.

    As is shown below:

    3.2 1).png

    2. Add the drop-down box widget's data dictionary, select the type as Database Table, and select Salesperson field of the sales table in FRDemo.

    To match the in statement in SQL, the return value type of this widget is set to String and you can input the separator as ',' by yourself. As is shown below:

    Note: If multiple options need to be set as default values, they should be in the same format as the return value type. For example, in this case, the default values can be set as Sun Lin ','Jin Shipeng.

    As is shown below:

    3.2 2).png

    Adding Line Chart

    Click Chart > Line Chart to add the component to the page, and add data with the spe parameter to the line chart. As is shown below:

    3.3.png

    Previewing the Effect

    Click Save in the upper right corner and click Preview. If you select different options from the drop-down menu, the line chart will then display the sales volume of corresponding salesperson. As shown in section "Function Introduction".

    Template Download

    To download the template, click Drop-down Checkbox Example.fvs


     


    Attachment List


    Theme: FineVis Data Visualization
    • Helpful
    • Not helpful
    • Only read

    滑鼠選中內容,快速回饋問題

    滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

    不再提示

    10s後關閉

    Get
    Help
    Online Support
    Professional technical support is provided to quickly help you solve problems.
    Online support is available from 9:00-12:00 and 13:30-17:30 on weekdays.
    Page Feedback
    You can provide suggestions and feedback for the current web page.
    Pre-Sales Consultation
    Business Consultation
    Business: international@fanruan.com
    Support: support@fanruan.com
    Page Feedback
    *Problem Type
    Cannot be empty
    Problem Description
    0/1000
    Cannot be empty

    Submitted successfully

    Network busy