FVS Jumping to Web Links/Pop-up Box Events

This document is applicable to users who have installed the FineVis Data Visualization plugin to learn operations related to FVS dashboards.

Version

Application Scenarios

1. You can open a webpage/another template and pass parameters in the current window/a new window or through a popup box and pass parameters by clicking the title component, the series/classification of the chart component, or the three-dimensional component data layer in the FVS template.

2. You want a pop-up box for some simple text explanation when clicking a component.

The following figure shows the effect.

Select a component, choose Interaction > Click > Add Click Event > URL/Pop-up Box to add an event in the pop-up setting box.

Note:

Add Click Event is not supported in some components.

Event Name

You can customize the event name which cannot be empty or the same as that of the event in the current component.

Opening Type

Opening Type supports New Window, Current Window, and Pop-up. When selecting Pop-up, you can set Style for it.

Note:

If you open a template mounted in the decision-making platform, with Opening Type set to New Window or Current Window, you will open the new tab page or the current tab page of the platform.

Content URL

Note:

The previous setting will not be saved if you switch the content URL type after you set the content. You are advised to proceed with caution.

URL

URL supports both absolute and relative paths and also allows for inserting formulas into paths.

Template Link

After you select Template Link, the Select Template button appears on the right. You can click the button to choose any report files in the current project.

You can also manually input and suffix a template path. For example, you can suffix &op=write to the path of the .cpt data entry template.

Text Prompt

In version 2.6.1 and later, you can add Text Prompt (always taking effect when Opening Type is set to Pop-up) for title or image components.

The use of text prompts is consistent with that of rich text components. You can directly input text and add formulas.

Parameter

Parameter addition is supported when Content URL is set to URL/Template Link. Three parameter types are supported:

Style

You can set styles of pop-ups for PC/mobile terminals separately when Opening Type is set to Pop-up.

You need to click the  or  icon in the top toolbar of the template to switch to the corresponding mode before going to the event to set Style.

Note:

In version 2.6.1 and earlier, pop-ups on mobile terminals are displayed in a fixed style and cannot be set.

The following table describes each setting item.

Template Creation

Choose File > New FineVis Visualization Dashboard to create a blank dashboard, select Template Style as the light theme in Built-in Style, and click Create Dashboard.

Data Preparation

2. Create a database query ds1 with the SQL query statement SELECT * FROM Sales_Volume.

Component Addition

1. Add a title component, an image component, and a pie chart component to the canvas and adjust their sizes and layout.

2. Save the image  to the local, click the image component, select Type as Custom Upload on the right panel, upload the image, and select it for use.

3. Click the pie chart component, select Dateset as ds1, select Category as None, select Series as Region, and select Value as Sales_Volume.

Web Link/Pop-up Box Event Setting

Setting a Text Prompt Pop-up Box for the Image Component

1. Click the image component and choose Interaction > Add Click Event > URL/Pop-up Box.

2. Set Event Name, set Opening Type to Pop-up, set Content URL to Text Prompt, and input the text that needs to be prompted.

3. Select the text content, modify the text color, and set the alignment methods to left-right centering and vertical centering.

4. Click Style and set Display Position to Dynamic Display, as shown in the following figure.

Setting a Template Link Pop-up Box for the Pie Chart Component

1. Click the pie chart component and choose Interaction > Add Click Event > URL/Pop-up Box.

2. Set Event Name, set Opening Type to Pop-up, and set Content URL to Template Link.

3. Click Select Template and select the designer built-in template GettingStartedEN.cpt.

4. Set Parameter Name to Region (same as the parameter name in the template GettingStartedEN.cpt), set Parameter Type to Component Field, and set Parameter Content to Series Name.

5. Click Style and set Display Position to Centered Display, as shown in the following figure.

Style Setting for Mobile Terminals

1. Click the  icon to switch to the mobile mode, click the image component, click Interaction on the right panel, click the  icon to go to the setting box, and click Style to perform style setting for mobile terminals and pad terminals

2. Set Display Position to Dynamic Display, set Size to Mobile, select Height Adaptation from the drop-down list, and set Pop-up Screen Proportion to 40 (%).

3. Keep other settings default to inherit the PC terminal settings. (You can modify the settings if you want.)

4. Keep the settings default for the pie chart component. (For mobile terminals, Display Position is fixed as Centered Display, with the size remaining the default value. Other settings inherit from the ones for PC terminals.)

Effect Display

PC

Save the template and click the Preview button in the upper right corner to preview it. The effect is shown in section "Application Scenario."

Mobile Terminals

For details about preview methods, see FVS Template Preview and Mounting. The following figure shows the effect.

Note:

To obtain the mobile terminal effect of this example, you need to enable Reset Phone Layout and Reset Tablet Layout, and combine the title component with the image component. For details, see FVS Mobile Attribute.

You can download the sample template: FVS Example of Jumping to Web Link or Popup Box.fvs.