More UI Patterns with OutSystems Widgets
Apply Pagination to a List
This lesson is part of the Developer Online Class for OutSystems 9 course.

The rich widgets library also has a widget and a couple of actions to help you
implement pagination on a table records. In this lesson, we're going to use those to
add pagination to the issue list. So, again, we're going to our web block,
to our issues web block, where we have our table records and we will implement
pagination here. So, again, I'm going to use the searching capabilities inside
Service Studio and the keyword that I'm trying to find is "navigation".
And here we have a web block list_navigation and those actions.
These are the elements from rich widgets that will help me implement the pagination
on this table records. So, what we want to do is to actually drag and drop this list
pagination to our web block, right after the table records. And here we have it.
And we have a couple... a few actually, few attributes that we need to fill in.
But before we do that, let me just align this pagination to the right side of my web
block. So, let's fill in these attributes. The first one we need to fill in is,
again, the runtime ID of my table records, as we did for the sorting.
So, I will get this through this property, the ID property of the widget.
And that's it. The next one is the line count and, again, the line count is a
property of the table records and we'll get it here again. Okay.
The last attribute that we need to fill in is the total row count.
And here, this is where we're going to use, for the first time,
a property that we discussed in the lesson about the simple queries,
which is the count property. So, if you recall, this will, this will execute a
second query to count the records that are on the database that match the criteria
that you have filled in in the simple query. Okay. And now, as we did for the
sorting, we'll need to fill in the handler that will handle the notification that is
received from this web block. So, we're going to set the destination of this handler
to use, again, the OnOrderBy. Because basically, what we want to do is to
refresh the query and refresh the table records. So let's set it again to the
OnOrderBy and let's change this name because now this is not just for the order,
this is also for the pagination. So let's change this to basically to what it does,
which is to refresh the table records. So refresh, issue, table.
Okay. So, what we want to do is to make sure that our records are fetched from the
database according to the page that we are showing in this widget.
And to do that, we'll need to change a property here in the table records.
We choose the start index. And we need to change this to use one of those...
let me go ahead and search again... one of those actions, navigation...
One of these two actions which is actually the get start index,
okay? So, let's go and "CTRL + space" and add it here, so list navigation,
get start index, this is what we want. And let me expand this a little bit so that
we can see here the help. We need to fill in, again, which widget we're working
with, so the runtime ID of the widget, and then we have a couple of optional
attributes. Let's select here the table record ID, and we'll leave those optional
attributes with the default values. So we have set the table records with the
property, with the start index property, reading the value from the widget.
Now what we need to do is when we refresh this table records,
we also want to refresh here this widget. And to do that, I'm going to enclose all
this into a container. So, I'm going to enclose the container that has the
navigation and also the table records. I'm going to enclose this in a new container
and this will be the issue table container. And now on my refresh issue screen
action, I want to refresh not the issue table but instead the whole...
the container with all the information. And this is pretty much it.
Let's publish and see if our pagination is working. Okay, let's go again to our
unclassified issues because this is where we have more issues and this is probably
where we're going to have pagination. Remember that we are showing ten items per
page and so here we have our pagination. So, if we go to page number two,
you see that the issues that are shown change. And that's it.