I. Overview
1. Version
| Report designer version | App | HTML5 mobile display plugin |
|---|---|---|
| 10.0 | V10.0 | V10.0 |
Note: Pad does not support re-layout.
2. Application scenarios
In the mobile office scenario, it is very inconvenient for users to carry computers, and it is difficult to read projects on mobile phones. Pads have become the best mobile office equipment.
In order to reduce the time-consuming development and maintenance, mobile phones and pads often share a set of templates, and the two can be displayed self-adaption separately.
3. Function introduction
For the mobile terminal dashboard, after the Mobile Terminal Self-adaption is configured, the Pad terminal can be self-adaptively displayed, which is slightly different from the mobile terminal.
II. Body component
| Mobile layout | body layout | Component zoom | Preview effect |
|---|---|---|---|
| Keep layout | Adaptive layout | Horizontal fit | Width and height proportional scaling, horizontal adaptive full, vertical scroll bars may appear |
| Vertical fit | Width and height proportional zoom, horizontal/vertical self-adaptive full | ||
| Absolute layout | Area fixed | After cropping the blank part around, the width and height are scaled in equal proportions, and the horizontal direction is self-adaptive to full, and the vertical scroll bar may appear | |
| Area fit | After cropping the blank part around, the width and height are scaled in equal proportions, and the horizontal/vertical direction is self-adaptively filled |
III. Report block
1. Keep layout on mobile
1)Component preview effect
| Body layout | Component zoom | Whether the report block occupies the entire row | Report block self-adaption | Preview effect |
|---|---|---|---|---|
| Adaptive layout | Horizontal adaptive | Yes | Horizontal Fit | Full width, height adaptive, support maximum height limit |
| Vertical Fit | It has a maximum height limit | |||
| Bidirectional Fit | Width and height adaptive full, support maximum height limit | |||
| Non-adaptive | - | |||
| No | - | The same as the pc terminal, the width and height are distributed proportionally | ||
| Bidrectional Fit | - | - | ||
| Absolute layout | - | - | - |
2)Component freezing effect
| Classiffication | Report block self-adaption | Whether height limit | Line freeze | Column freeze |
|---|---|---|---|---|
| The component is horizontal adaptive, and the report block is a single-line report block | Horizontal adaptive | Yes | Support | Not support |
| No | Not support | |||
| Vertical adaptive | - | Not support | Support | |
| Bidrectional adaptive | - | Not support | Not support | |
| Non-adaptive | Yes | Support | Support | |
| No | Not support | |||
| Other conditions | Horizontal adaptive | - | Support | Not support |
| Vertical adaptive | - | Not support | Support | |
| Bidirectional adaptive | - | Not support | Not support | |
| Non-adaptive | - | Support | Support |
4. Chart block
1. Keep layout on the mobile terminal
| Layout style | Preview effect |
|---|---|
| Horizontal adaptive | If the chart block is side by side with other components, it is consistent with the PC side, and the aspect ratio is scaled. If the chart block occupies the entire row, it is highly adaptive, consistent with the effect of the report block. |
| Bidirecitonal adaptive | Consistent with PC end, width and height are distributed proportionally. |
| Area fixed | |
| Area fit |
V. Widgets
1. Keep layout on mobile terminal
| Classification | Widget | Preview effect |
|---|---|---|
Adaptive layout-horizontal adaptive Absolute layout-Area Fixed | Lebal widget | The widget width and height ratio is Proportional zoomed, and the content can be scrolled beyond the display area. |
| Text field widget | The widget width and height ratio is Proportional zoomed, and the content can be scrolled beyond the display area. | |
| Radio button group/Check box group | The widget width and height ratio is Proportional zoomed. Scroll beyond the display area, and adjust the height according to the content if the display area is insufficient | |
| Other widgets | The widget width and height ratio is Proportional zoomed. But there are maximum and minimum height display, and the content of the widget in the width is not displayed, it will be truncated. | |
Adaptive layout-Bidirectional adaptive Absolute layout-Area Fit | Lebal widget | The widget width and height ratio is Proportional zoomed, and the content can be scrolled beyond the display area. |
| Text field widget | The widget width and height ratio is Proportional zoomed, and the content can be scrolled beyond the display area. | |
| Radio button group/Check box group | The widget width and height ratio is Proportional zoomed. Scroll beyond the display area, and adjust the height according to the content if the display area is insufficient | |
| Other widgets | The widget width and height ratio is Proportional zoomed. But there are maximum and minimum height display, and the content of the widget in the width is not displayed, it will be truncated. |
VI. Tab block
1. Keep layout on mobile
| Layout style | Tab preview effect |
|---|---|
| Horizontal adaptive |
|
| Bidirectional adaptive | The width and height of the Tab block are scaled in an equal ratio, and there is no scroll bar in the tab. |
| Area Fixed | The width and height of the Tab block are scaled in an equal ratio, and there is no scroll bar in the tab. |
| Area Fit | The width and height of the Tab block are scaled in an equal ratio, and there is no scroll bar in the tab. |
VII. Component hiding
1. Normal hide
The chart block, report block, and widget PAD terminal hide situation is shown in the following table:
Note: Tab block does not support hiding.
| Whether it is visible | Layout style | Preview effect |
|---|---|---|
| Visible | - | The component is displayed normally |
| Invisible | Absolute layout | Components are hidden, placeholder |
| Invisible | Adaptive layout | The component is hidden, the position of the component will be adaptively filled by the surrounding components, and the component does not occupy a place |
2. JS hidden components
JS controls that whether the components are visible or not, the PAD terminal is effective as shown in the table below:
| Layout style | Widget position | JS event trigger effect |
|---|---|---|
| Keep layout-horizontal adaptive | Widget occupies the entire row | |
| Widget does not occupy the entire row | JS can control the visibility of components When invisible, the component position is left blank, and other components will not fill up adaptively | |
| Keep layout-Bidirectional adaptive | - | |
| Keep layout-Area fixed | - | |
| Keep the layout-Area fit | - |
3. Hide components in Tab
The chart block, report block, widget, and PAD terminal hidden in Tab are shown in the following table:
| Whether it is visible | Layout style | Preview effect |
|---|---|---|
| Visible | - | The component is displayed normally |
| Invisible | Keep layout | Components are hidden, and occupy the position |
