[General] Dynamic Folding Tree on Mobile Terminal

1. Expected effect

The mobile terminal  realizes the dynamic folding tree, the effect is shown in the following figure:

2. Implementation ideas

Control the folding and unfolding of data columns through conditional attributes, and realize the effect of dynamic folding tree on the mobile terminal.

1. Template preparation

1) In FineReport designer, clickFile> New Dashboard, and drag into theReport Block;

2) Create a new template dataset, where the SQL statement of the ds1 dataset is:SELECT * FROM Sales_Volume;

The SQL statement of the ds2 dataset is:SELECT * FROM SaleRental where SalesPerson='${SalesPerson}'.

 As shown below:

3) Click theEdit component button in the right of the new dashboard, and drag the data column into the corresponding cell, as shown in the following figure:

2. Set conditional formatting

1) Select cell A1, clickConditional Formatting in the attribute panel on the right, and addConditional Formatting 1to cell A1;

SelectHyperlink Type, and add the formulaLEN(E1)=0.

As shown below:

CheckUse Links button, and then clickEditbutton;

Add the link asCurrent Dashboard Object 1, add the parameter SalesPerson, the value is formula type$$$, as shown in the figure below:

2) Add Conditional Formatting 2 to A1 cell, selectHyperlink Type, and add the formulaLEN(E1)>0.

As shown below:

CheckUse Links button, and then clickEdit button, add the link asCurrent Dashboard Object 1, add the parameter SalesPerson. As shown in the figure below:

3) Select cell A2, clickConditional Formatting in the attribute panel on the right, and addConditional Formatting 1to cell A2.

Select Row Height, and add the formulaLEN(E1)=0.

As shown below:

3. Set B2 cell

1) Select cell B2, clickCell Attributesin the property panel on the right, and customize theLeft Parent Cellas cellA1, as shown in the following figure:

2) Select cell B2, click the Cell Element in the property panel on the right, and set the data asList, as shown in the figure below:

4. Filter settings

1) Double-click the E1 cell and click Filter, as shown in the figure below:

2) Hide the E1 column, as shown in the figure below:

5. Effect display

1) PC terminal

Save the template and clickPC Preview. The effect is the same as theI.1. Expected Effect.

2) Mobile terminal

The APP effect is shown in the figure below:

The HTML5 effect is shown in the figure below:

The completed template can be found at: %FR_HOME%\webroot\WEB-INF\reportlets\doc-EN\Dashboard\[General]_Dynamic_folding_tree_on_mobile_terminal.frm

Click to download the template:

[General]_Dynamic_folding_tree_on_mobile_terminal.frm