JS Marquee-like Content Scrolling-FineReport Help Document

Last update： 2020-12-15

I. Overview

1.1 Requirement

When display data, we sometimes prefer a scrolling effect, which is called marquee.

The effect of marquee works on a part of a report area rather than the whole report.

1.2 Solution

Marquee can be realized by HTML, CSS and JavaScript. In this way, you can customize the style of marquee as you want.

You can also use plugin to create a marque. Please contact our technical support (International@fanruan.com) for this plugin.

II. A sample of regular report

2.1 Design a template

Create a dataset and drag table [SALES_BASIC].

Drag data column [Salesperson] to A1.

2.2 Insert a formula in A2

"<div id=\"demo\" style=\"
height:250px;
overflow:hidden;
\">
<div id=\"indemo\" style=\"
height:200%;
\">
 <div id=\"demo1\">
  <br />"+REPLACE(A1,",","<br /><br />")+"<br /><br />
 </div>
    <div id=\"demo2\"></div>
</div>
</div>"

Note

This formula insert the content of A1 to HTML. If the content to be displayed comes from other cells, remember to change A1.
A1 is a array that stores all data from the data column [Salesperson]. The REPLACE function changes the delimiter in A1 to <br/> tags in HTML.
The id demo, demo1 and demo2 are used to identify the div elements. The '\' before the double quotation marks is to prevent character escaping.

2.3 Display content of A2 by HTML

Select [Cell Attributes] > [Other] and choose [Display by HTML].

2.4 Add JS event

Select [Template] >[WEB Attributes] and click [Pagination Preview].

Choose [Individually set for the report] and click [+] to add a [Load End] event.

Inpurt the JS code:

setTimeout(function() {
    speed = 50;
    var tab = document.getElementById("demo");
    var tab1 = document.getElementById("demo1");
    var tab2 = document.getElementById("demo2");
    tab2.innerHTML = tab1.innerHTML;
    tab.scrollTop = 0;
    function Marquee() {
        if (tab.scrollTop >= tab1.offsetHeight) {
            tab.scrollTop = 0;
        } else {
            tab.scrollTop += 1;
        }
    }
    var MyMar = setInterval(Marquee, speed);
}, 1500);

2.5 Preview

Select [Pagination Preview].

III. A sample of dashboard

1）Add a report block to the dashboard body, and the design of the report is the same in the sample of regular report.

2）The settings are also the same as those of the regular report.

3）Select the report block, and add a [After Initialization] Event

Add the JS code:

setTimeout(function() {
    speed = 50;
    var tab = document.getElementById("demo");
    var tab1 = document.getElementById("demo1");
    var tab2 = document.getElementById("demo2");
    tab2.innerHTML = tab1.innerHTML;
    tab.scrollTop = 0;
    function Marquee() {
        if (tab.scrollTop >= tab1.offsetHeight) {
            tab.scrollTop = 0;
        } else {
            tab.scrollTop += 1;
        }
    }
    var MyMar = setInterval(Marquee, speed)
;}, 1500);

IV. Combine timely refresh and marquee

Sometimes, the database need timely refresh to display the latest content in the marquee.

Just change the JS code in the [After Initialization1] event.

var form = this.options.form;setInterval(function() {
    form.getWidgetByName('report0').gotoPage(1, "{}", true);
    $(".loading-ec-indicator").eq(0).remove();
    $(".text-indicator").remove();
    setTimeout(function() {
        speed = 50;
        var tab = document.getElementById("demo");
        var tab1 = document.getElementById("demo1");
        var tab2 = document.getElementById("demo2");
        tab2.innerHTML = tab1.innerHTML;
        tab.scrollTop = 0;
         function Marquee() {
            if (tab.scrollTop >= tab1.offsetHeight) {
                tab.scrollTop = 0;
            } else {
                tab.scrollTop += 1;
            }
        }
        var MyMar = setInterval(Marquee, speed);
    },
 1000);}, 5000);