I. Overview
1. Expected effect
On some large-scale display screens, the current static graphic display can no longer meet the market demand. Sometimes it may be necessary to achieve some dynamic graphic display effects, such as the marquee scrolling effect. Then how to achieve it through the fan soft report? The expected effect is as follows:
1) Vertical scrolling:
2) Horizontal scrolling:
3) Irregular horizontal scrolling:
Note: In the dashboard, you can also directly use the official plugin scrolling message.
2. Realization ideas
It can be achieved through the pure HTML display effect of the cell.
II. Example: Vertical scrolling
1. Prepare data
Create a new normal report, create a new built-in dataset Embedded1, add only one field, and customize some text data, as shown in the following figure:
2. Design report
Drag the information field in the dataset to cell D4 and set the expansion direction to not expand. The design table style is shown in the figure below:
Right-click on column D to hide it.
3. Cell insert formula
1) From top to bottom, scroll horizontally to the leftSelect cell B4, right-click and select "Cell Element> Insert Formula", the formula is as follows:
"<marquee id='affiche' align='left' behavior='scroll' bgcolor='#ffffff' direction='up' height='250' width='400' hspace='0' vspace='2' loop='-1' scrollamount='10' scrolldelay='100' onMouseOut='this.start()' onMouseOver='this.stop()'>" + REPLACE(D4, ",", "<br /><br />") + "</marquee>"
Note: The formula is for splicing the content of cell D4 into the HTML statement. REPLACE(D4, ",", "<br/><br/>") means to replace "," in the contents of cell D4 with "<br/><br/>",<br /><br /> means "line break" in HTML.
2) Scroll from bottom to top, horizontally centeredJust modify the above formula to:
"<marquee id='affiche' style='text-align:center;' behavior='scroll' behavior='scroll' bgcolor='#ffffff' direction='up' height='250' width='400' hspace='0' vspace='2' loop='-1' scrollamount='10' scrolldelay='100' onMouseOut='this.start()' onMouseOver='this.stop()'>" + REPLACE(D4, ",", "<br /><br />") + "</marquee>"3) Formula parameter explanation
| Parameter | Meaning |
|---|---|
| direction | Indicates the direction of scrolling, the value can be left, right, up, down and the default is left |
| behavior | Indicates the way of scrolling, the value can be scroll (continuous scrolling) slide (slide once) alternate (scrolling back and forth) |
| loop | Indicates the number of loops, the value is a positive integer, loop='-1' means an infinite loop |
| scrollamount | Represents the movement speed, the value is a positive integer, the default is 6 |
| scrolldelay | Represents the pause time, the value is a positive integer, the default is 0, the unit is milliseconds |
| align | Indicates the vertical alignment of the element, the value can be top, middle, bottom defaults to middle |
| bgcolor | Represents the background color of the moving area, the value is hexadecimal RGB color, the default is white |
| height | Indicates the height of the motion area, the value is a positive integer (the unit is pixels) or a percentage, the default width=100% |
| width | Indicates the width of the motion area, the value is a positive integer (in pixels) or a percentage, the default height is the height of the element in the label |
| hspace | Indicates the horizontal distance between the element and the boundary of the region, the value is a positive integer, and the unit is pixel |
| vspace | Indicates the vertical distance between the element and the boundary of the region, the value is a positive integer, and the unit is pixel |
onmouseover=this.stop() | Indicates that scrolling stops when the mouse is over the area |
| onmouseout=this.start() | Indicates to continue scrolling when the mouse is moved away |
| style | Means adding style text-align:center; means that the text is centered horizontally display:table-cell; means that the text is centered vertically vertical-align:middle; Refers to the label element to be presented in the form of a table cell |
4. Set cell attributes
1) Display by HTMLSelect cell B4, and set the display content of "Cell Attributes> Other" to "Display by HTML", as shown in the figure below:
Select cells C4 and D4, right-click to select other, and select "No Automatic Adjustment".
5. Effect preview
Save the report and click "Pagination Preview". The effect is the same as the vertical scrolling effect in section I.1.
Note: Both the App and HTML5 end support scrolling effects, but do not support the pause and resume scrolling effects by mouse movement.
III. Example: Horizontal scrolling
1. Prepare data
Create a new noemal report, create a new built-in dataset Embedded1, add only one field, and customize some text data.
2. Design report
Drag the data column to cell A1 and set the expansion direction to "no expansion", right-click column A to hide it, the table style is as shown in the figure below:
3. Cell insert formula
Insert the formula in cell B2:
"<marquee id='affiche' style='text-align:center;display:table-cell;vertical-align:middle;' behavior='scroll' bgcolor='#ffffff' direction='left' height='100%' width='500%' hspace='0' vspace='2' loop='-1' scrollamount='10' scrolldelay='100' onMouseOut='this.start()' onMouseOver='this.stop()'>" + REPLACE(A1, ",", " ") + "</marquee>"
Note: Please refer to section II.3.3) for the explanation of formula parameters.
4. Set cell attributes
Select cell B2, set "Cell Attributes> Other", select "No Automatic Adjustment" under "Basic", and set the Display Content to "Display by HTML", as shown in the following figure:
5. Effect preview
Save the report, click "Pagination Preview", you can see that the text scrolls from right to left, vertically centered, and the effect is consistent with the horizontal scrolling effect of section I.1.
Note: Both the App and HTML5 end support scrolling effects, but do not support the pause and resume scrolling effects by mouse movement.
IV. Example: Irregular horizontal scrolling
1. Prepare data
Create a new normal report, create a new built-in dataset Embedded1, add only one field, and customize some text data, as shown in the following figure:
2. Design report
Drag the data column into cell A3 and set its expansion direction to "Vertical expansion", the table style is as shown in the figure below:
Finally, column A is hidden.
3. Cell insert formula
Insert the formula in cell B3:
"<marquee id='affiche' align='left' behavior='scroll' bgcolor='#ffffff' direction='left' height='250' width='400' hspace='0' vspace='2' loop='-1' scrollamount='"+(rand()*(11-1)+1)+"' scrolldelay='100' onMouseOut='this.start()' onMouseOver='this.stop()'>" + REPLACE(A3, ",", "<br />") + "</marquee>"
Note: Please refer to section II.3.3) for the explanation of formula parameters.
Among them, scrollamount='"+(rand()*(11-1)+1)+"' means to generate a random number between 11 and 1 as the value of the movement speed.
4. Set cell attributes
Select cell B3, set "Cell Attributes> Other", select "No Automatic Adjustment" under "Basic", and set the Display Content to "Display by HTML", as shown in the figure below:
5. Effect preview
Save the report and click "Pagination Preview". The effect is the same as the irregular horizontal scrolling effect in section I.1.
Note: Both the App and HTML5 end support scrolling effects, but do not support the pause and resume scrolling effects by mouse movement.
V. Template download
Refer to the completed templates:
%FR_HOME%\webroot\WEB-INF\reportlets\doc-EN\ReportApplication\BasicApplication\Vertical_scroll.cpt
%FR_HOME%\webroot\WEB-INF\reportlets\doc-EN\ReportApplication\BasicApplication\Horizontal_scroll .cpt
%FR_HOME%\webroot\WEB-INF\reportlets\doc-EN\ReportApplication\BasicApplication\Irregular_scroll.cpt
Click to download:
