Organization tree linkage

1. Expected effect

In actual use, one often encounters an architecture: the tree diagram is displayed on the left, and the detailed information of a node in the tree is displayed on the right. When you click the organization tree on the left, the table on the right will automatically change accordingly. As shown below:

2. Implementation ideas

There are two ways for users to realize the organization tree transmission of parameters:

1) The tree on the left uses the View Tree Widget to display the organization tree, and the tree on the right uses the Iframe widget to display the detailed information of the tree nodes.

2) The tree on the left uses the cell expansion method to realize the organization tree, and on the right uses the Iframe widget to display the detailed information of the tree nodes.

For the first method, please refer to the View tree hyperlink. This article mainly introduces the second method.

1. Sub-template

Create a new ordinary report, named the organization tree transmission parameters_detailed.cpt, and save it in %FR_HOME%\webroot\WEB-INF\reportlets\doc-EN\ReportApplication\BasicApplication.

1) New Dataset

Create a new dataset ds1, the SQL statement is SELECT * FROM department WHERE did='${did}', as shown in the following figure:

2) Report design

The report body style, as shown in the figure below:

2. Main template

Create a new ordinary report, named the organization tree transmission parameters_frame.cpt, and save it in %FR_HOME%\webroot\WEB-INF\reportlets\doc-EN\ReportApplication\BasicApplication.

1) New Dataset

• Dataset department

    Create a new dataset department, the SQL statement is SELECT * FROM department, as shown in the following figure:

• Tree dataset Tree

    Create a new tree dataset tree1, select the built-in dataset department, and check Build tree according to the parent field of the selected dataset.

The original identity field is did, and the parent identity field is fid, as shown in the following table:

2) Setting up the organization tree

• Report design

    Drag the hierarchical columns in the tree dataset Tree into cells B2, B3, and B4, as shown in the following figure:

• Cell indentation

    Set the Horizontal Align of B2, B3, and B4 to be Left, the Identation of cell B3 is 20, and Identation of cell B4 is 40 . As shown below:

• Set the parent grid

    Set the Left Parent Cell of B3 to cell B2, and the Left Parent Cell of B4 to cell B3. As shown below:

• Filter blank lines

    Filter cells B3 and B4 separately, with formula condition: REVERSE(ISNULL($$$)), as shown in the figure below:

• Cell Display

    Set the Display of cells B2, B3, and B4 to Data Dictionary, the dataset is department, the actual value is did, and the display value is department. As shown below:

3) Set web page frame

Merge cells D2, D3, and D4 and set them as Iframe widget, as shown in the following figure:

The properties of the page frame are shown in the following table:

3. Organization tree transfer parameters

This step realizes that when a node of the organization tree is clicked on the left side, the detailed information of the node will be displayed on the detailed page on the right side.

Select cells B2, B3, and B4, add Hyperlink>JavaScript, and set the parameter did=$$$, as shown in the figure below:

The JavaScript code is as follows:

var url = FR.cjkEncode("${servletURL}?viewlet=doc-EN/ReportApplication/BasicApplication/Organization tree 
linkage_detailed.cpt&op=view");
FR.doHyperlinkByPost(url, {
did: did
}, 'REPORT');

4. Effect preview

Save the template, click Data Analysis, and view the report. The effect is as shown in I.1 Expected effect.

Note: The mobile terminal does not support Iframe widget .

Note: Only data analysis and report preview methods are supported.

1. Main template

For the completed template, please refer to: %FR_HOME%\webroot\WEB-INF\reportlets\doc-EN\ReportApplication\BasicApplication\Organization tree linkage_frame.cpt

Click to download the template: Organization tree linkage_frame.cpt

2. Sub-template

The completed template, please refer to: %FR_HOME%\webroot\WEB-INF\reportlets\doc-EN\ReportApplication\BasicApplication\Organization tree linkage_detailed.cpt

Click to download the template: Organization tree linkage_detailed.cpt