FVS Cascader Widget

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

Version

Function Overview

The Cascader widget allows you to select options level by level based on their hierarchical relationships, ideal for scenarios involving small datasets with shallow hierarchies, for example, location selection (region > country > city). Additionally, the widget supports parameter-based linkage with other components to enable hierarchical data filtering and interactive data exploration, as shown in the following figure.

Note: 

For details about the component animation, see FVS Cross-Page Component Animation.

For details about the component style, see FVS Component Style and Attribute.

Widget Content

The following figure shows the setting items on the Content tap page of the cascader widget.

The following table details the setting items.

Setting Item	Description
Bound Parameter	You can enter the name of a parameter to which the widget is bound. The value is empty by default and should be set based on the actual parameter to be bound. You can bind an existing parameter or enter a new value to create a parameter.
Option Source	You can set Actual Value and Display Value of the cascader widget with three creation methods: Automatic Creation, Basic Layered Creation, and Fast Layered Creation.
Option	Return Leaf Nodes Only: A cascader is a hierarchical widget in which each terminal leaf node corresponds to a full hierarchical path. If it is ticked, only the leaf nodes will be returned by default. For example, if you select Phnom Penh, Phnom Penh will be returned.
	Return Full Hierarchical Path: A cascader is a hierarchical widget in which each terminal leaf node corresponds to a full hierarchical path. If it is ticked, the complete hierarchical path will be returned, and the value is represented as an array. The option is unticked by default. For example, if you select Phnom Penh with the option ticked, Southeast Asia,Cambodia,Phnom Penh will be returned.
Default Value	You can set the default value displayed in the cascader widget. The following three types of default values are available: 1. Custom String: You can directly input text. For example, to select Phnom Penh, you can enter Southeast Asia,Cambodia,Phnom Penh, using commas (,) to separate child and parent nodes. 2. Field: You can choose a field from the dataset. 3. Formula: You can click fx on the right and enter a formula. For example, you can obtain the value of cell A1 in the Table 1 component with the formula =Table1~A1 or select two nodes of a cascader widget with the formula =[[1,11,111],[1,11,112]].
Watermark	Light gray watermark text is displayed in the widget during the preview, prompting you to enter the required information. The watermark disappears after an option is selected or required text is entered. The input box of Watermark is empty by default.
Permission	You can set whether the widget is editable during the initial preview. Allow Edit is selected by default.
Validation	Null Value Validation: The setting item determines whether the widget can be empty. Allow Null is ticked by default. If Allow Null is ticked, the widget can be empty. If Allow Null is not ticked, you can enter a validation prompt that will be displayed in the widget when no option is selected.
Content Style	Font Style: You can set the style of text displayed in the widget, including font type, size, and color. The size of the dropdown icon in the widget changes with the font size, as shown in the following figure. Note:  1. Font Size settings do not apply to the options in the dropdown list. 2. If you change the FVS template style after setting the font color, the font color will follow the theme and needs to be reset. Icon Color: You can set the icon color here or in Theme Style Setting. Note:  If you change the FVS template style after setting the icon color, the icon color will follow the theme and needs to be reset.

Widget Interaction Event

Choose Interaction > Add Event. You can add a JavaScript event to achieve more effects. After Initialization and Edit End events can be added for the cascader widget, as shown in the following figure.

The corresponding JavaScript event setting page will pop up after you select one of the events and click JavaScript, as shown in the following figure.

Note: 

For details about the JavaScript events supported by the FVS dashboard, see JS Events Supported by FVS.

Template Creation

Choose File > New FineVis Visualization Dashboard in the upper left corner of the designer, and create a blank dashboard. You can customize its name and canvas size.

Data Preparation

This example uses Fast Layered Creation to create a tree structure.

Create a dataset ds1 with the SQL statement: SELECT ShipperRegion,ShipperCountry,ShipperCity FROM Orders_new where ShipperCity!=''. The dataset is used as the data dictionary for the cascader widget.

Create a dataset ds2 with the SQL statement: SELECT * FROM Orders_new ${if(len(area)=0,"","where ShipperCity = '" + area + "'")}.

The following figure shows the steps.

Cascader Widget Setting

Component Adding

Choose Widget > Tree > Cascader in the component area to add the cascader widget to the canvas, and set Bound Parameter to area, the dataset parameter defined in ds2, as shown in the following figure. 

Option Source Setting

1. Click the icon to open the Tree Creation setting window. Creation Method defaults to Fast Layered Creation. Click the icon to add a layer, as shown in the following figure. 

2. Set corresponding Actual Value, Display Value, Dependent Layer, and Dependent Field for each layer, as shown in the following figure.

Table Component Design

Component Adding

1. Choose Other > Text > Table in the component area to add the table component to the canvas, and click Edit Component to enter the table editing page, as shown in the following figure.

Table Design

Drag the corresponding fields into the cells, and adjust the cell format as needed, as shown in the following figure. 

4. Click Return to FineVis Visualization Dashboard to return to the canvas.

Effect Preview

PC

Click Save in the upper right corner of the designer, and then click Preview. The preview effect is the same as that shown in the "Function Overview" section.

Mobile Terminal

For details about the preview method, see FVS Template Preview and Mounting. The following figure shows the effect.

Note: 

The font color of Confirm and the selected options displayed on mobile terminals can be set under Widget > Highlight Color in Theme Style Setting.

For details, you can click to download the template: Cascader Widget.fvs