Dynamically Displaying Absolute Canvas Height in FVS on Mobile Terminals

This document applies to users who have installed the FineVis Data Visualization plugin to learn FVS template functions.

Application Scenario

When you create FVS mobile templates, it's common that there are many parameter widgets. In such cases, you can hide less frequently used widgets or widgets that do not need to be displayed. You can display them as required, while the canvas height can dynamically change based on the displayed content, as shown in the following figure.

Implementation Method

(1) Add a Click event for title components to hide or display the specified widgets of other types when the title components are clicked.

(2) Enable the mobile layout.

Creating a Template

Choose File > New FineVis Visualization Dashboard in the upper-left corner of the designer to create a blank dashboard. You can customize the dashboard name and size. In this example, the mobile template width is set to 375 pixels, as shown in the following figure.

Designing Components

(1) Choose Other > Title in the component area to add a title component to the canvas, and resize and relocate it appropriately.

Set Title Content to View All Parameters and Hide All Parameters for the title components, respectively, as shown in the following figure.

(2) Choose Widget > Dropdown Box in the component area to add four drop-down list widgets to the canvas, and adjust their positions, as shown in the following figure.

(3) Select the components that do not need to be hidden at the same time, and click Combine on the right of the canvas to group these components.

The layout and sizes of the components in this group are not affected by re-layout, meaning that the layout of the components in this group can stay the same as the layout on the template canvas, as shown in the following figure.

(4) Select the components that need to be hidden at the same time, and click Combine on the right of the canvas to group these components, as shown in the following figure.

(5) Choose Other > Absolute Canvas in the component area to add a component to the canvas.

Adjust the absolute canvas size and set the canvas component's border background and borderlines to make the canvas height more visually intuitive on the page, as shown in the following figure.

(6) Drag the two groups directly to the absolute canvas. When the prompt "Release to enter the Absolute Canvas." appears, release the mouse to place them into the absolute canvas. Adjust the absolute canvas position, as shown in the following figure.

Adding a Click Event

(1) Add a Click event for the View All Parameters component. Select the component, and choose Interaction > Add Event > Click > Show/Hide on the right. Select Group 2_Page1 from the Target Object drop-down list, as shown in the following figure.

(2) Add a Click event for the Hide All Parameters component. Select the component, and choose Interaction > Add Event > Click > Show/Hide. Select Group 2_Page1 from the Target Object drop-down list, as shown in the following figure.

Enabling the Mobile Layout

(1) Choose Template Settings > Mobile Terminal on the top of the designer, and then select Mobile Layout, as shown in the following figure.

(2) Switch to the mobile view, and select the absolute canvas component. On the Content tab page on the right, select Reset Phone Layout for Preview Re-layout. After enabling re-layout, you can set component spacing, as shown in the following figure.

Effect Display

For details about the preview method, see FVS Template Preview and Mounting. The effect is the same as that in the section "Application Scenario."

Note:

On the PCs, the display/hide effect can be implemented, but the absolute canvas height will not change dynamically.

Download the template by clicking Dynamically Displaying Absolute Canvas Height in FVS on Mobile Terminals.fvs.