FVS Click to Link Components

  • Last update:  2022-02-28
  • I. Overview

    Applicable scenarios: Users who have installed the "FVS Large Screen Editing Mode" plugin can refer to this article to learn about the related functions of the FVS template.

    1. Version

    Report server version
    JAR packageFVS large screen editing mode (beta version) version
    11.02021-11-15V1.0.0


    2. Function introduction

    Some FVS components support click operations and pass parameters to link other components. Support linkage of single component or global component. As shown below:

    1.gif

    II. Function introduction

    1. Function entry

    Select the component, click Interaction > Click, and select Add Click Event > Component Linkage. You can add a click linkage component event, as shown in the following figure:

    2.png

    Setting itemIntroduction
    Event NameSupport custom input event name
    Scope

    1) Global linkage: the click behavior takes effect on the entire template, and the parameters are passed to each component in the template

    2) Object linkage: the click behavior takes effect on the selected component, and the parameters will be passed to the selected component, other components and pages will not be affected

    Object

    This option only appears when the linkage scope is "Object"

    The selection range is other components under the same page as this component, and multiple selections are supported.

    Parameter Name

    Parameter Type

    Value

    Support for adding parameters

    Two parameter types are supported:

    1) Formula: parameters support using formula input

    2) Custom: parameters support directly filling in text


    2. Scope of application

    The following components do not support FVS component frame interaction attributes. Unable to set click event to link other components:

    Carousel Pie Chart, Carousel Luminous Gauge, Water Polo, Waffle Chart, Carousel KPI Card (Flashing), Carousel KPI Card (Electronic)

    Carousel Catalog Gear, Carousel 3D Combination Map, Carousel GIS Point Map, Carousel Bar Chart, Carousel Component

    Arc Column Chart, Particle Counter, Flow on Global, Time Gear

    Rich Text Component, Table Component, iFrame Component, Local Video Component, Monitor Video Component

    III. Prepare the template

    Note: Users who have installed the "FVS Large Screen Editing Mode" plugin can refer to this article for learning.

    1. Create a new big screen dashboard

    The user clicks File > New Big Screen Dashboard in the menu bar, sets the name of the large screen template as FVS Component Linkage Example, and clicks OK, as shown in the following figure:

    3.png

    Add "Page2" by clicking + New Page in the page area, as shown in the following figure:



    2. Create a new dataset

    The user creates a new database query "ds1", SQL statement: SELECT * FROM Sales_Volume where 1=1 ${if(len(area) == 0,"","and area in ('" + area + "')")}

    As shown below:

    5.png


    3. New column chart component

    On "Page1", the user selects the component area Chart > Column> Column Chart and clicks to add to the page.

    Select the component, set the component Content > Data in the configuration area, set the dataset tods1, the category is Salesperson, and the series field name is Sales_Volume. As shown below:

    6.png


    4. Add Pie Chart Component

    On "Page1", the user selects the component area Chart > Pie > Pie Chart and clicks to add to the page.

    Select the component, set the component Content > Data in the configuration area, set the dataset to ds1, the catagory to None, the series name to Product, and the value to Sales_Volume. As shown below:

    7.png


    5. New bar chart component

    On "Page2", the user selects the component area Chart > Bar > Bar Chart and clicks to add to the page.

    Select the component, set the component Content > Data in the configuration area, set the dataset to ds1, the category is Product, and the series field name is Sales_Volume. As shown below:

    8.png


    6. Effect Preview

    All components in all pages are displayed according to the parameter is empty, as shown in the following figure:

    9.png

    IV. Example 1: Click linkage to specified component

    Note: Please complete the basic template creation according to Chapter III first, and then perform the operations in this chapter based on the basic template.

    1. Add title component

    On "Page1", the user selects Text > Title Component in the component area and clicks to add to the page.

    Select the component, set the component Content in the configuration area, and set the title content to Click to link specified component. As shown below:

    10.png


    2. Add click event

    Select the title component, click Interaction > Click Event, and select +Add Click Event > Component Linkage.

    The event name is Click to link column chart, the linkage scope is selected as Object, and the linkage object is selected as Page 1_Column Chart1.

    The parameter name is area, the parameter type is Custom, and the parameter value is East China.

    As shown below:

    11.png


    3. Effect preview

    Save the template and click Preview.

    When clicking on the title component "Click to link specified component", the parameter "area=East China" is passed to the column chart. The column chart only displays the sales in East China, and the other components remain unchanged. As shown below:

    12.gif

    V. Example 2: Click to link global components

    Note: Please complete the basic template creation according to Chapter III first, and then perform the operations in this chapter based on the basic template.

    1. Add title component

    On "Page1", the user selects Text > Title in the component area and clicks to add to the page.

    Select the component, set the component Content in the configuration area, and set the title content to Click to link global components. As shown below:

    13.png


    2. Add click event

    Select the title component, click Interaction > Click Event, and select +Add Click Event > Component Linkage.

    The event name is Click to link global component, and the linkage scope selects Global.

    The parameter name is area, the parameter type is Custom, and the parameter value isNorth China.

    As shown below:

    14.png


    3. Effect preview

    Save the template and click Preview.

    When the title "Click to link global components" is clicked, the parameter "area=North China" is passed to all components on all pages in the template. Bar chart, pie chart, and column chart only show sales in East China. As shown below:

    Before clicking:

    15.png

    After clicking:

    16.png

    VI. Completed template

    For the completed template, please refer to: 

    FVS Components Linkage 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