3310
Views
9
Comments
Solved
List Pagination for Reactive Web
Question

Hello,

I have a list in a block in a reactive web application. I would like to paginate this list, and not use infinity scroll.

If anyone could provide directions, or a tutorial, or documentation about how I can use the Pagination widget with a List widget, I would appreciate it.

Thank you

2021-01-21 14-05-49
José Pedro Proença
 
MVP
Solution

Hi Landon Doucette

Bellow I attached a few print screens of a reactive webapp that we did on a lab at Next Step. There you can find an example of the pagination widget being used.

Has you can see you need to create two local variables, Start Index and MaxRecords with your desired Values, in this case 0 and 50 respectively.


Then you just need an action that will handle the OnNavigation event to reflex the StartIndex variable and refresh the Aggregate.


The NewStartIndex input will be filled with the value from the OnNavigation event, as you can see here:


Hope this helps you :)
Thanks

2019-05-22 11-30-09
Marcelo Ferreira

Hi Landon,

OutsystemsUI has a pagination component. Did you try to use it?

Regards,

Marcelo

2019-07-26 21-36-20
Landon Doucette

Marcelo Ferreira wrote:

Hi Landon,

OutsystemsUI has a pagination component. Did you try to use it?

Regards,

Marcelo

Yes. That's what I'm asking for help with. There is no documentation.


2024-07-05 14-16-55
Daniël Kuhlmann
 
MVP

Hi Landon,

The widget is called Pagination and there is documenation: 

https://outsystemsui.outsystems.com/OutSystemsUIWebsite/PatternDetail?PatternId=54

Best way to learn how to implement is to create a screen from a list screen template and  see how it is implemented.

Regards,

Daniel

2021-01-21 14-05-49
José Pedro Proença
 
MVP
Solution

Hi Landon Doucette

Bellow I attached a few print screens of a reactive webapp that we did on a lab at Next Step. There you can find an example of the pagination widget being used.

Has you can see you need to create two local variables, Start Index and MaxRecords with your desired Values, in this case 0 and 50 respectively.


Then you just need an action that will handle the OnNavigation event to reflex the StartIndex variable and refresh the Aggregate.


The NewStartIndex input will be filled with the value from the OnNavigation event, as you can see here:


Hope this helps you :)
Thanks

2019-07-26 21-36-20
Landon Doucette

Thank you Daniel and Jose!! This has been immensely helpful.

2024-06-24 04-49-49
Princi

There is one more scenario that I'm facing on pagination. 

Please check the URL below for the help

https://www.outsystems.com/forums/discussion/73516/pagination-not-working-when-delete-last-item-from-the-list/

UserImage.jpg
Rita Alexandra E. Monteiro

Hi,

By the way...I can't find the widget pagination. I've already searched in tags like a movie at Course Pagination and Sorting, but I can't find it. 

widget Pagination is (now) navigation block?

Regards,

R.Monteiro

UserImage.jpg
Pedro Pereira

Hi Rita,

If you search "pagination" on the left side and you can't find it, click "Search in other modules" and you will find it in the module "OutsystemsUI".

Pagination is a block that is part of "Navigation" UI Flow.


Hope it helps :)

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.