I. Overview
1) Drop-down tree allows you to expand data layer by layer.
2) You are recommended to read Report Widget before reading this article. If you want to build a drop-down tree, you should take the following steps: create a new template and insert a Drop-down Tree widget in B2.
3) We will introduce the following three ways of building a drop-down tree in this article:
Fast Layered Build
Automated Build
Layered Build
The three ways use different types of data sources:
| Build Way | Data Source |
|---|---|
| Speed Layered Build | Dataset Query |
| Automated Build | Tree Dataset |
| Layered Build | Using parameters for DB Query |
II. Fast Layered Build
1. Create a new DB query dataset
1) Create a new dataset [ds1].
2) Enter the following SQL statement:
SELECT distinct Region, Salesperson, Product_types FROM Sales_Volume
3) Preview the dataset. The dataset has three columns, which are the three layers of the drop-down tree.
2. Build the Gradation 1
Click [...] behind [Build Tree] and select [Fast Layered Build] in the drop-down box.
Dataset: ds1
Actual Value：Region
Display Value: Region
3. Build the Gradation 2
1) Click [+] to build a new layer.
Dataset: [ds1]
Actual Value：Salesperson
Display Value: Salesperson
2) Click [Add] to make the settings below:
Dependent Layers: 1
Dependent Fields: Region
4. Build the Gradation 3
1) Click [+] to build a new layer.
Dataset: [ds1].
Actual Value: Product_types
Display Value: Product_types
2) Double click [Add] to make the settings below:
Dependent Layers: 1，Dependent Fields: Region
Dependent Layers: 2，Dependent Fields: Salesperson
5. Data entry preview
III. Automated Build
1. Create a new DB query dataset
1) Create a new dataset [ds2].
2) Drag the table [department] into the DB query.
3) Preview. The column [did] displays current-level data ID, and the column [fid] displays the upper-level data ID.
2. Create a new tree dataset [Tree1]
1) Create a new tree dataset.
2) Select [ds2] to build Tree.
Original Tag Field: did
Parent Tag Field: fid
3. Build Tree
Click [...] behind [Build Tree] and select [Automated Build] in the drop-down box.
Select a tree data set to build: Tree1
Actual Value: department
Display Value: department
4. Data entry preview
IV. Layered Build
1. Create three new DB query datasets
1) ds3：
SELECT Region FROM Sales_Volume
2) ds4：
SELECT Salesperson FROM Sales_Volume WHERE Region = '${layer1}'
3) ds5：
SELECT Product_types FROM Sales_Volume WHERE Region = '${layer1}' AND Salesperson = '${layer2}'
2. Build the Gradation 1
Click [...] behind [Build Tree] and select [Layered Build] in the drop-down box.
Type: Data Query
Dataset: ds3
Actual Value: Region
Display Value: Region
3. Build the Gradation 2
Click [+] to build a new layer.
Dataset: ds4
Actual Value: Salesperson
Display Value: Salesperson
4. Build the Gradation 3
Click [+] to build a new layer.
Dataset: ds5
Actual Value: Product_types
Display Value: Product_types
5. Check [Performance First]
1) In the preview mode, the system will not traverse the child nodes of all parent nodes. Only when you expand a node by clicking [+], the child node will be recognized and displayed.
6. Data entry preview
