FVS Expansion Component

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

Version

Application Scenario

The expansion component, combined with the dynamic value function of the title component or rich text component, dynamically generates a series of indicator cards based on dataset fields, each presenting different data.

Function Description

The expansion component is a container that currently only allows you to drag title components, rich text components, image components, and combinations of these three components to the container.

After you drag components to the expansion component, the expansion component will be expanded according to Expansion Basis to generate multiple components quickly. (The expansion basis must be the field source of the dynamic value.)

In V3.2.0 and later versions, image components and weblinks/popup boxes in expansion components support expansion based on the dataset field in Dynamic Value. For details, see section "Indicator Card Expansion Setting."

Note :

This document introduces only the unique functions of the expansion component.

The expansion component does not support component interaction events.

For details about the component animation, see FVS Cross-page Component Animation.

For details about the component attribute, see FVS Component Style and Attribute.

Expansion Component Adding

Choose Other > Container, and click or drag Expansion Component to add it to the canvas.

Expansion Template

A pre-set expansion template exists in the expansion component for carrying components/combinations.

An expansion component only has one expansion template which cannot be added. If you delete the expansion template, the corresponding expansion component will also be deleted.

1. The rules for dragging components/combinations to the expansion template are shown as follows:

You can only drag title components, rich text components, image components, and combinations of these three components to the expansion template.

Directly drag the component/combination in the component area or on the page to the expansion template, and release the mouse when the prompt "Release to enter the Expansion Template." is displayed.

Component/combination sizes do not change after you drag the component/combination to the expansion template.

When you release the component, if its position exceeds the left/top edge of the extension template, the dragged component will automatically align with the left/top edge. If the position does not exceed the above edges, the dragged component position will be where it is released.

If the component exceeds the right/bottom edge of the extension template, the component display will be cut off, as shown in the following figure.

You can also drag the component layer in the component layer list to the extension template. The component position is in the center of the extension template by default, as shown in the following figure.

2. The method of moving components/combinations out of the expansion template is shown as follows:

Directly drag the component out of the expansion template, and release the mouse when the prompt "Release to move out of Expansion Template." is displayed. The position of the moved-out component is where the component is released.

In the component layer list or extension component list, directly change the component layer order by dragging the tab to move the component out of the extension component layer. The position of the moved-out component does not change.

In the expansion component list, click the icon beside the corresponding component, and click Move Out. The moved-out component is displayed to the right of the extension component by default, as shown in the following figure.

3. Expansion Template supports name and size settings. When you enable Lock Resizing, the size of an expansion template changes proportionally to that of the internal component.

Note:

When you drag the edge of the expansion template to resize the expansion template, you can only drag the right/bottom edge.

Expansion Component Content Setting

The expansion component allows you to set the layout, component gap, and expansion basis.

1. Layout: You can select Fixed Column Quantity or Fixed Row Quantity. The rows or columns are displayed according to the expansion template size. If the size is exceeded, you can scroll to view the components.

2. Component Gap: You can set the row spacing and column spacing respectively.

3. Expansion Basis:

Expansion Basis provides a source table based on the dynamic values within the current extension component as an option. If no dataset is available for the current extension component, a prompt "No data." will be displayed.

After you set the expansion basis, the number of expansion components is defined based on the number of data items in the dataset. The dynamic value that has the dataset is extracted in rows based on the extension sequence.

If the component has no dynamic values or the dynamic values are formulas, the content will not be changed during the expansion. If the component has dynamic values that are dataset fields but do not accord with the expansion basis, the component data will be extracted based on the extension sequence.

If the expansion basis has been set, the previously set expansion will not be affected even if the follow-up expansion component does not contain the basis until the expansion basis is re-selected.

Note:

The expanded components have no entity but still inherit all the interaction capabilities of the components in the expansion template.

Template Creation

1. In the FineReport designer, Choose File > New FineVis Visualization Dashboard.

2. You can customize the template name, canvas size, and template style by clicking Create Blank FVS Dashboard.

3. Click Create Dashboard.

Data Preparation

Create a database query ds1 with the SQL query statement: SELECT Product,sum(Sales_Volume) as Sales FROM Sales_Volume group by Product.

Explanation: Group the data by product, get the sum of the sales volume for each product, and return the name of each product and the sum of the sales volume for that product.

Create a built-in dataset named Embedded1, as shown in the following figure.

Indicator Card Design

1. Indicator Card Background Designing

(1) Choose Other > Media in the component area and click Image to add the image component to the canvas.

(2) Save the following image to your local computer.

(3) Select the image component, set Type to Custom Upload, and upload the saved image to set the image to be the indicator card background.

2. Dynamic Value of the Product Name Setting

(1) Choose Other > Text in the component area, click Title to add the title component to the canvas, and set the appropriate position and size according to the indicator card background.

(2) Set Dynamic to Title Content and click Edit Dynamic Value to go to the Edit Dynamic Value page.

(3) The source of the dynamic value is the dataset. Select ds1 and Product.

(4) Click OK to finish the editing. You can customize the content style, such as font and color.

3. Dynamic Value of the Product Sales Volume Setting

(1) Copy and paste the title component set in section "Dynamic Value of the Product Name Setting" and click Edit Dynamic Value to go to the Edit Dynamic Value page.

(2) Modify the field to Sales_Volume.

(3) Click Add Condition Style, click Condition Setting, set the value to be less than the string 4000, and click OK.

(4) On the component style setting page, set the color to red. Finally, click OK.

4. Image Component Adding

(1) Choose Other > Media, click Image to add an image component to the canvas, and set the appropriate position and size of the component.

(2) Select Online Image and enter http://localhost:8075/webroot/help/picture/.png.

(3) Hover your cursor before .png in the link and click Insert Dynamic Value to view the Edit Dynamic Value pop-up page.

(4) Select Field for the dynamic value source, select the dataset Embedded1, and select the ID field.

(5) Click OK to finish the editing.

5. Components Combination

Box-select the designed components and click Combine on the configuration bar on the right of the canvas to group them.

Indicator Card Expansion Setting

1. Choose Other > Container in the component area and click Expansion Component to add the expansion component to the canvas.

2. Select the combination and drag it to the expansion template of the expansion component.

3. Select the expansion template and resize it according to the content.

4. Select the expansion component, set Layout to Fixed Column Quantity and 2, and set Expansion Basis to ds1.

You can view five different indicator cards expanded, and the sales volume that is less than 4000 is displayed in red.

Effect Display

1. PC

Save the template and click Pagination Preview. The following figure shows the effect.

2. Mobile Terminal

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

You can download the template: Indicator Card Expansion in FVS.fvs