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

In this lesson we will see how to create an element that can be used in multiple
screens. For this we will use new application. This will be he customer support
and this application will help the support team with the issues submitted by
there clients. The first thing we will do is create an entity here.
This will be the issue entity , I will add a few attributes to this entity.
The first one will be a subject, the issue will have a subject,
then description, we need some contact. We will add a contact and an email.
Finally we need to have a submit date for this issue. Let's review here the data types,
I want the subject to be text but 100 characters long, and mandatory.
The description 1000 characters and mandatory. The contact name I will leave
it as it is. The email is also and email as a mandatory. I want the submit date
to be mandatory but have a default value - CurrDate(). I am going to load and
bootstrap some issues that we have on an excel file the excel file is this one.
Issues so let's proceed and we have the issues already there we want to show these
issues on a screen. So let's create the issue list and let me change the home
page the issue list let me set it here on the top and add a property to issues.
And let's implement the screen, let's set here the title and have the issues
list I want to have a table records with the issue entity.
This only adds four of the attributes so let me just add the submit date as well and
now I need to create a query for this record. I want to change the sorting of
information, so let's go ahead here and say the order by will be not by the subject
but by the submit date. Now I am going to tweak a little how we show this
information, move this description below the subject so let me put it below and
remove this column and I will do the same for the email. Drag and drop here the link
below the contact name. Service studio wrapped the expressions in a container, and added
a margin, so let me remove this margin to make this look like the rest of the information and I want
to change also the number of rows we are showing. I only want to show 10 issues at a
time and finally want to add to this table some information that is missing here.
We want to show the issue number, and the issue number is given by the id of the
issue entity. let me add here before the subject let me add here an hash sign.
Add some spacing there and here and an expression next to this hash sign with the
value of the ID. So let me get it here from the table records.
Here it is. Let me change the labels on the table. On the first column we
have the issues information, here we have information of who reported so this will
be reported by, and here instead of having submited date, we'll have reported on.
I want to do one more thing with this information.
You recall this the description can be up to 1000 characters long and I don't want
to show that much information here on the list son I am going to enclose this expression
in an if and show only 100 characters of this expression. So I'm
going to use here a built in function for the length so I am going to
check the length of the description and if the length of the description is
more than 100 characters then we are going to customize here this expression.
Let me copy this and paste it. If it is more then 100 on this true branch I am
going to use a another built-in function to show a substring of this expression.
This will start at the position zero and will have 100 characters of the description.
I want to show to the users when this description is truncated so I am going to add here
next to this expression information that there is more description
than what we are really showing. And let me customize here the preview setting of the if branch
to show only the true branch . Let's publish and see our publication for the first time.
Here we have out information. Our issues, who reported and the date of the submission of those issues.
Let's go back to service studio and create our elements that can be reused.
The way we are going to do that is to create a webblock to contain the information of these issues.
The webblock is the reusable screen part then can implement is own logic and it has
it can have a preparation and it's own screen actions. It has an implementation.
And it can be instantiated.
Let me go to the main flow and add the issues webblock. The implementation that I want to have is the same as in the issues list.
Let me go ahead and move and cut here the table records. Paste it here on the webblock
and I also want to move the preparation and want to cut here and paste it
here on the webblock. As you can see the implementation is okay there is no
errors. What we need to do now, is to use this webblock in our web screen.
This is the reusable part that we can use in several screens, and you'll do that in the next lesson.
I just added the webblock to the screen. What I'm going to do now, is to debug our
application for you to see the life cycle of the request and see where service studio is
going through. A break point to this preparation on this webblock. Let me just add another preparation to this web
screen and add a break point here and I am going to debug my application.
I will debug and publish to see in the debugger how the request is being executed.
Okay let's open up. Okay as you can see first the preparation of the web screen
is executed. After the preparation is executed, the page is going to be rendered and we will see that the preparation of the webblock
is executed and the webblock is rendered. Let's finish this and see the result on our
page and this is it!