Paging made easy

Paging made easy

Hi all,

This is a sample to tackle the age old challenge of a Generic Pagination Widget to use with table records and list records. This sample applies some of the 4.0 cool new features such as: User-Defined Functions (a.k.a UDF), Persistent Web Screen State (a.k.a. Postback) and solution packaging. Please take a peek at the eSpaces to see them in action.

  • Generic Web Block (sharable across several eSpaces)
  • Previous/Next and page number based navigation
  • Remembers the last page you were in

The sample consumer is pretty self-explanatory but nevertheless here goes the How to Use:
  • Add a reference to the Paging eSpace
  • Add the List_Paging_* CSS classes to your eSpace (you may copy them from the Paging eSpace)
  • Drag the web-block onto your screen
  • Set at least the following web-block arguments:
    • RowCount: should be the Query’s ReturnedRowCount property;
    • LineCount: should be the list’s (TableRecords or ListRecords) widget LineCount property;
    • ListName: should be the list’s (TableRecords or ListRecords) widget id.
  • Set the list’s “Start Index” property to use the “ListIndex_Get” UDF (User-Defined Function) using the list widget id as input parameter;
  • Implement the business logic to decide when you should reset the current page (using the “ListIndex_Reset” action). This is the main issue I’ve struggled with. The basic idea is that when you have a list implementing a List/Detail pattern it would be nice if the list in the master remembered the page I was in when returning from a Detail; But in other situations like arriving to the master page from the menu I would like it to display page 1. Here are some of the alternatives:
    • Alternative 1: The list always remembers the last page you were in and you have to explicitly specify (using the “ListIndex_Reset” action) when should the page number be reset (this is the one in the sample);
    • Alternative 2: The page number is reset for every non-postback request;
    • Alternative 3: You tell me...
  • The only remaining question is how to deal with the Query’s “Max. Records” property. I see 3 scenarios:
    • Scenario 1: You are just using previous and next. In this case you should simply set the “Max. Records” property to: ListIndex_Get(<list widget id>) + <list line count> + 1;
    • Scenario 2: Set the Max. Records to an arbitrary big number (eg. 10000) and the paging will work as expected (this is the one in the sample);
    • Optimize query performance by performing an initial count query to return the RowCount and assign it to a local variable (you must also bind Paging Web Block “RowCount” property with this variable instead of the Query’s ReturnedRowCount specified before). To further optimize performance you should only perform this query in a new screen load (use the built in function “IsLoadingScreen()” to detect a new screen load).

I would really appreciate your help with the reset paging issue, so please send me your feedback on that or any other subject you find relevant.

Many thanks to Gonçalo Gaiolas and Rodrigo Coutinho for their valuable feedback and ideas.
Check out an online demo of the paging widget at:

I tried using this widget in the EnterpriseManager e-space, to improve the user accounts pagination. I have over 3000 users and sometimes it's hard to move around them just using the "Next" and "Previous" links.

However I noticed that, although your pagination widget works very well in general, I noticed some speed problems when moving from page to page in my users. I takes more than a minute to "turn the page". I tried with other entities, with less records in the database and it got faster, so I suppose that the speed problem is related to the high number of users I have.

I tried to optimize it, following your advices, but couldn't solve it. I had a different query to initially set the total row count, assigned that value to a local variable and to the web block "RowCount". I only did this when IsLoadingScreen was true. However, on each "page turn", I would get a screen load, so it would always take as long as before the optimization.

Is there any other optimization possible or is this widget just not suitable for large set of results?

Hi Ricardo,

First of all, this widget is now a part of the Widget Library. I strongly advise you to use the version inside the Widget Library because it's the one with all the bug fixes and the juicy new features.

Regarding the "speed issue". That's indeed a lot (too much to be caused by the database in my opinion), you should first determine what's causing the long page render by checking the screen log and the general log in service center for slow screens or slow queries. If no slow screens or slow queries have been logged, I suggest you check the size of the page viewstate to see if it's normal (just a few Kb) or huge (more than 100Kb for example). If it's a viewstate issue, let me know and we'll try to do something about that.

Hope it helps.
I don't have slow queries, nor slow screens in service center. It's indeed the viewstate: it has about 175Kb!

With the previous/next logic the query in the screen preparation would get the records progressively. On the first page request he would get the first 20 records, on the next page he would get another 20, and another 20. By the 10th page turn, the query result count would be of 200 records...and so forth. I noticed that, as we turn the pages, the viewstate gets bigger and bigger. So, previous/next doesn't seem to be very suitable for a large number of page results.

Your widget seemed way better than that. By I'm certainly missing something (or doing it wrong). The way I'm doing it, the query gets the 3000 records every time, because if I don't, the page numbers get scrambled (they disappear or show the wrong number of total pages).

As for the latest WidgetLibrary version, I can't use it, because I'm still developing in the 4.0 outsystems version. :(

The page cannot be found :(

 Hi Louis,


To learn about paging and sorting it's best to go to the online Developer Course I available in the academy tab.


You can go directly to the "Paging & Sorting" lesson.


Hope it helps,


GREAT I'm gonne start working on that straight away! thanks!
Hi Mário,

I tried this lesson, its working well except the "previous" link; it didnt become highlighted(also the pagenumber "1" ) when i click "next"(-page). Next-link is working. I dubble checked the properties but i cant find out what the cause.