I. Overview
1. Version
| Report server version | JAR package | App version | HTML5 mobile display plugin | Support function |
|---|---|---|---|---|
| 10.0 | 2020-02-28 | 10.4.61 | V10.4.61 | Folding and unfolding of report block or chart block on mobile terminal |
2. Expected effect
The user can use the Collapse Expanded Style function to realize the folding and expanding components (report block/chart block) on the mobile terminal, but the component title must be set, and the Allow Full Screen button cannot be supported at the same time.
1) The user wants to realize the function of folding and expanding the component on the mobile terminal without setting the component title.
2) The user wants to use theAllow Full Screen and Fold and Expandbuttons at the same time.
As shown below:
3. Implementation ideas
The user can control the folding and unfolding of the report block through JavaScript code.
Note 1: The template needs to be checked on the mobile terminal to re-layout.
Note 2: This function is not supported under the horizontal screen of the mobile phone.
Note 3: Only the Allow Full Screen and Fold and Expand buttons can be used, and the expansion and collapse of components in the full screen state are not supported.
II. Example 1: Report block static collapse and expand button
1. Template preparation
Open the template:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Dashboard\Retail group real-time monitoring-phone.frm
Click to download the template:
Retail group real-time monitoring-phone.frm
2. Setting Expand Collapse
Click onComponent Settings>report0>Mobile Terminal,Setting collapsecustom, Set the display button from the4The line begins to collapse, don't click Dispaly button, defaultFold,As shown below:
3. Set up hyperlink
1) Insert text
Double-click the report blockreport0,mergeB1~C1Cell, clickCell ElementTo insert normal text:Expand and collapse,As shown below:
2) Insert a hyperlink
Selected Cell B1, Clickhyperlink,insert JavaScriptscript, Enter the JavaScript code, as shown in the following figure:
The JavaScript code is as follows:
4. Effect preview
Save the template and clickMobile Preview.
The user can customize the position of the Fold and Expand Button to prevent conflicts with theAllow Full Screenbutton.
If the report block does not have a title, it will not affect the use of theExpand and Collapsefunction.
As shown below:
III. Example 2: Report block dynamic collapse and expand button
The Folding and unfolding button in this example can be changed following the change of the component Folding and unfoldingstate.
1. Template preparation
Open the template:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Dashboard\Retail group real-time monitoring-phone.frm
Click to download the template:
Retail group real-time monitoring-phone.frm
2. Set Expand Collapse
Click onComponent Settings>report0>Mobile Terminal, Setting collapsecustom, Set the display button from the2The line begins to collapse,don't click Dispalybutton, defaultUnfold,As shown below:
3. Set the text widget
Add oneText widget, Set the component name toaa, Set up componentsInvisible, Set the widget value toClick to collapse∧,As shown below:
Note: Since the default state of the component is set to Expand in Section III.2, the initial control value is set to Click to collapse∧
If the default state of the component is Collapsed, the initial control value is set to Click to expand∨
4. Set condition attributes
Double-click the report blockreport0,mergeB1~D1Cell, clickCell element, Insert formula=$aa,As shown below:
1) Expand to collapsed state
SelectedB1Cell, insertConditional Formatting, Attribute additionhyperlink, CheckUse Links, Set formula conditions$aa='Click to expand∨',As shown below:
EditHyperlink in condition attribute, insert JavaScript script, Enter the JavaScript code, as shown in the figure below:
The JavaScript code is as follows:
2) Folded to unfolded state
SelectedB1Cell, insertConditional Formatting, Attribute additionHyperlink, CheckUse Links, Set formula conditions$aa='Click to collapse∧',As shown below:
EditHyperlink in condition attribute, insert JavaScript script, Enter the JavaScript code, as shown in the figure below:
The JavaScript code is as follows:
5. Effect preview
Save the template and clickMobile Preview. The custom Folding and unfolding button can be changed following the change of the component's Folding and unfolding state. As shown below:
IV. Example 3: Chart block folding function
Note: This example can only realize the chart block folding function. If you need to realize the effect of chart block expansion and folding, please refer to: [General] Collapse Expanded Style
1. Template preparation
Open the template:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Dashboard\Retail group real-time monitoring-phone.frm
Click to download the template:
Retail group real-time monitoring-phone.frm
2. Setting Expand Collapse
Click onComponent Settings>chart0>Mobile Terminal, Setting collapsecustom, don't check the display button, defaultUnfold,As shown below:
3. Set chart special effects
Double-click the chart blockchart0, ClickSpecial Effects>Interaction>Add Link>JavaScript, Add a JavaScript statement, as shown in the following figure:
The JavaScript code is as follows:
4. Effect preview
Save the template and clickMobile Preview, Click the chart block to collapse the component, as shown in the figure below:
V. Completed template
1) Example 1
Please refer to the completed template:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\JS\JS realizes the static folding and unfolding button of report block.frm
Click to download the template:
JS_realizes_static_folding_and_unfolding_button_of _report_block.frm
2) Example 2
Please refer to the completed template:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\phone\JS\JS realizes dynamic folding and unfolding button of report block.frm
Click to download the template:
JS_realizes_dynamic_folding_and_unfolding_button_of_report_block.frm
3) Example 3
Please refer to the completed template:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\phone\JS\JS realizes chart block folding function.frm
Click to download the template:
