Collapsible Tree

Version

Expected Effect

When you display hierarchical data in a tree structure, you may want to expand or collapse each level of the data by clicking a button as shown in the following figure. So how can you achieve this?

Implementation Method

First, create the template as an organizational tree report, then add tree node buttons to each level of the data, and finally preview the template by Data Analysis Preview (&op=view).

Note:

Only Data Analysis Preview of general reports is supported in the collapsible tree where you cannot set the freezing.

Data Preparation

1. Create a database query dataset named ds1. The SQL statement is SELECT * FROM Department.

2. Create a tree dataset named Tree1, whose data is from ds1, and set Original Tag Field to 1 and Parent Tag Field to 2, as shown in the following figure.

The following figure shows the preview effect.

Organizational Tree Creation

1. Drag the three fields FR_GEN_0, FR_GEN_1, and FR_GEN_2 from the tree dataset Tree1 to cell A1, cell A2, and cell A3 respectively and set the alignment to left, as shown in the following figure.

2. Customize cell A1 as the left parent cell of cell A2, as shown in the following figure.

Note:

By setting the parent cell, you can expand/collapse the subordinate cells of the parent cell by clicking the parent cell.

3. Customize cell A2 as the left parent cell of A3, as shown in the following figure.

4. Select cell A1, cell A2, and cell A3, click the Cell Attribute icon, click Display, set Type to Data Query, set Dataset to ds1, set Actual Value to Column Index, select 1 from the drop-down list, set Display Value to Column Index, and select 3 from the drop-down list, as shown in the following figure.

Note:

After you set the display value to the column index 3, the department name (rather than the department ID) can be displayed on the frontend during preview.

5. Set the same condition attributes for both cell A2 and cell A3 to hide the rows without data, as shown in the following figure.

Tree Node Adding

Add tree node buttons (used to expand/collapse nodes by level) to cell A1, cell A2, and cell A3, as shown in the following figure.

Effect Display

PC

Save the template and click Data Analysis Preview. The effect is the same as that shown in section "Application Scenario."

Mobile Terminal

The Data Analysis Preview cannot be displayed on mobile terminals.

You can click to download the template Collapsible Tree.cpt.

No Expand Button in the Exported Collapsible Tree

After you export the collapsible tree to Excel, the expand and collapse buttons will not be saved, as shown in the following figure.