I. Overview
When making a mobile template, we often have to set mobile attributes. This article details the role of each setting in mobile attributes.
| You will learn |
|---|
|
II. Mobile attributes of a common report
1. Mobile attributes of a common report
1) Open a common report and click [Template]-[Mobile Attribute]. The [Mobile Attribute] pane pops up.
2) The [Mobile Attribute] pane displays three main settings: [Template Settings], [Self-Adaption] and [Other]. [Preview Effect] changes from time to time with settings.
2. Template Settings
1) Check [Set as mobile canvas size] and click [OK]. A new page boundary appears in the designer interface.
2) This function provides the canvas size of a mobile template in the designer and guides users to make a mobile template of an appropriate size, which improves the ease of use.
3. Self-Adaption
1) When a report made on a PC terminal is viewed on a mobile terminal, the default self-adaptation provided by FineReport is dissatisfactory. For example, a large report is scaled down too much on a mobile phone, and is therefore blurred. You can control the display effect of the report on a mobile terminal by setting the mobile self-adaptation attribute.
2) Vertical and horizontal fit can be controlled separately and horizontal fit applies to Pads.
3) Horizontal and vertical fit attributes include: horizontal fit, vertical fit, non-adaptive and bidirectional fit, as described in the following table:
Self-adaptation attribute | Description | Application scenario |
Horizontal Fit | A report fits the screen horizontally and is displayed in the original size vertically | In the parameter query, query results often occupy a long page, which will leave blank space horizontally if displayed on a screen |
Vertical Fit | A report fits the screen vertically | Mainly applicable to scenarios where a report is wide and no blank space is expected vertically |
Non Adaptive | A report is displayed in the original size | Applicable to scenarios where a report is large, wide or set to be frozen |
Bidirectional Fit | The width and height of all cells of a report stretch or shrink, so that the report can fit the entire screen, with the width ratio of each column and the height ratio of each row unchanged; no scroll bars appear in any direction | Only applicable to scenarios where a report is smaller or a little larger than the screen
|
4. Other
1) [Others] involves the following two settings:
[Refresh when the page is reproduced.] and [Allow double-click/two-finger zoom].
2) [Refresh when the page is reproduced.]
It is unchecked by default.
In the process of data entry, we often need to close the current page and then refresh the parent page after successful data entry. Check [Refresh when the page is reproduced.] to automatically refresh the page after successful data entry.
3) [Allow double-click/two-finger zoom]
It is checked by default.
As shown in below, we can zoom in or out the report with two fingers.
III. Mobile attributes of a dashboard
1. Mobile Attribute pane of a dashboard
1) Open any of the dashboards and click [Template]-[Mobile Attribute]. The [Mobile Attribute] pane pops up.
2) The [Mobile Attribute] pane displays two main settings: [Template Settings] and [Other].
2. Template Settings
1) Check [Set as mobile canvas size] and click [OK].
2) The canvas size of the dashboard will become 375 Pixel × 560 Pixel. Specifically, the width will be 375 Pixel, which cannot be modified. The height will initially be 560 Pixel, which can be modified.
3. Other
1) Other involves the following three settings: [Refresh when the page is reproduced.], [Show leave prompt when data is not submitted] and [Allow double-click/two-finger zoom].
2) [Refresh when the page is reproduced.]
It is unchecked by default.
In the process of data entry, we often need to close the current page and then refresh the parent page after successful data entry. Check [Refresh when the page is reproduced.] to automatically refresh the page after successful data entry.
3) [Show leave prompt when data is not submitted]
It is unchecked by default. No prompt will appear when you leave the report page, no matter whether there is a change in the widget bar. For details, see the following table:
Status | Remarks |
[Show leave prompt when data is not submitted] is checked
| 1) If there is a change in the widget bar, a prompt indicating that data has not been submitted will appear when you leave the report page, and you may leave the page by clicking OK or stay on the current page by clicking Cancel. 2) If there is no change in the widget bar, no prompt will appear when you leave the report page. |
[Show leave prompt when data is not submitted] is unchecked
| No prompt will appear when you leave the report page, no matter whether there is a change in the widget bar. |
4) [Allow double-click/two-finger zoom]
It is checked by default. As shown below, we can zoom in or out the report with two fingers.
4. Mobile attributes of body
1) Open any of the dashboards in the FineReport designer, select body and click [Mobile Terminal], as shown below:
2) Mobile attributes of body is described in the table below:
Attribute | Remarks |
App Relayout | 1) If [App Relayout] is checked, a report will be rearranged when viewed on a mobile terminal, with components arranged from top to bottom in line with the settings in Widget Order 2) If [App Relayout] is unchecked, the layout of a report will be maintained when the report is viewed on a mobile terminal 3) For details, please refer to Mobile Phone Relayout |
Padding | Set the padding of body when a template is displayed on a mobile terminal |
Layout | Adjust the interval between components by customizing Component Interval |
Widget Order | Customize the order in which components are displayed on a mobile terminal |
5. Mobile attributes of Tabpane
1) Open a dashboard in the FineReport designer, select tablapane and click [Mobile Terminal], as shown below:
2) Mobile attributes of tablayout are described in the table below:
Attribute | Remarks |
Style Template | Choose the style of tabpane |
Padding | Manually set the top, bottom, left and right padding of tabpane, which are 4 by default. |
Display navigation below this level | If checked, component navigation below this level will be displayed in the preview. Note 1: you have to check to display the navigation of each component in [Mobile Terminal] of the component. |
Component Interval | Manually set the component interval in tabpane, which is 4 by default. |
6. Mobile attributes of a report block
1) Select report0 and click [Attributes]. If [Visible] is checked, the report block will be visible in the preview. If [Visible] is unchecked, the report block will be invisible in the preview.
2) Select report0 and click [Mobile Terminal] to set mobile attributes of the report block.
Mobile attributes of a report block are described in the table below:
Attribute | Remarks |
Self Adaption | Manually control the self-adaptation effect of a report block on a mobile terminal through [Self Adaption] options under [Mobile Terminal]. |
Height Limit | It is unchecked by default. If checked, then the maximum height limit will be enabled and maximum height settings displayed. You can manually input a height, which is by default 0.75, which means that when the height of a report block exceeds screen height, only 75% of the content will be displayed. |
Allow Full Screen | It is unchecked by default. If checked, you can zoom in a report block on a mobile terminal. |
Component is selectable | It is unchecked by default. If checked, you can select the report block by clicking it on a mobile terminal. Note 1: the setting takes effect when multiple components or components below Tab are rearranged. Note 2: in the horizontal screen mode, the setting cannot take effect when a report is viewed on an App; in the horizontal and vertical screen mode, the setting takes effect when a report is accessed through URL. |
7. Mobile attributes of a chart block
1) Select chart0 and click [Attributes]. If [Visible] is checked, the chart block will be visible in the preview. If [Visible] is unchecked, the chart block will be invisible in the preview.
2) Select chart0 and click [Mobile Terminal] to set mobile attributes of the chart block.
Mobile attributes of a chart block are described in the table below:
Attribute | Remarks |
Chart Adaptivity | Control the self-adaptation effect of a chart block on a mobile terminal. |
Allow Full Screen | It is unchecked by default. If checked, you can zoom in a chart block on a mobile terminal. |
Component is selectable | It is unchecked by default. If checked, you can select a chart block by clicking it on a mobile terminal. Note 1: the setting takes effect when multiple components or components below Tab are rearranged. Note 2: in the horizontal screen mode, the setting cannot take effect when a report is viewed on an App; in the horizontal and vertical screen mode, the setting takes effect when a report is accessed through URL. |
