Overview
This document is applicable to users who have installed the FineVis Data Visualization plugin to learn plugin functions.
Version
| Report Server Version | Plugin Version | Functional Change |
|---|---|---|
| 11.0.22 | V2.9.1 | The mobile terminal supports Mobile Layout, changing from the previous Re-layout effect to the Flow Layout effect. The flow layout effect is mainly to solve the following re-layout problems: 1. When you directly switch a PC template to the mobile terminal template, the sizes, margins, and orders of components cannot be freely adjusted. As a result, a template cannot be used for both the PC and the mobile terminal. 2. On the designer editing page, you cannot view the configuration effects on the mobile terminal in a WYSIWYG(What You See Is What You Get) way, thereby necessitating a browser preview. With the plugin of the new version, after switching to the mobile terminal, you can perform mobile configurations and preview the display effect of the mobile template in the designer in real time. |
Function Description
The creation and preview of the FVS mobile template support two methods of layouts, with the default layout Desktop Layout, which is consistent with the PC version.
Mobile Layout is supported. After Mobile Layout is selected, Mobile Layout mode is displayed, where both the template editing page and preview page follow the rules of Mobile Layout (flow layout).
Compatibility Description
Note: Mobile Layout represents an enhancement of the re-layout and is compatible with the re-layout.
For both new templates or historical templates, Mobile Layout is not selected by default.
After the plugin upgrade, the history template on the mobile editing page will be displayed on the desktop layout by default. If you want to view the mobile layout in the editor, you need to manually select Mobile Layout. During the actual preview, the layout will be displayed according to whether the previously configured Enable Re-layout is selected.
The font rendering in the mobile terminal is diiferent from that in the mobile layouts in FineReport with historical plugins. The main difference lies in the font size. You may need to manually adjust the font size.
For historical templates that enabled re-layout the desktop layout will take effect when you deselect Mobile Layout after selecting it.
Function Entry
After entering the FineVis Visualization Dashboard, choose Template Setting > Mobile Terminal on the top toolbar of the canvas to set the layout for the mobile terminal.
By default, Mobile Layout is not selected. Mobile Layout follows the rules of Desktop Layout (retaining the layout). That is to say, the Mobile Layout rules are consistent with that of the PC terminal.
After Mobile Layout is selected, the mobile editing page and preview effect follow the rules of Mobile Layout (flow layout). Tablet Preview Effect can be selected.
Note: PC size templates are not suitable for preview on the mobile terminal, so when Mobile Layout is not selected, you are advised to use mobile size templates.
Mobile Component Rules
For all layouts, components on the mobile terminal follow the following rules:
1. Mobile components inherit all content from the PC components by default, and can be modified separately. Mobile components will not inherit the PC content after modification.
2. Components that are completely outside the PC canvas are not displayed in the mobile canvas and component list.
3. Mobile terminal does not support 3D Component and Chart Component. These types of components is not displayed on the canvas. They are automatically hidden in the component list, and unselectable as they are grayed out.
4. When Mobile Layout is selected, adding or deleting components is not supported on the mobile terminal. Adding or deleting components is supported when Desktop Layout is selected.
Desktop Layout
When Mobile Layout is not selected, the mobile terminal and PC share the same layout, and the distinctive configuration items support separate displays.
This layout allows you to create templates directly on the mobile terminal.
Example:Bank CEO.fvs, as shown in the following figure.
The following figure shows the effect on the mobile terminal.
Mobile Layout
When Mobile Layout is selected, the mobile terminal will take effect according to the rules of Mobile Layout (flow layout), and Tablet Preview Effect allows you to select the layout.
This layout is suitable for scenarios where PC template is transferred to the mobile template.
Take E-commerce Sales Real-time Dashboard.fvs template as an example to explain the relevant rules about flow layout on the mobile terminal.
Canvas Display Rules
Open the downloaded template. The canvas on PC is shown in the following figure.
After you switch the PC terminal to the mobile terminal, the canvas is shown in the following figure.
The following table describes specific changes.
Changing area | Description |
Canvas Size |
Note: Mobile Layout does not support configuration of Canvas Adaptation. During the preview on the mobile, the canvas defaults to full width. On the tablet, the selected layout take effect. |
Pagination Area | The pagination area has been changed from the bottom of the canvas to the left of the canvas. The area includes Preview Playback Setting, Query Panel Setting, and the Expand and Collapse buttons. |
Component List |
|
Component Bar | When Mobile Layout is selected, adding components is not supported, so the component category icons are hidden in the component bar. |
Top Toolbar | The top toolbar only retains Undo/Redo. Adjust Width is newly added. Combining and deleting operations need to be performed on the PC terminal. Note: Align only takes effect when you select two or more components within the combination/absolute canvas. |
Page Property | The page on the mobile terminal supports the setting of Background, Page Margin, and Component Spacing separately. By modifying the configuration, you can see the effect in the canvas immediately. Note: Component Spacing is only applicable to the outermost vertically adjacent components or combinations, and is not applicale to components in combinations or horizontally adjacent components. |
Hotkey | Compared with the PC terminal, multiple hotkeys are reduced. Only the available hotkey in the Hotkey List are retained, as shown in the following figure.
|
Component Display Rules
Component Display Order
1. The components/combinations in the canvas is displayed in a single column from top to bottom according to the Component Order list by default.
2. The defult order inherits the component/combination order of the canvas on the PC terminal (left-to-right, top-to-bottom). When the layers overlap, they are displayed from the top layer to the bottom layer.
Note: Components in Combination or Absolute Canvas are still displayed according to the effect of the PC terminal, indicating the layer order instead of the component display order. Components in the Tab component are displayed in the component display order.
3. If the width of the components is adjusted for the side-by-side display, the order from left to right in the canvas is the same as the order from top to bottom in the component list.
4. After adjusting the position of the components on the mobile terminal, any new component/combination added on PC will be displayed at the bottom of the mobile canvas.
5. When the outermost component/combination is hidden, the components below it will move up to fill the empty space; in Combination/Absolute Canvas, the empty space will be preserved.
Component Width and Height Rules
The default display rules for component width and height in the canvas are shown in the following table.
Note: If Re-layout is selected in a historical template, the width and height of the components will be scaled proportionally and will not follow the rules in the table below.
Component Position | Width | Height |
Outermost component/combination component in a Tab component | The width automatically adjusts to fill the entire row by default. | Widget, Chart, Title, Time, Absolute Canvas Component, and Combination components The width is the same as that on the PC terminal by default. |
Image, Local Video, and Surveillance Video components The width and height scale proportionally by default. | ||
Table, Button Group, Tab, Iframe, and Rich Text components In editing mode, the default height is the same as that on the PC terminal. During the preview, if Preview Height Adaptation isselected in a component, the component will be displayed according to the content adaptation. Otherwise, the component will be displayed according to the component height. | ||
Combination/components in Absolute Canvas | The width scales proportionally with Combination/Absolute Canvas. | |
Note 1: The scaling rules for components are the same as that on the PC terminal. The overall scaling of components does not affect the font size of the content (except for tables, where the font size will adapt to the content).
2: When the default component width and height are not modified, if the canvas size changes, regardless of whether Enable Lock Resizing is selected or not, the component width will adapt to fill the entire row, while the height remains unchanged.
After you modify the width and height of the component, if Enable Lock Resizing is selected for the canvas, the component will scale proportionally with the canvas; if not checked, the component size will remain unchanged.
Component Adjustment Rules
Component Size Adjustment
You can freely adjust the width and height of all components. The maximum value of the width equals the width of the canvas, and no limit is set for the maximum height.
You can quickly adjust component width through the top toolbar Adjust Width or the Adjust Width bar popped up after right-clicking the mouse, with options for single-row proportion of the canvas, as shown in the following figure.
Note: The single-row proportion of the canvas is calculated based on the page width minus the width of the padding.
Component Order Adjustment
You can adjust the order of the selected outermost component or combination in the list or canvas. You can also adjust the order of the component/combination in Tab component.
When the component is moved vertically, the automatic sanpping effect will occur. That is to say, the component below the blank area will automatically move upwards to snap into the area.
When blank space exists horizontally, components are allowed to be placed side by side. If the space is not enough for the display, the components will automatically be displayed vertically.
Component Style Adjustment
According to section "Component Width and Height Rules", when you switch Desktop Layout to Mobile Layout, some component effects need to be manually adjusted.
Any configuration item with a mobile terminal icon will, by default, change with the PC terminal before modification. After modification, the configuration item will no longer be affected by the PC terminal and the mobile effect will be displayed in the canvas in real time.
Height Auto-adaptation During the Preview
The vertical adaptation in preview configuration item is added for the Tab, Table, Iframe, Rich Text, and Button Group components on mobile terminal, and is selected by default.
After vertically adaptation is selected, regardless of the height setting of the component in the canvas, the component height can automatically adapt to the content height during the preview; Otherwise, the componnet height will be displayed according to the set component height.
Note 1: The vertical adaption only takes effect when the component occupies the entire line. It does not take effect when the componnet is placed side by side with other components.
2: The vertical adaptation in the Combination component does not take effect. In Absolute Canvas, the vertical adaptation only takes effect when Re-layout is selected.
3: Marquee Effect of Table takes effect when vertical adaptation is not selected.
Previous：Map Center Point Calculation Rule
