FVS Dropdown Tree Widget

11.0.16

V1.x

/

11.0.16

V2.0.0

Optimized the interactive effect of the widget Content panel.

11.0.16

V2.0.1

• Added Content Style for widget setting. For details, see section "Widget Content."

• Adapted to mobile terminals.

11.0.22

V2.8.0

Separated parameters from widget names, and added Bound Parameter. For details, see section "Widget Content."

Bound Parameter

The value entered here is a parameter name used to bind a parameter to the widget. The value is empty by default, and you need to set this value 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

Three creation methods, namely Automatic Creation, Basic Layered Creation, and Fast Layered Creation, are available for setting Actual Value and Display Value of a drop-down tree.

Option

Multiselect: If it is ticked, you can select multiple options in a drop-down tree. If it is unticked, you can select only one option in a drop-down tree. Multiselect is unticked by default.

If Multiselect is ticked, whether Return Leaf Nodes Only is ticked will affect whether child nodes are automatically selected when the parent node is ticked.

• If Return Leaf Nodes Only is ticked, all child nodes are automatically ticked when the parent node is ticked, and the parent node is filled with a color block when child nodes are ticked.

• If Return Leaf Nodes Only is unticked, all child nodes are automatically unticked when the parent node is ticked, and the parent node is not filled with a colored block when child nodes are ticked.

Expand Tree Nodes Asynchronously: It is the node loading logic, which can affect the performance. This option is ticked by default.

• If it is ticked, only data of the parent nodes are loaded and all child nodes remain collapsed by default after the options are expanded. This applies to scenarios with a large data volume.

• If it is ticked, only data of the parent nodes are loaded and all child nodes remain collapsed by default after the options are expanded. This applies to scenarios with a large data volume.

Return Leaf Nodes Only: A drop-down tree is a hierarchical widget where each terminal leaf node has its full hierarchical path. Only the leaf nodes of a drop-down tree are returned by default.

If you select Phnom Penh, the return value is Phnom Penh.

Return Full Hierarchical Path: A drop-down tree is a hierarchical widget where each terminal leaf node has its full hierarchical path. If it is ticked, the complete hierarchical path is returned, and the returned value is of the array type. Return Full Hierarchical Path is unticked by default.

After it is ticked, for example, when Phnom Penh is selected, the returned value is Southeast Asia,Cambodia,Phnom Penh.

Returned Value

The Returned Value setting item appears only when Multiselect is ticked and Return Full Hieradrchical Path is unticked. This setting item allows you to set the format of the return value for a multi-select drop-down tree with the Array and String formats.

• Array: The returned value is an array. For example, if you select three values, the return value will be ["Value 1", "Value 2", "Value 3"].

• String: The returned value is a string, and you need to define Separator, Starter, and Terminator. That is to say, multiple values to be selected are concatenated into a single string through the separator. You can manually enter or directly select the symbols.

For example, if Separator is set to Comma (,), and Starter and Terminator are both set to Single Quotation mark ('), the returned value will be 'Value1,Value2,Value3'.

Default Value

You can set the default value displayed in a drop-down tree widget. The following three types of default values are available:

1. Custom String: You can directly enter the text.

• For example, if you want to select Phnom Penh, enter Southeast Asia,Cambodia,Phnom Penh. The child and parent nodes are separated by commas (,).

• If Multiselect is enabled and multiple values need to be entered, you can separate child and parent nodes with commas (,) and separate values with a semicolon (;). For example, If you want to select Phnom Penh and Dili, enter Southeast Asia,Cambodia,Phnom Penh;Southeast Asia,East Timor,Dili.

2. Field: You can select fields from the dataset. If a field value conforms to multiple value formats and Multiselect is enabled, multiple options will be selected as the default value.

3. Formula: You can click fx on the right to enter a formula. For example, you can use the formula =Table1~A1 or =[[1,11,111],[1,11,112]] to retrieve the value of cell A1 in the Table 1 component.

Watermark

Light gray watermark text is displayed in the widget during the preview to remind you to enter the required information. The watermark disappears after an option is selected or the required text is entered. The input box of Watermark is empty by default.

Permission

The setting item is used to set whether the widget is editable during the initial page preview. Allow Edit is selected by default.

Validation

Null Value Validation: This option is used to determine whether the widget can be empty. Allow Null is ticked by default.

• If Not Null is ticked, the widget value can be empty.

• If Allow Null is unticked, you can set the validation prompt. If the widget is empty during the template preview, the prompt will be displayed.

Custom Value Validation: This option is used to determine whether you can enter values that are not included in the drop-down options.

• If Allow Custom Value is ticked, you can directly enter a value to achieve fuzzy search when selecting a value from the drop-down tree.

• If Allow Custom Value is unticked, the entered value is automatically cleared in the drop-down tree when the value is not included in the drop-down 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 drop-down options is not affected by the setting. The font style of the drop-down options can be changed through 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.