I. Overview
1. Version
| Mobile version |
|---|
| App 9.0 |
2. Application scenarios
When the report made on the PC is viewed on the mobile phone, the self-adaption effect provided by FineReport by default is not satisfactory. For example, the report is relatively large, it is shrunk very small on the phone, the font is blurred, etc.
At this time, you can manually control the display effect of the report on the mobile terminal through the self-adaption option in the mobile attribute.
3. Function introduction
Set the self-adaption attributes of the mobile terminal to control the display effect of the report on the mobile terminal.
Note: After the mobile terminal self-adaption attribute setting is completed, it will only take effect on the HTML5 terminal and the App terminal.
II. Introduction to Self-adaption
1. Setting method
1)General report
In the general report, click Template>Mobile Attribute, as shown in the figure below:
Note: If there is content in the template, if you check the Set as mobile canvas size button, it will trigger the save as a template with "_mobile" as the suffix. You can refer to Setting the mobile phone template
2)Dashboard
In the dashboard, select a report block and click on the Mobile Terminal, as shown in the figure below:
Or click Template>Mobile terminal properties, it can be set as a mobile terminal exclusive template. As shown below:
2. Description of mobile terminal template
The description of the mobile terminal template is shown in the following table:
| Report type | Remarks |
|---|---|
| General report | Click Template>Mobile Attribute, check the Set as mobile canvas size button, the report will be adapted based on 4.7-inch screen mobile phones, zoom in mobile phones above 4.7 inches, and compress mobile phones below 4.7 inches |
| Dashboard | Click Template>Mobile Attribute, check the Set as mobile template button, the canvas size (375*560), the width can be locked, and the height can be customized and modified. Similar to general reports, dashboard will also be adapted based on mobile phones with 4.7-inch screens. Mobile phones with a 4.7-inch screen and above will be zoomed in, and mobile phones with a 4.7-inch screen and below will be compressed. |
3. Scaling logic
The vertical and horizontal self-adaption rules can be controlled separately, and the rules on the Pad adopt the horizontal screen settings.
Self-adaption attributes include: Horizontal Fit, Vertical Fit, Non-adaptive, and Bidirectional Fit. The specific instructions are shown in the following table:
| Self-adaption attributes | Description | Application scenarios |
|---|---|---|
| Horizontal Fit | The report fills the screen horizontally and keeps the original aspect ratio of the report unchanged. | It is mainly for the situation where the last page is very large after parameter query. |
| Vertical Fit | The report fills the screen vertically and zoom out if large, zoom in if small. | Mainly for the case where the table is relatively wide, do not want to leave blank vertically. |
| Non-adaptive | It is shown the original size of the report. | It is mainly for the case where the table is large or wide, or frozen setted. |
| Bidirectional Fit | The width and height of all cells can be stretched or shrunk simultaneously to fill the entire component. | It is only suitable for the case of less than one screen and not more than one screen. If the template exceeds one screen by a lot, or if it is paged, the bidirectional fit is not applicable. |
Note: Some mobile phone models may have the problem of "horizontal fit" not taking effect. At this time, the user can increase the height of the cell in the template to ensure that the vertical height can fully display the text content after the horizontal fit.
III. Examples
Note: For the mobile terminal preview method, please refer to The mobile terminal template preview
1. Auto-negotiation is not set
1) Preview %FR_HOME%\webapps\webroot\WEB-INF\doc-EN\reportlets\demo\basic\graphical display progress bar.cpt template on the mobile terminal, the effect is shown in the following figure:
图
2)Set vertical self-adaption
It can be found that the default effect shrinks the report to a small size and the font is a little fuzzy. You can set the vertical screen adaptive rule, for example, click Template>Mobile Attribute>Vertical screen-Vertical Fit, as shown in the following figure:
Preview the template on the mobile terminal, the effect is shown in the figure below:
图
IV. Pad component title font size adaptation
1. Version
| Report server version | App version | HTML5 mobile terminal display plugin | Support function |
|---|---|---|---|
| 10.0 | 10.4.61 | V10.4.61 | The title font size of the mobile template component on the Pad automatically adapts to the device |
2. Scope description
In the previous version, the template title on the Pad could not be self-adaption. When the user uses the Pad to view the template, the component title font size in the template is too small, which will affect the template experience on the mobile terminal. If the Version requirements of chapter IV.1. of this article are met, the title font size of the mobile template component on the Pad will automatically adapt to the device.
The scope of this function is described in the following table:
| Mobile device | Effective range | Terminal range | Component type |
|---|---|---|---|
| Pad | Form re-layout, form retain layout | APP, H5 | Tab block title, report block title, chart block title |
