FVS Mobile Attribute

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

Version

Function Description

The FineVis Data Visualization V1.17.0 plugin is adapted to mobile terminals, allowing you to preview templates on mobile terminals.

In FineVis Data Visualization V2.1.1, the PC — mobile terminal switchover button is added for you to display all supported configurations in the selected mode. The preview effect is also subject to the effect of the selected mode.

The following section will introduce the differences between the two modes, as well as mobile attributes in detail.

After accessing the FVS visualization dashboard, you can see the PC — mobile terminal switchover button in the upper right corner, with the PC mode selected by default.

After accessing the FVS visualization dashboard, choose Template > FVS Template Setting > Mobile Terminal on the top menu bar of the designer. You can enable the reset layout effect (disabled by default).

1. If the reset layout function is disabled, the template's display effect on mobile terminals is consistent with the effect on the canvas, and the component layout remains unchanged. The function is often disabled when you directly create a mobile template.

You can proceed as follows. 

Method 1: Retain the layout. Set the mobile terminal canvas size, like 390 * 844px. Configure the general component layout settings. Click the mobile Preview.

Take Bank CEO.fvs as an example, as shown in the following figure.

The effect on mobile terminals is shown in the following figure.

2. If the reset layout function is enabled, the component will be resized according to the canvas size, causing component stretching and other issues.

In addition, the mobile layout inherits the component/combination order (left-to-right, top-to-bottom) on the canvas. The overlapped layers are displayed from the outside to the inside.

Note:

 If multiple components are combined, the component size and layout in this combination do not change (maintaining the layout on the canvas) even if the function is enabled.

You can proceed as follows. 

Method 2: Reset the layout. Change the PC layout to mobile layout. Combine the components occupying a line on mobile terminals. Choose FVS Template Setting > Mobile Terminal and tick Reset Phone Layout and Reset Tablet Layout. Perform a streaming layout of component combinations on mobile terminals. Click the mobile Preview.

Take The First FVS Dashboard.fvs as an example, as shown in the following figure.

The effect on mobile terminals is shown in the following figure.

Only for PC

1. 3D components and extended charts are not supported on mobile terminals. When you switch to the mobile mode, the prompt "The mobile terminal is not supported currently" is displayed on the configuration panel of this type of component.

2. Some functional setting items are not supported on mobile terminals. When you switch to the mobile mode, those settings are not displayed, such as Ground Glass and Reflection in Component Style and Component Animation.

If those setting items are configured in the PC mode, after you switch to the mobile mode, those setting effects are still displayed on the canvas but do not take effect during mobile preview.

Note:

If the reset layout function is disabled, some settings items may still take effect.

Only for Mobile Terminals

Some functional setting items are only supported on mobile terminals and only displayed after you switch to the mobile mode. For example, you can set Page Margin and Component Spacing for mobile pages after enabling Reset Phone Layout or Reset Tablet Layout.

For Both PC and Mobile Terminals

After some functional setting items (like the component content and chart data) are modified on the PC or mobile terminal, the modification is synchronized on the other terminal, ensuring consistency between the two terminals.

Differentiated Setting Items for PC and Mobile Terminals

Some functional setting items can be separately configured for PC or mobile terminals. Those setting items are marked with PC/mobile terminal icons, consistent with the icons on the switchover button.

Before modification, the mobile terminal inherits the PC configurations by default. After modification, modified settings only take effect on the mobile terminal and the canvas always displays the PC configurations.

For example, modify the component border background. The effect is shown in the following figure.

Switch to the mobile mode and click Preview. The mobile preview page is displayed in the browser.

On the left, the mobile HTML5 simulation effect is displayed, simulating the iPhone 13/13Pro with dimensions of 390*844px. On the right, the QR code and link for mobile access are displayed.

Note:

Components that are not supported on mobile terminals will not be displayed during mobile preview. If the reset layout function is enabled, the component positions will not be retained; if the function is disabled, the component positions will be retained, displaying blank.