[General] Adaptation on the Mobile Terminals

Version

Application Scenario

When you view the report (created on the PC) on the mobile terminals, the default adaptation effect provided by FineReport may not be satisfactory.

For example, a large report may be scaled down too much on a mobile phone, resulting in blurry fonts.

In this case, you can manually control the display effect on the mobile terminals by the Adaptation setting in Mobile Attribute.

Notes

1. After you configure the Adaptation setting in Mobile Attribute, the setting only takes effect on the HTML5 terminal and the DataAnalyst app.

2. If the template is still displayed with the PC effect after you configure the Adaptation setting in Mobile Attribute, you are advised to set PC Mobile Attribute to the default setting or No Adaptation.

Function Entry

In a general report, choose Template > Mobile Attribute on the menu bar to view the setting page of Adaptation. In this case, you can set Horizontal Screen and Vertical Screen separately, as shown in the following figure.

Adaptation

Four setting items, namely, Horizontal Adaptation, Vertical Adaptation, Bidirectional Adaptation, and No Adaptation, are available for both Horizontal Screen and Vertical Screen in Adaptation.

Taking Vertical Screen as an example, the following table shows the specific preview effects.

For details, you can download the sample template Graphical Progress Bar.cpt.

Note:

Horizontal Adaptation may not take effect on mobile phones of some models. In this case, you can increase the cell height in the template to ensure that the text content is fully displayed vertically after you select Horizontal Adaptation.

Adaptation Attribute	Description	Effect Preview
Horizontal Adaptation	The report is scaled proportionally to fill the screen horizontally.
Vertical Adaptation	The report fills the screen vertically. If the report is too large, it will be scaled down. Otherwise, the report will be scaled up. You can scroll the report horizontally to view the whole report.
Bidirectional Adaptation	All cells will be either expanded or contracted simultaneously in both width and height to fill the whole screen.
No Adaptation	The report is displayed in its original size.

Canvas Adaptation

Function Entry

For details, see FVS Canvas Edit and Adaptation. The following figure shows the setting.

Canvas Adaptation

If Mobile Layout is not enabled, the five adaptation methods of canvas adaptation, namely, Auto, Vertically, Horizontally, Horizontally and Vertically, and None, take effect for all the pages in the template.

If you enable Mobile Layout, the Adaptation setting of the canvas does not take effect. The component will be resized according to the canvas size. The layout of components follows the order of components/groups from left to right and top to bottom in the template canvas. Overlapping layers are displayed from top to bottom.

For a clear demonstration, the sample template page is set to blue, with a canvas size of 375*600. The background of the pie chart component is set to white, filling the whole canvas. The following table shows the specific setting.

You can download the sample template Canvas Adaptation on Mobile Terminals.fvs.

Layout Method	Adaptation Method	Description	Effect Preview
Layout retained	Auto	The canvas is adapted proportionally to fit the screen for display. Blank spaces may exist on both sides in a certain direction.
	Vertically	The canvas fills the screen vertically and is scaled proportionally horizontally. If the horizontal size of the canvas is smaller than the screen width, blank spaces exist on both the left and right sides. If the horizontal size of the canvas exceeds the screen width, you can view the overflowing content by scrolling the content left and right.
	Horizontally	The canvas fills the screen horizontally and is scaled proportionally vertically. If the vertical size of the canvas is less than the screen height, blank spaces exist on both the top and bottom sides. If the vertical size of the canvas exceeds the screen width, you can view the overflowing content by scrolling the content up and down.
	Horizontally and Vertically	The canvas fills the screen both horizontally and vertically.
	None	The canvas maintains the size set in the designer.
Relayout	/	/

Adaptation of the Table Component Content

Function Entry

Switch to the preview page of the mobile terminal and select the table component. In this case, you can set the four adaptation methods, namely, Vertically, Horizontally, Horizontally and Vertically, and None, under Content > Adaptation on the right, as shown in the following figure.

Adaptation Method of the Content

1. If Mobile Layout is not enabled, the content of the table component fills the table component for display according to the set adaptation method.

2. If Mobile Layout is enabled, the content of the table component always stretches vertically to fill the available height.

The display effects are the same when Adaptation is set to None or Vertically. In both cases, the content of the table component stretches vertically to fill the available height. Blank spaces exist if the horizontal size of the canvas content is smaller than the screen width. If the horizontal size of the canvas content exceeds the screen height, you can view the whole content by scrolling the component left and right.

The display effects are the same when Adaptation is set to Horizontally or Horizontally and Vertically. In both cases, the content stretches vertically and horizontally to fill the component.

You can set Mobile Attribute for the whole template, or for the report block and the chart separately.

You can download the template Getting Started with an FRM Report.frm and open the template in the designer.

Template

Function Entry

In the FRM report, choose Template > Mobile Attribute on the menu bar. If you select Set as Mobile Template, Auto Match by Adaptation Attribute is ticked by default.

Effect Preview

Taking the effect on the DataAnalyst app as an example, the following figure shows the effect.

Report Block

Function Entry

Click report0 on the right and select Mobile Terminal. In this case, the setting items for layout retained and relayout are differeent on the setting panel of Adaptation. Additional setting items for layout retained are marked in the orange box, as shown in the following figure.

Adaptation

1. The four adaptation methods for Horizontal Screen and Vertical Screen are the same as those in the general report.

2. The setting item Collapse, which contains the options of None (the default setting) and Custom, appears when you select App Relayout.

The following figure shows the setting page of Custom.

The following table describes the specific setting items.

3. If you select Custom for Collapse, the following figure shows the specific setting.

4. Taking the DataAnalyst app as an example, the following figure shows the preview effect on the mobile terminals.

Chart

Function Entry

Click chart0 on the right and select Mobile Terminal. In this case, the setting items for layout retained and relayout are different on the setting panel of Adaptation for charts. Additional setting items for App Relayout are marked in the orange box, as shown in the following figure.

Chart Adaptation

1. The setting item Zoom-In Logic, which is fixed as Proportional Adaptation, appears when you select App Relayout.

2. The setting item Zoom-Out Logic, which includes the options of Auto Match (the default setting), Proportional Adaptation by Area, and Proportional Adaptation, appears when you select App Relayout.

If you select Auto Match, the system automatically matches the zoom-out logic based on the template.

If you select Proportional Adaptation by Area, the chart is compressed horizontally and zoomed in vertically with the chart area unchanged. The maximum height is 80% of the screen display area.

If you select Proportional Adaptation, the chart retains its aspect ratio and adapts to the display area proportionally.

3. Similar to Collapse for the report block, the setting item Collapse, which contains the options of None (the default setting) and Custom, appears when you select App Relayout.

The setting items on the setting page of Custom are the same as those of the report block under Mobile Terminal > Adaptation> Collapse > Custom, except for the absence of Row Index > Display Button > Start to fold from N, as shown in the following figure.

4. Set Zoom-Out Logic to Proportional Adaptation by Area and keep the default setting of other setting items. The following figure shows the specific setting.

5. Taking the DataAnalyst app as an example, the following figure shows the preview effect on the mobile terminals.