About

InfiniteScroll is an OutSystems' component available in Forge for Traditional Web Applications. This component is used to simulate a mobile-esque type of scroll on a web application on both table records and list records. It has two variations that can be applied : one standard outer-side scroll and an inner scroll.

Outer and Inner Scroll

Instructions - Infinite Scroll

Prepare your screen.

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 binded to this local variable.

Use the InfiniteScroll Widget.

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 it.

Define the screen action.

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

Screen Action Example

Refresh the aggregate

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

10.

Instructions - Infinite Scroll (Inner).

Same Instructions.

Repeat all the process defined in the infinite scroll (on the left).

Define the parameters.

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.

Define the StyleSheet.

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;
}

10.