Collapse Tree Setting with the New Calculation Engine

Version

Application Scenario

After New Calculation Engine is enabled in the CPT template, the entry for the Calculation Attribute function is added in Template (on the designer menu bar). You can optimize the performance related to the collapsible tree through the experimental functions in Calculation Attribute. This document mainly introduces how to configure a collapsible tree based on the new calculation engine, as shown in the following figure.

Advantages of the New Calculation Engine-based Collapsible Tree

1. Better Performance

The performances in data fetch and frontend rendering have been optimized and improved by the new calculation engine-based asynchronous collapsible tree.

The performance in frontend rendering has been improved by the new calculation engine-based non-asynchronous collapsible tree.

2. Optimized Function

The asynchronous/non-asynchronous collapsible tree supports the repetition/freezing function (but requiring all expanded/collapsed rows and columns to be repeated/frozen simultaneously).

The following sections illustrate the relevant functions of Experimental Function in Calculation Attribute.

• You can select Collapsible Tree to optimize the loading performance of the frontend data in the current template, thus optimizing the front-end performance of the collapsible tree.

• The Asynchronous Fetch function will be added on the calculation attribute page after you select Collapsible Tree, allowing you to retrieve data asynchronously in the template. This function, which optimizes the performance of the collapsible tree from the data fetch stage, can be enabled when you deal with large amounts of data.

• If you select Collapsible Tree - Async, the performance of the collapsible tree in all templates of the current project can be optimized, with the Asynchronous Fetch function enabled

Note:

You can freeze rows/columns and adjust the content style of the cell where the collapsible button is located through the new engine-based collapsible tree. If the collapsible tree is expanded vertically, you cannot freeze rows. If the collapsible tree is expanded horizontally, you cannot freeze columns.

Collapsible Tree - Asynchronous Fetch

The collapsible tree - asynchronous fetch function is designed mainly for the single vertical collapsible tree with a relatively standard structure. The performance of the collapsible tree is optimized from the data fetch stage through the asynchronous fetch and asynchronous loading functions. You can use the collapsible tree - asynchronous fetch function in scenarios that meet the following conditions simultaneously.

• The dataset is single.

• The collapsible tree button is arranged vertically.

• Only Sum() and inline calculations are used in data columns.

• The collapsible tree is single.

• The left parent cell of the data column in the row (where the collapsible tree button is located) is set to be the cell where the collapsible tree button is located.

Note:

You can determine whether the asynchronous fetch function is supported by converting the data fetch mode for the template using the collapsible tree. If the compatibility mode is displayed after the conversion, the asynchronous fetch function is not supported.

Collapsible Tree - Non-Asynchronous Fetch

The collapsible tree - non-asynchronous fetch function can optimize the frontend data loading performance, achieving the frontend asynchronous loading function and optimizing the frontend performance of the collapsible tree. You can use the collapsible tree - non-asynchronous fetch function in the following scenarios.

• The collapsible tree is expanded vertically.

• The collapsible tree is single.

New Calculation Engine Enabling

1. Create a general report, choose Template > Report Engine Attribute, select Enable Background Pagination, select New Calculation Engine, and click OK, as shown in the following figure.

2. Choose Template (on the designer menu bar) > Calculation Attribute, click Experimental Function, and select Collapsible Tree, as shown in the following figure.

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.

Collapsible 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 simultaneously, 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:

By setting 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 rows without data, as shown in the following figure.

Tree Node Button Adding

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

Note:

You need to set the collapsible tree buttons for all levels of the new engine-based collapsible trees.

Effect Display

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

Note:

The function is not supported on mobile terminals.

Note:

To make the setting take effect, you need to enable New Calculation Engine and select Collapsible Tree after downloading the template.

You can download the template Collapsible Tree.cpt.