I. Overview
1) In designing a form, some options are hierarchically structured. You can insert a Drop-down Tree widget to select such options as you desired.
2) The Drop-down Tree widget is a data entry widget. After clicking Data Entry Preview and Enhanced Data Entry Preview modes, you can see the effect of the widget.
3) You may refer to Insert Formulas
| You will Learn |
|---|
|
II. Steps
1. Insert a Drop-down Tree widget
Click B2, click [Widget Setting] in the right-hand pane, click the drop-down box, and choose [Drop-down Tree].
2. Set the widget name
1) Set the name of the widget inserted in B2.
2) After setting the name, access the widget through JavaScript, and modify its attributes.
3. Build a Drop-down Tree
1) Set the [Build Way] as [Layered Build]. For specific steps, refer to “Fast Layered Build” described in Build a drop-down tree.
2) Data entry preview.
4. Add watermarks
1) Watermark: Click to select a product type.
2) Widen B2 to fully display the watermark in the preview mode.
5. Copy the widget to B4.
Insert a Drop-down Tree widget in B4 and use the same settings as you use in B2.
6. Allow multiselect
1) Click B2 and uncheck [Multiselect]. Click B4 and check [Multiselect].
2) Data entry preview. A single-select widget is displayed in B2 and a multiselect widget is displayed in B4.
7. Load each node of the widget asynchronously
1) Click B2 and check [Async Load]. Click B4 and uncheck [Async Load].
2) Data entry preview. The widget inserted in B2 only expands the first-layer nodes while that inserted in B4 expands all nodes.
Note
Async Load is applicable to the scenarios in which there involves a large volume of data, as it can prevent a single load from being overloading.
8. Only return leaf node
1) Click B2 and check [Only return leaf node]. Click B4 and uncheck [Only return leaf node].
2) Data entry preview. The widget in B2 can only select bottom leaf nodes while that in B4 can select all nodes at different levels.
9. Return full hierarchical path
1) Insert a formula in D2: =B2，so as to get the return value of B2.
2) Insert a formula in D4: =B4，so as to get the return value of B4.
3) Click B2 and uncheck [Return full hierarchical path]. Click B4 and check [Return full hierarchical path].
4) Data entry preview. The widget in B2 can only return the final leaf nodes while that in B4 can return the full hierarchical path of leaf nodes.
10. Not allow null
1) Click B2 and check [Allow Null]. Click B4 and uncheck [Allow Null]. Enter an error tip: Select at least one!
2) Data entry preview. The node of the widget in B2 is not selected and there is no error tip. The node of the widget in B4 is not selected and an error tip pops up.
11. Allow fuzzy query
1) Click B2 and check [Allow Edit]. Click B4 and uncheck [Allow Edit].
2) Data entry preview:
Click B2 and a cursor appears, which indicates B2 is editable. By entering “sun” in B2 and pressing the enter button, the widget will execute fuzzy query and show the matches.
Click the widget and no cursor appears, which indicates the cell is not editable.
12. Allow custom data
1) Click B2 and check [Allow Custom Data]. Click B4 and uncheck [Allow Custom Data].
2) Data entry preview:
Enter “apple” in the Drop-down Tree in B2 and press the Enter button. The input value will be automatically recognized as an option.
Enter “apple” in the Drop-down Tree in B4 and press the Enter button. A message that reads “Not in the list” pops up on the right-hand side of the browser window.
13. Disable the widget
1) Click B2 and check [Enabled]. Click B4 and uncheck [Enabled].
2) Data entry preview. The widget in B2 is expandable while that in B4 is not expandable.
13. Hide the widget
1) Click B2 and check [Visible Widget]. Click B4 and uncheck [Visible Widget].
2) Data entry preview. The widget in B2 is expandable while that in B4 is not expandable.
