Successfully!

Error!

Marquee

  • Last update：  2021-12-03

    • I. Overview

    1. version

    Report server versionJAR package dateFunction changes
    10.0.19 2021/9/6Add marquee JS interface, a single line of code can realize marquee
    10.0.192021/11/30The unit of the marquee interface is changed to s


    2. Application scenarios

    The scrolled message text or table content is generally called a marquee, as shown in the figure below. The marquee has a wide range of application scenarios, especially in billboards and large screens:

    • An area with more content but limited layout can be presented in the form of a marquee

    • The table has a lot of content, you can scroll the table to display all the content

    • When the news content is displayed, multiple messages and subtitles are scrolled

    • In monitoring scenarios, scrolling message reminders

    • In the large-scale display screen, graphics and text scroll to achieve dynamic effects

    1.gif


    3. Function introduction

    The effect is achieved through the marquee interface, and the JS interface code can be added to the report event to achieve it.

    Note: Versions before 10.0.19 do not support the use of the marquee interface. If you need to realize the marquee effect, please refer to Chapter 4 of this article.

    II. Interface introduction

    Note 1: The following interfaces are applicable to 10.0.19 and later versions.

    Note 2: The marquee effect realized by the following interface does not support refreshing through the "report block refresh plugin in the dashboard".

    1. Turn on the marquee

    MethodstartMarquee(opt)Start the marquee effect
    Parameters

    opt: {

    offset: number;

    interval: number;

    stopOnHover: boolean;

    to:'string'


    Scroll effect attributes, json format

    offset: the distance of each scroll, the default is 5 px

    interval: interval duration, default is 0.1 s, self-set unit is s

    Note: The JAR package date is 2021/11/29 and before, and the unit is ms.

    stopOnHover: Whether to pause when the mouse is hovered, the 

    default is true

    • true: pause

    • false: do not pause

    to: scroll direction, support up and left, default up

    • top: scroll up

    • left: scroll left

    Return

    value

    		void
    Example

    Define the obtained report block object as report to achieve the default marquee effect (5

    px scroll every 0.1s, pause when hovering the mouse):

    report.startMarquee();

    To achieve a 2 px scroll every 0.3s, without pause when the mouse hovers:

    report.startMarquee({
    offset: 2,
    interval: 0.3,
    stopOnHover:false
    });

    The default marquee effect is added to the general report:

    _g().startMarquee();

    Add the default marquee effect to the report0 report block in the dashboard:

    Note: When used in the dashboard, it is recommended to add a delay function.

    setTimeout(function(){
         _g().getWidgetByName('report0').startMarquee()
    }, 500);

    Application 

    example

    The report block realizes the marquee effect, and stops scrolling when the mouse is hovering:

    2.gif

    Mobile terminalIt does not support mobile terminal.


    2. Turn off the marquee

    MethodstopMarquee()Turn off the marquee effect
    Parameters--
    Return valuevoid
    Example

    Define the obtained report block object as report, and turn off the marquee effect set by startMarquee():

    report.stopMarquee();

    In general reports:

    _g().stopMarquee();

    In the dashboard:

    _g().getWidgetByName('report0').stopMarquee();

    Application

    example

    The report block realizes the marquee effect, click the Close button to cancel the marquee effect:

    3.gif

    Mobile terminalIt does not support mobile terminal.

    III. Examples

    1. Prepare template

    Create a new template and design a simple form. As shown below:

    Click to download the template: 

    General report.cpt

    4.png


    2. Add event

    1)Turn on the marquee

    Open the template, click Templates>Web Attributes>Pagination Preview, select Individually set for the template, and add a Loading End event in the Event Settings position to achieve the marquee effect when previewing the report. As shown below:

    5.png

    The JavaScript code is as follows:

    _g().startMarquee();

    Note: If you need to modify the scrolling speed and scrolling direction, please refer to section II.1 interface content modification.

    2)Turn off the marquee

    • Open the template, click on the parameter pane, drag in a button widget, and change the name to turn off marquee. As shown below:

    6.png

    • Select the Turn off marquee button, click on Widget Setting> Events, add a click event to the button at Add Event to turn off the marquee when the button is clicked. As shown below:

    7.png

    The JavaScript code is as follows:

    _g().stopMarquee();

    • Click Parameter Pane and uncheck Display nothing before query. As shown below:

    8.png


    3. Preview effect

    Save the template, click PC Preview, the effect is as shown in the figure below:

    Note: Mobile terminal is not supported.

    9.gif

    IV. Other methods

    For other implementation methods, please refer to the following table:

    Method introductionEffect iconApplicable typeSupported direction

    Realization ideas:

    No code is required, just install the "Scrolling Message Control Plugin" to achieve the effect of scrolling subtitles simply and conveniently.

    Reference documents:

    Scrolling message control plugin

    		1638498552525644.gifDashboard

    left

    right

    down

    up


    Realization ideas:

    Add html code to the cell to display html content to achieve text scrolling. It can be scrolled vertically, horizontally, and irregularly horizontally, and it can be realized by modifying the code.

    Reference documents:

    Implement message scrolling in HTML

    		11.gif

    General report

    Dashboard

    left

    right

    down

    up

    Realization ideas:

    In General reports, add JS to make the cell content scroll. After scrolling to the last line, jump to the first line to continue scrolling; scrolling stops when the mouse hovers over.

    Reference documents:

    JS realizes automatic scrolling /marquee effect

    		12.gifGeneral reportup

    Realization ideas:

    In the dashboard, add JS to the report block to scroll the cell content. After scrolling to the last row, jump to the first row to continue scrolling; when the mouse hovers, the scrolling stops.

    Reference documents:

    JS realizes the scrolling/marquee effect in the dashboard

    		13.gifDashboardup

    Realization ideas:

    Add html code to the cell, and then cooperate with JS to achieve the scrolling effect. After scrolling to the last line, the content of the first line is connected to realize the scrolling effect end to end.

    Reference documents:

    JS realizes end-to-end marquee

    		14.gif

    General report

    Dashboard





    Attachment List


    Theme： Dashboard
    Already the First
    Already the Last
    • Helpful
    • Not helpful
    • Only read
    中文（简体） 中文（繁體） 日本語
    English

    Doc Feedback