FVS Mobile Component Navigation for Quick Positioning

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

Version

Application Scenario

When previewing a template with long page content and multiple components on mobile, you need to scroll the page frequently to find the target component, leading to low operation efficiency and bad experience. With the component navigation function, you can quickly locate the specified component on the page without having to manually slide the page to find it, helping you switch between contents efficiently.

The following figure shows the effect.

Notes

Enable Navigation is only visible after you switch the template to the mobile layout.

Components within extension components are not supported.

Navigation is supported by Combine, the container itself, and the components within it.

Navigation is not supported on tabs.

A new component navigation function and a component navigation interface duchamp.jumpToMark() are added in FVS V3.1.0 version. You can realize component navigation by turning on the navigation function or using the JS interface. The following sections show the specific introduction.

Navigation Function

Function Entry

After you switch the template to mobile layout, Navigation is added to the preview settings under the interaction panel of the component. Navigation is disabled by default.

Enabling Navigation

1. Select a component, tick Enable Navigation, and then you can see the setting of Navigation Name.

The navigation name is consistent with the component name by default. You can modify the navigation name which is not supported to be empty or repeated.

Note:

 If the modified name is the same as the navigation name of other components, it does not take effect and prompts “The name already exists. Enter another one”.

2. When you preview a template on the mobile terminal, the Navigation icon is located in the bottom toolbar by default.

Click the Navigation icon to bring up the component navigation options. Select the component and you can locate the corresponding component, as shown in the following figure.

Navigation Rules

1. When you select a component, the page scrolls to the location of the component and with the component at the top of the page. If the component is on the last part of the page, the page will scroll directly to the last part.

2. Navigation can be enabled for both the container and the components within the container. The navigation list can be selected regardless of hierarchy, as shown in the following figure. 

JavaSrcipt Event

This JavaScript event is supported in the “End of Page Load Event”, “Component Interaction Event”, “Table Cell Hyperlink” and “Component After Initialization Event”.

Take the interaction event as an example. Select the component, choose Interaction > Add Event > Click, and select JavaScript, as shown in the following figure. 

The JS code to center the toolbar is as follows:

duchamp.jumpToMark(“component name”)

Note: 

The code for versions prior to V3.2.1 is duchamp.jumpToMark(“navigation name”).