Create Full-fledged Pages in an Instant
Add Show and Edit Pages
This lesson is part of the Developer Online Class for OutSystems 9 course.

In this lesson we're going to scaffold the Show screen
and an Edit scree. And again compare the end result
with what we have done in previous lessons. Okay so to scaffold the Show
I'm going to repeat the steps that I did for the List screen
so I'm going to drag the Entity
Supplier into the Web Flow, and again as you can see by the visual hint
this will create the supplier Show screen
So dragging the Entity into the Web Flow, creates a screen to show a record
an it connects this screen to
the List screen. And again, a bunch of stars appeared so
a lot of work was done for us. Let's see what was done
in our application and the first thing we'll do
is to open the supplier list
and you'll notice that there's a new link here
on the name column and this link
goes to the supplier Show screen
And now, remember for the Show screen we need to have
an input parameter, here it is of datatype Supplier
identifier. This input parameter is used in the
query that we'll have on the Preparation. And again
here to Preparation so the query
that uses the input parametered that gets
the supplier, here it is. And then
these query the result of this query let's go into the screen now
here wew have our screen with the title
and with the ShowRecord, and this ShownRecord
is bound to the query
on the Preparation. Okay so this is the Show screen
now let's repeat the same steps that we did for the List
and the Show screens, to create the Edit screen
So again drag-and-drop the Supplier Entity into the Web Flow
The third time you drag the Entity into the Web Flow
you create a screen to edit or create a record
and connects it to the Show and List screens
These screens include all the functionality we've implemented
in the previous lessons. And again let's start this review
from the Supplier List. And now you'll notice that we have a new action here
to create a new supplier. This link goes into the supplier
Edit, and as you would expect, the supplier
Edit screen includes an input parameter
that is not mandatory for the Create action
It includes a query in the Preparation that uses
this input parameter and this query
the result of this query is bound to the Edit record on the screen
So here
on the Edit record. And again we have the title
depending on if it is creating a new supplier
or if it's at editing an existing supplier
and finally we have a save action here
and this save action pretty much does what you would expect
it validates
the inputs, and if they're not valid it
renders back the EditRecord for you too
fix the data that is not correct and if it is valid
it creates or updates the supplier, and redirects the user back
to the supplier List
The final thing we need to show you
is where
this link from the supplier Show to the supplier
Edit, is created. And if we go into the supplier Show
you noticed that now we also have an action here
to edit this supplier. So let's test all this in our application
Okay so here we have our suppliers application
we have an action to create a new supplier we have the Show
so lets go into one of the suppliers, Abbott Laboratories
and we have the Show screen here with all the data
we can edit the supplier and lets say that
we want to change something here
so let me just say that I want to remove here this parenthesis
from this phone number and save it
And there you have it, a fully functional
Show and Edit screen in your application. And that's it.