I. Overview
1. version
| Report server version | JAR package date | Function changes |
|---|---|---|
| 10.0.19 | 2021/9/6 | Add marquee JS interface, a single line of code can realize marquee |
| 10.0.19 | 2021/11/30 | The 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
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
| Method | startMarquee(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
to: scroll direction, support up and left, default up
|
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): To achieve a 2 px scroll every 0.3s, without pause when the mouse hovers: The default marquee effect is added to the general report: 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. | |
Application example | The report block realizes the marquee effect, and stops scrolling when the mouse is hovering:
| |
| Mobile terminal | It does not support mobile terminal. | |
2. Turn off the marquee
| Method | stopMarquee() | Turn off the marquee effect |
|---|---|---|
| Parameters | - | - |
| Return value | void | |
| Example | Define the obtained report block object as report, and turn off the marquee effect set by startMarquee(): In general reports: 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:
| |
| Mobile terminal | It 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:
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:
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:
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:
The JavaScript code is as follows:
_g().stopMarquee();
Click Parameter Pane and uncheck Display nothing before query. As shown below:
3. Preview effect
Save the template, click PC Preview, the effect is as shown in the figure below:
Note: Mobile terminal is not supported.
IV. Other methods
For other implementation methods, please refer to the following table:
| Method introduction | Effect icon | Applicable type | Supported 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: | | Dashboard | 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: | | 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: | | General report | up |
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: | | Dashboard | up |
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: | | General report Dashboard |
