Structure Pages with Reusable Elements
Nested Reuse of Page Elements
This lesson is part of the Developer Online Class for OutSystems 9 course.

In this lesson we'll see a special case of webblock reusability.
We will be nesting webblocks. What we are actually going to do and let me show you
here. We're going to move this information that we have here on this column,
on the issue column', we're going to move it to a new webblock so that we can reuse
it in other screens. So, let's go ahead and create, the new webblock,
this would be the issue description webblock and we'll need to add an input parameter
for this, and it's going to be an issue. Okay, so let me just go ahead here back to
the issues webblock and select the objects that are on this column and let me use
here the widget tree to help me out, I'll select the link and the container and cut
them from here. Okay? And back in the issue description I'll paste them here.
We now need to fix these errors that we have and basically, we have these errors
because we no longer have this issue table here, and we need to get these values
from the input parameter. Lets go ahead and do that for this one,
this is the ID, and for the next ones. Okay? I think I can, let me just try this,
I think can replace all of this with just Issue. Yeah, that's it.
So let me copy this, make this faster, and next error, and replace this with Issue,
next one, and the final one, here, description, all this space,
paste it. Okay, we still have a couple of warnings here and let me
show you what's happening, we had, the connector from the issue's webblock to the
issue web screen, because we had the link on the issue to edit the issue on this webblock.
We have moved that content to this new weblog the Issue Description.
So let's reconnect this, or let's move this connector to the new webblock and this
fixes the warning that we have. Let me just reorganize here my flow so that it's
tidier. We're now going to reuse, this is the part that we're now going to nest the
webblocks, we're going to reuse the Issue Description inside the Issues webblock.
So let me just drag and drop here and we need to pass the parameter,
it is an issue and we will get it from the table records and here it is.
Okay, so we have our issues still with the same information and now we have a new
webblock that we can reuse on this new page. The new pages are going to build here;
this is actually going to be a dashboard. So let me just go ahead here and add a new
web screen. So this will be a dashboard were we're going to have a list of high
priority issues and low priority issues. Let me just go ahead and set this thing,
the�anonymous�role, the title here, so this is dashboard, and let me also add this
dashboard to our menu. And again I want the dashboard to be the first option so let
me go ahead and do the menu webblock. I will use the widget tree I will move this
option to the first position. Okay. That's it. Back to our dashboard so we'll have
two list one with the high priority issues and another one with the low priority
issues. So we'll need a couple of queries and we'll need the preparation for that.
Let me create the query over the issues and this would be the Get High Priority
Issues. To return only the high priority, I'll need to add a condition here,
and this will be the position, sorry, the priority ID needs to match the high
priority value. Okay, so we just have the condition so we can also change here the
order by. I want to have these records sorted by submit day.
Okay? I can now reuse this query. I'll copy, paste it, okay?
And this would be now the Low Priority issues, remove this too from the end,
and I'll need to fix the condition here. So this would be the low priority not
the high priority and I'll keep the order by. So this is pretty much done.
Now let's implement our web screen. We're done with the preparation and what we want
to have here is a title and then the list of the issues. So to have the title we'll
use a container here. A container is pretty much a DIV in HTML.
I want to add a style to my container. So that this looks like a title.
It's adding one that I'm going to put and this will be the high priority issues.
Okay normally, when we list things on the screen we use the table records in this
case we're going to use a list records. Let me just drop here a list records below
the title. List records allows displaying record lists but does not structure the
records into a table like the table records does, so this give you more flexibility
to work the layout of the information. So we're going to bind again this list record
to a source record list like we do for a table records and the first one would be
the High Priority. So we'll get it from the query with High Priority issues and
we're going also to, and this is a best practice, we're also going to replace this
automated name that we created here and this will be the High Priority issues.
Very well. One other thing that is particular to the lists records is that we have
this property here, thus, the line separator. And basically this tells you the way
in which Service Studio is going to separate the elements in this list.
And we have three options. You can separate them with a new line.
You can separate these items with bullets, and this is the way to create the bullet
list in Service Studio, and the option that we're going to use is not to have any
separation. Okay? We'll let the webblock that we're going to use will create the
layout for us. We're pretty much all done except with the configuration of the list
record, now we need the content for this record and as I said we're going to use the
issue description webblock we just created. So let's just drop here inside the list
records and we need to bind this variable here. And we're going to bind it to the
high priority issues to this record here. Okay, so we're all set to the High
Priority. Let's copy and paste this to create the Low Priority.
So I'll select this two containers copy and paste them here.
Okay. And now let's change this. This will be the Low Priority.
We�ll need to change the binding of this list record and the name as well so this
not the high it's the low priority. We can now remove this number two from the end,
and change here the binding; we're going to bind it to the Get Low Priority issues
query. Done. And we have now the record set there, Service did already fix this.
We're pretty much all done, I'm just going to do one last thing,
which will be to change here the number of records that we're going to show in each
one of this lists. So we want to have not the default 50 elements here but only
four. Let me change also here on the Low Priority list there,
so four elements for each one of this lists we're all set and done,
let's publish and see our application. Okay, so here we have it,
we have our dashboard; actually I forgot to do something. Let me just go back
because this I didn't show you. I want to have this dashboard as the new home of my
application so I will redirect this and publish again. And here we have it.Our
dashboard with the High Priority Issues, the Low Priority Issues,
we have the description, we have the link, also to edit the issues,
and a webblock that is also present on the unclassified issue nested inside another
webblock. Okay? So you can nest a webblock inside another webblock.
The only restriction you have here is that you cannot nest the webblock inside
itself. Okay? And also this webblock description we are reusing it again to create
this dashboard and that's it.