JS Scroll to the Bottom or Right of the Browser Automatically

1.1 Expected effect

If the template adopts Data Analysis Preview or Data Entry Preview, because there is no pagination, the page after preview is usually large.

Users need to scroll to the bottom or right of the browser to view or fill the latest data. As shown below:

1.2 Implementation ideas

This effect can be achieved by adding a Loading End event.

2.1 Open the template

Open the template: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\data entry\batch deletion.cpt.

2.2 Add event

Click Template > Web Attributes > Data Entry Settings, choose to Individually set for the template, and add the Loading End event, as shown in the following figure:

The JavaScript code is as follows:

setTimeout(function(){
  var y=contentPane.$contentPane[0].scrollHeight;//Get the maximum height of the page
  var x=contentPane.$contentPane[0].scrollWidth;//Get the maximum width of the page
  contentPane.$contentPane.scrollLeft(x);//Set the leftmost position of the scroll bar
  contentPane.$contentPane.scrollTop(y);//Set the topmost position of the scroll bar
},100)

Note 1: At the end of the page loading, some settings may not been loaded yet, and using the setTimeout() function will make the report more compatible.

Note 2: Multi-sheet reports are not supported.

2.3 Effect preview

Save the template, click Data Entry Preview, the preview effect on the PC side is as shown in the figure below:

Note 1: If the desktop resolution is high, sometimes the effect may not be seen. You can shrink the browser window and refresh the page to check the effect.

Note 2: Mobile terminal is not supported.

3.1 Open the template

Open the template: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\data entry\batch deletion.cpt.

3.2 Set frozen rows

Click Template > Duplicate and Freeze, and select Freeze from row 1 to row 6 for Data Entry Preview. As shown below:

3.3 Add event

Click Template > Web Attributes > Data Entry settings, choose to Individually se for the template, and add a Loading End event, as shown in the following figure:

The JavaScript code is as follows:

setTimeout(function(){
var a=$("#frozen-center")[0];
var y=a.scrollHeight;//Get the maximum height of the page
var x=a.scrollWidth;//Get the maximum width of the page
a.scrollLeft=x;
a.scrollTop=y;
},100)

3.4 Effect preview

Save the template, click Data Entry Preview, the preview effect on the PC side is as shown in the figure below:

Note 1: If the desktop resolution is high, sometimes the effect may not be seen. You can reduce the browser window and refresh the page to check the effect.

Note 2: Mobile terminal is not supported.

Example 1:

Automatic Scroll.cpt

Example 2:

Automatic Scroll - Freeze.cpt