I. Overview
1. version
| Report server version | JAR | App | HTML5 mobile display plugin |
|---|---|---|---|
| 10.0 | 2020-04-26 | 10.4.69 | V10.4.69 |
2. Application scenarios
When the template page is long, you want to navigate to the specified component location on this page by clicking the floating window, which can be set by the method in this article.
Note: The homepage template does not support quick positioning.
II. Function introduction
A floating window can be set in the template, click to navigate to the specified position on the page.
1. Navigation style setting pane
1)Navigation display style setting entry
When the body layout in the decision report is re-layout, the navigation display style can be set in the mobile terminal properties of the body. As shown below:
2)Navigation Attribute Setting Entry
Use the navigation to navigate to the widgets, report blocks, chart blocks, and Tab-layout on the page.
Quick positioning under body does not support absolute canvas blocks, widgets under absolute canvas blocks, and widgets under tabs.
Take the chart block positioned in the template as an example, the setting pane is as shown in the figure below:
Note 1: "Navigation name" defaults to the widget name, which can be customized and supports line breaks and space characters; if the name is too long, the display will be truncated.
Note 2: Navigation cannot be used in frozen components; if the use navigationbuttons is checked, the components cannot be frozen.
Note 3: Only 8 navigation buttons can be displayed at most, and more than 8 navigation buttons will not be displayed; the order of navigation arrangement is the same as that of body>mobile terminal>widgets order.
2. Complex scene
When there is a nesting relationship, the navigation display is shown in the following table:
| Scene | Effect |
|---|---|
| Both body and tabpane check theDisplay navigation below this level | Only the navigation of the first level of components in the body is displayed. |
| The body dosen't check the Display navigation below this level, tabpane check it | It is shown that the component navigation under tcurrent tab,If you switch Tab, it switch to the component navigation under this tab. |
| Drag Tab2 into Tab1, and the tabpanes check the Display navigation below this level | Only the navigation of the first level component in Tab1 will be displayed; switch the tab page, and the component navigation under this tab will be displayed. |
| Drag the absolute canvas block into the body, and the component in the canvas block opens the navigation | It display that the navigation of the components in the absolute canvas block; If there are multiple components in a row of the canvas block, when you slide to the top of the page, only the navigation button of the left component is selected. |
3. Examples
1. Prepare template
Open the template in the FineReport designer:
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Mobile\Mobile Dashboard\Retail Groups Monitoring_mobile.frm
Click to download the template:
Retail Groups Monitoring_mobile.frm
2. Set the navigation style pane
Select body in the Attributes pane on the right, and click Mobile Terminal> Navigation Style> Sidebar to set the navigation style pane. As shown below:
3. Setting the positioning component
1)Select the report block report0, click on the mobile terminal, check the use navigation button, and the navigation name is Sales condition, as shown in the following figure:
2) Select the chart block chart0, click on the mobile terminal, check the use navigation button, and the navigation name is Sales Distribution, as shown in the following figure:
3)Select the chart block chart3_c, click on the mobile terminal, check the use navigation button, and the navigation name is the data segment distribution, as shown in the following figure:
4. Effect Preview
Take the App effect as an example, as shown in the figure below:
