I. Overview
1) Expected effect
When designing the report, it is hoped that click the left view tree node and the report content corresponding to the node will be dynamically displayed on the right. The expected effect is as shown in the figure below:
2) Implementation roadmap
Create two templates, report A and report B. Report A is divided into two parts. Add View Tree widget on the left to define the view tree, and add Plugin Iframe widget on the right to display report B.
Add Click events to the View Tree widget to pass the selected value to report B in the Web Box widget.
II. Example
1. Making report B
You can directly open the completed template: %FR_HOME%\webroot\WEB-INF\reportlets\doc-EN\Parameter\View_tree_reportB.cpt
1) Preparing data
Create a general report and a built-in dataset. The table design is as follows:
2) Table design
Drag the field into the cell and enter the corresponding title, as shown below:
3) Adding filtering
Double click on A2 to add filter criteria to A2 and select data column "Position" equals formula:sql("FRDemoEN", "select Deparement_name from CorporationDepartment where DepartmentID='" + p + "'", 1)，
2. Making report A
1) Preparing data
Create a general report and query ds1 in the database. The SQL query statement is: SELECT * FROM CorporationDepartment.
2) Table design
Split the table into two parts, put the view tree on the left and the page box on the right, as shown below:
3) View tree widget settings
Add a "View Tree widget" in the left border of the table and build the tree. Select "Automated Build" as the following steps:
Note: For details, see Bulid Drop-down tree.
Set widget properties: deselect "Multiselect" and set the view tree type to radio view tree. Select "Only return leaf node" and deselect "Return full hierarchical path" so that the data returned is the currently selected data, not the hierarchical path. As shown below:
Click event Settings
To add a click event to the view tree, enter the following JavaScript code:
var b = this.getValue();
var url = encodeURI(encodeURI("${servletURL}?viewlet=doc-EN/Parameter/View_tree_reportB.cpt&__showtoolbar__=false"));
FR.doHyperlinkByGet(url, {p: b}, 'REPORT');
Note: The value type returned by the view tree is array.
The steps are as follows:
4) Web box widget settings
Add a "Plugin Iframe" in the right border of the table. The widget name must be the same as in the JS code above, which is "report".
In the address bar type: ${servletURL}?viewlet=doc-EN/Parameter/View_tree_reportB.cpt&__showtoolbar__=false.If the table does not need to be displayed in the right border of the table, the address bar can also be left blank.
Note: under the Internet explorer browser address bar enter the URL of "doc-EN/Parameter/View_tree_reportB.cpt" part parameters for preview after viewlet should take the part.
3. Effect preview
Save the two reports and click "Data Analysis Preview" or Data Entry Preview in Report A. The effect is the same as expected in section I.
4. Example extensions
1) How to implement decision report
The above example method is also applicable to the decision report. When designing a decision report, drag the widget directly into the body for setting, but the Plugin Iframe widget plug-in needs to be installed first. For details, refer to the document: Use the Plugin Iframe widget in the decision report. As shown below:
The other steps are exactly the same. See attachment template for details.
2) How to achieve multiple select View Tree
If multiple view tree widgets are selected, select Multiselect and Return full Hierarchical Path. The SQL content of the dataset in the report corresponding to the "Plugin Iframe" also changes accordingly. The parameters passed by the view tree are separated by the replace () formula and Treelayer () formula, and finally the data is filtered out. As shown below:
The other Settings are identical, as shown in the attachment template.
III. Precautions
1) An error occurs when internet explorer clicks a tree node
Problem description
In Internet Explorer, clicking a tree node sometimes causes the error.
Cause analysis,
When reportB is created, para is used as the parameter defined in the SQL () function to add filtering conditions, and the JS code in the template contains fr.doHyperLinkbyget (URL, {para: B}, 'REPORT').
Using Internet explorer provides API to open the template designer JS code in the URL, if the URL contains as shown in the link https://tool.oschina.net/commons?type=2 escape character (e.g., & para), The resulting URL link encoding is abnormal, resulting in an error.
The solution
Avoid escape characters in the above links when defining parameters in SQL () functions, such as p in this example.
IV. Download the template
For the completed template, see:
%FR_HOME%\webroot\WEB-INF\reportlets\doc-EN\Parameter\View_tree_reportA.cpt
%FR_HOME%\webroot\WEB-INF\reportlets\doc-EN\Parameter\View_tree_reportB.cpt
%FR_HOME%\webroot\WEB-INF\reportlets\doc-EN\Parameter\View_tree_dashboard.frm
%FR_HOME%\webroot\WEB-INF\reportlets\doc-EN\Parameter\View_tree_multiple_select_reportsA.cpt
%FR_HOME%\webroot\WEB-INF\reportlets\doc-EN\Parameter\View_tree_multiple_select_reportsB.cpt
Click to download the templates:
View_tree_multiple_select_reportsA.cpt
View_tree_multiple_select_reportsB.cpt
Previous：View Tree Widget
