in this lesson we will fetch the contacts from the database
and display them on the homepage. Now
the first thing I want to do, is actually rename here
the homepage to Contacts, since this will be the contact list
and I want to check here this
anonymous role and basically I want to do this because I don't want to go into
security in my application we will see later on
how to handle security but for now let's just keep on ticking this
anonymous role in the screens that we create
now, let me just double-click here. This will be
me just give a title to my screen - Contacts
and to display the contacts
in the content area we will need to fetch them from the database
and to do that we will need to add a Preparation to our screen
let me just show you how to do it
right-click here on the screen and select here
'Add Preparation'. This Preparation action
allows you to prepare all the information you will need to render the
screen
in this case we will fetch the contacts from the database
and to fetch these contacts from database we are going to use
this tool here
which is called an Aggregate. This Aggregate
let me just drop it here on the flow, this is a powerful tool
that allows you to fetch and manipulate data
in this case we will use it to fetch the contacts from the database
and further ahead we will take advantage off
other features of this tool. Let me just open up
the Aggregate and what I'll need to do as
you probably already seen here is to drag-and-drop
the Contact Entity into this area. So let me just go here into the Data tab
and drop here the
Contact Entity. And there we have it
these are the contacts that we had on the Excel file that were bootstrapped into
the database
and that the OutSystems Platform now is fetching
to be rendered in our screen. As you can also see here
the Aggregate was also renamed to GetContact
the Platform inferred that it is probably a good name
for this element. Now we have our contacts
we have all the information that we need to render our screen
we can leave here the preparation action and go back to our screen
and now we'll need some sort of widget
here to render all of these contacts. This widget that we're going to use
it's this one - the Table Records. This widget generates
HTML for the web browser to display a table
with the data we fetched from the database and
to tell this widget what data
to render what are the contacts that need to be rendered
we need to be bind it to the
aggregate that we added to the preparation
to do this we'll need to fill-in here
these property, the 'Source Record List'. Let me just double click here
and now I can select from this side
the Aggregate from the Preparation
actually I'm not going to select the Aggregate I'm going to select
this property of the Aggregate which is the List
the result of fetching those contacts from the database
Okay
we're done for this, now we still have here
and empty table so we need to define
what information we want to show here on the screen and
like we did for the Aggregate we're going to drag-and-drop the Entity
into this Table Records, the me just do that
and there we have it
the name and the phone number of our contacts
we're ready to go let's publish in see our application in the browser
and here we have the contacts we had on
our Excel file now displayed in our
Phonebook application. Okay so let's just recap what happened here behind scenes
so we have a user that is
acessing the Contacts page
this is actually triggering a request to the server
and on this server, let me just switch colors
there's this Preparation
the Preparation Action that's executed. And on this Preparation Action
we are actually
fetching the contacts
from the database. There's a table here in the database
that has these contacts. And these contacts
these contacts, me just which colors
this Aggregate that we used to fetch this contacts has this property
called List which is the list of contacts we just fetched from the database
that is going to be bound
to the Table Records widget that is going to be
rendered during the server-side render stage
record by record
each element of the list, is going to be rendered
so we will have here Joanna and Duane
and so on now. Once this server-side render stage is
over, the response is sent back
to the user's browser and shown
here on the screen. That's it.