FVS Table Marquee

Application scenarios: If you have installed FVS large screen editing mode plugin, you can refer to this chapter to know how to make table marquee in FVS template.

Note: Mobile devices are not supported.

version 

Expected Effect

Table component in FVS can achieve the marquee effect of scrolling upwards and scrolling to the left separately. As is shown in the following figure:

Implementation Idea

By JavaScript interface. There are three ways to add a marquee event to the table component:

• Add After Initialization Event to the table component. For more details, see example 1 in "Repeating and Freezing Title Rows"

• Use other components to set Click Event so that you can click to start or stop scrolling. For more details, see example 1 in "Clicking to Stop Scrolling".

• Add Template > Page After-load Event in the large screen template editing interface. For more details, see "Example 2".

startMarquee

stopMarquee

Creating a Large-screen Template

Click File>New FVS Report in the upper left corner of the designer and change the template name to "FVS Table Marquee Example". As is shown below:

Preparing Data

Create a database query ds1 with SQL query statement: SELECT * FROM Sales.

Designing the Template

1. Adding a component

In the left component area, select Text > Table, and click to add it to the page.

Select the table first, click Component on the right, and change the component name to "Table". It will be used in the marquee event.

Then click the edit button in the upper right corner of the component, or click "Content > Edit Component" in the configuration area to enter the table editing interface.

2. Designing the Table

After manually entering the title row, drag the corresponding fields into the cells. Click cell A2, and select List in Cell Element > Data Setting to make the table content longer. You can have a better view of the scrolling effect.

After setting up the data, you can change the cell fill background, font size, etc. by yourself. The final table style is shown below:

3. Repeating and Freezing Title Rows

When starting a scrolling marquee, if you want to freeze the title row while only the content scrolls, this step can help you.

Click the button in the upper toolbar , and the repeat and freeze setting box appears. After setting up, click OK.

After finishing all the settings, click Save, and then click Back to Editor to return to the editing interface.

4. Adding a Marquee Event

After returning, select the table component, click Interaction > Event in the configuration area on the right, and add After Initialization event. Enter the JavaScript code:

Note 1: In plugin versions before V1.5.0, if you want to add JS events, you should click Template>Table After-load Event on the top menu bar in the table editing interface.

Note 2: "Table" in the code means the name of the table component and you can modify it according to the actual situation. 

setTimeout(() => {
     duchamp.getWidgetByName("Table").startMarquee(
{
       offset: 2,         //The distance of each scroll is 2 px            
         interval: 0.1,         //The scrolling interval is 0.1 seconds
       stopOnHover: false,   //Mouse hovering does not pause
       to:'top '         // scroll up
       }
); }, 500)

The steps are shown in the figure below:

After reaching this step, you have completed the upward scrolling effect setting of a table component. If you click Preview in the upper right corner of the large screen template, you can see the effect as shown in the figure below:

5. Example of Scrolling Left

a. Add another table component with the name "Table 2".

For the table content, we need to arrange the titles vertically and modify the expansion direction of the data fields cells to H. As is shown below:

b. For tables with vertically arranged titles, select title columns when setting repeat and freeze. As is shown below:

c. Similarly, add After Initialization Event to the table component and enter the left-scrolling JavaScript code

setTimeout (() => {
     duchamp.getWidgetByName("Table2").startMarquee(
{
      offset: 2,          //The distance of each scroll is 2 px            
            interval: 0.1,      //The scrolling interval is 0.1 seconds
      stopOnHover: false, //Mouse hovering does not pause
      to:'left '       // scroll left
          }
); }, 500)

d. Preview

6. Clicking to Stop scrolling

Except that the table loads itself to the end, we can also start and stop the marquee by adding Click Event to the title component. Let's take stopping scrolling as an example to demonstrate the operation.

a. Select Text > Title in the component area, and click to add it to the page. In the configuration area, click Content, and modify the title content to "Click to stop scrolling". As is shown below:

b. With the title component selected, click Interaction > Click Event in the configuration area, and add a JavaScript event. The JavaScript code is as follows

setTimeout(() => {
        duchamp.getWidgetByName("Table").stopMarquee();
        duchamp.getWidgetByName("Table2").stopMarquee()
}, 500)

The steps are shown in the figure below:

7. Previewing

In previewing, the table scrolls, and it will stop once you click the title. The effect is shown in the following figure:

This example explains how to use Page After-load Event of the table component in the large screen template to run the marquee in multiple pages and multiple tables. The expected effect is shown in the following figure:

Preparing a Template

Operations such as creating templates and adding table components are demonstrated in "Example 1", so refer to "Example 1" if you need. Contents of the template are as follows.

1. The template has two pages, namely Page 1 and Page 2.

2. Each of the two pages has a table named "Table".

Note: The component names can be the same across different pages, but cannot be the same within the same page.

As is shown below:

Adding a Marquee Event

Select Page After-load Event in the template at the top of the menu bar, and enter the JavaScript code:

duchamp.on("storychange", (current) => {
        setTimeout(() => {
                if (current === "Page1") {
                        duchamp.getWidgetByName("Table").startMarquee({
                                           offset: 2,
                                           interval: 0.1,
                                stopOnHover: false,
                                           to: 'top'
                                });
                      };
                if (current === "Page2") {
                        duchamp.getWidgetByName("Table").startMarquee()
                      } 
           }, 500);
});

Note: Because the page after-load event only runs once during the initial load, the above code adds pagination switching JS to make marquee display in multiple paginated tables, and the table keeps displaying when the page is switched.

The steps are shown in the figure below:

After completing the settings, you can click save and preview the marquee.

Click to download the template:

FVS Table Marquee Example.fvs

FVS Table Marquee Example 2.fvs