Create Full-fledged Pages in an Instant
Create a List Page
This lesson is part of the Developer Online Class for OutSystems 9 course.

In this lesson we're going to scaffold the list screen
and compare the end result we did what we have been doing so far
so to scaffold the list screen
I'm going to drag the entity, the Supplier
entity into the web flow, and this creates a screen
to list records of that entity, that includes all the functionality
that we have been implementing so far step-by-step
So let's do it, drag the supplier entity
into the web flow and as you can see by the visual hint
this will create a supplier list screen
Now, you can drop it over the homepage, I'm going to do that
or you can drop it next to it, anywhere in the web flow, and this will
create a new
web screen. So let's replace the home page with this one
and again a bunch of stars appeared in our
application and this means that a lot of stuff was created for us
let's see what what happened lets open the supplier list
and as you can see we have a fully functional
supplier list screen with a filter
the table records, with sorting and pagination in our table records
Lets go through this step-by-step so
in our web screen to have a list screen remember that we need to have a
Preparation so here it is. And on this Preparation we need to have a query
over the Supplier entity and these query
it returns the supplier entity
it includes a search filter, a search keyword
Andy the ORDER BY for that functionality
in our screen for sorting the columns in our screen
so this is the query that was created for us
and the result of this query, the output of this query
is bound to the table records
on the screen, here it is and then we have
we have four columns of our entity. We can add the remaining one
if we want, we can add the website here
there and you'll notice that for
each one of the columns we already have there
the sorting functionality implemented
for each one of the screens and we also have we also have the pagination
implemented for this list and both of these actions
they go to a screen action
the refresh Supplier table, and this screen action
me go throughit, basically
it resets the filters for that action that we have on the screen
it resets the start index if it's needed, and then it has the functionality that
you expect, so
it refreshes the query in the Preparation
and then refreshes the container on the screen
that includes the TableRecords, let me
just show you this. So this container here
it includes the search filter, the TableRecords
and the pagination. So let's publish and see
how this looks in the browser
And here we have it. I'm logged in as administrator so you probably need to go through the
login screen
I'm already registered here, but as you can see here we have
our supplier list with all the suppliers that came from our Excel
file and we have here all information. We can sort
by the columns as we have there and we can also filter
so for instance let's filter for John and there we have it, Johnson & Johnson
and we also, you notice here that we also have
and menu option for this list screen. So all of this was created for us just by
dragging and dropping
that entity into the web flow.And that's it.