Auto Group on FVS Mobile Terminals

This document is applicable to users who have installed the FineVis Data Visualization plugin to learn plugin functions.

Version

Application Scenario

When templates for which Mobile Layout has been enabled are switched from PCs to mobile terminals, the original combined layout with overlapped components (if any) will be disrupted because components in the flow layout are arranged by line by default, causing layout disorders.

If overlapped components often contained in FVS templates are not grouped, the original layout effect cannot be restored.

In V4.1.0, the Auto Group function is added into FVS to intelligently identify and group overlapped components. Combined with grouping guidance prompts, this function helps you reduce operation costs and restore the expected layout effect.

Notes

• This function is available only for templates with Mobile Layout.

• The Auto Group function can be undone and redone.

• The Auto Group function cannot guarantee successful grouping for all templates. If the automatic grouping effect does not meet your expectations, you can cancel the automatic grouping operation and perform manual grouping.

• The Auto Group function is a per-page function. Components can be automatically grouped only once per page.

When any template with Mobile Layout enabled is switched from PCs to mobile terminals, a grouping guide will be displayed.

Note:

After No Longer Remind is selected, the guide will no longer be triggered. If No Longer Remind is not selected when you exit the guide, the guide will be triggered every time a new template opened is switched.

• If Auto Group for Current Page in the lower right corner is selected, after you click Start, the components in the template will be grouped according to the automatic grouping rules and Auto Group on the page configuration panel will be grayed out.

Note:

You can click the Undo above the canvas or use the shortcut key to instantly ungroup the automatically-grouped components. The canvas will display the effect without automatic grouping. Then you can click the Auto Group button again.

• If Auto Group for Current Page is not selected, after clicking Start, you will enter the mobile layout. You can click Auto Group on the right configuration panel to group the components.

Note:

You can only use Auto Group before adjusting the attributes (such as the size and position) of mobile components on the current page component tab. If you have adjusted the attributes of the mobile components, the Auto Group button will be grayed out.

Component Scope

• Auto Group only takes effect for individual components.

• A combination or container is regarded as a single component, within which the components are not involved in the Auto Group      operation.

Note: Container types include tabs, absolute canvas blocks, and expansion components.

Logical Rule

Whether to group the components is based on whether components are overlapped. If the gap between components is less than 0, the components are overlapped.

• Effect on PCs

• Effect on Mobile Terminals 

Note: The default group name for Auto Group is GroupX_Template Name.

In addition, rules are also made for some special scenarios:

Large Template Background

Assume that a template has a background component overlapped with most other components. If you group the background component and the other components, the other components will be arranged by line within the background component according to the flow layout rules, leading to poor effects.

Therefore, the following judgment rule is added:

If a component is located in the bottom 10% of the component layer and occupies more than 90% of the canvas, it is regarded as a large template background and a single component which will not be involved in grouping. Otherwise, it will be grouped normally based on overlap relationships.

• Effect on PCs

• Effect on Mobile Terminals

Adjustment Advice on Mobile Templates

You are advised to delete the original background component and re-upload a background image adapted to the mobile terminal under Page > Background.

Most background images designed for PCs are not suitable for mobile terminals. After layout switchover, these images are forcibly stretched to fit the mobile width, resulting in image distortion or deformation. Therefore, you are advised to use background images dedicated to mobile terminals to ensure the display effect.

Overlap Area Judgment

To prevent some overlapped components from being grouped, the overlap area judgment is added:

Two components with an over 60% overlap area belong to the same combination and are automatically grouped.

If a component overlaps with multiple components simultaneously (for example, the indicator card background overlapped with the background 1 and background), the component will be grouped preferentially with that combination with the closer layer based on the component layer hierarchy (the indicator card background and background in this case).

This document provides the sample templateComprehensive Service Indicator Dashboard.fvs which can be downloaded and used.

Open the sample template, choose Template Setting > Mobile Terminal on the toolbar above the canvas, and select Mobile Layout.

Delete the Template Background component. For details about the reason, see section "Logic Rule."

Click the mobile terminal icon in the upper right corner of the canvas to switch the template to the mobile terminal. The automatic grouping guide with Auto Group for Current Page selected by default will pop up. Then click Start.

Set Background in Page. In this case, Background is set to Color as an example.

Adjust the component attributes such as the position and text size for each combination to achieve a better display effect. Further elaboration is omitted here. For details, see section "Adjustment Advice on Mobile Templates."