Stable version 4.1.0 (Compatible with OutSystems 11)
Other versions available for 10 and Older
Published on 19 May by 
 (6 ratings)
We picked this asset for you. Give it a try.
InfiniteScroll Reactive
Compatible with OutSystems 11
See more



For using the regular/standard infiniteScroll:

1 - Create a local variable (set to integer) on the screen and set the line count property of the list/table to this variable. (the default value of this local variable should be adjusted to the specific screen. The max records of the aggregate should also be bound to this local variable.

2 - Insert an if widget below the table/list widget and put the component infiniteScroll block on the True Branch, set the condition to UserAggregate.Count > NumberOfRows. Insert these two widgets inside a container and name them.

3 - For the screen action needed to serve the web block, create a similar action:

4 - On the Assign increase the number of rows suitable for your effect, refresh the aggregate (set the max records to the local variable created on point1) and use the ajax refresher to refresh the container that contains both the list/table widget and the if widget (container described above).

For using the inner infiniteScroll:

1 - Repeat all the process defined for the other scroll

2 - Define on the block the two parameters needed: the InsideDivId should be the table/list id and the OutsideDivId must be the id of the container containing the table/list and the if widget already defined.

3- Define a Style Sheet on the screen to style the container containing the table/list and if widget, adapt this style sheet to your needs, one example is shown below:

.ExampleStyle  {

            display: block;

            height: 450px;

            overflow-y: auto;