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

In the previous lesson we customized the web block to show issues with different
priority and now we need to create an edit screen to classify those issues so that
they appear on the corresponding pages. So we'll first, let me first of all just
line up here the information on the flow. So let's create the issue edit screen to
edit the issue. We'll need to pass and input parameter, so issue ID.
And we need to set the page title so we are going to edit issue with ID.
We'll fill this in later. And with a subject that we're also going to fill in
later. And now we need put an edit record on our page and edit the issue entity.
I need to populate this edit record with the data of the issue.
So I need to create the query to populate the edit record. And now that I have the
query I can fill in here the ID. Let me go ahead and put this here.
The ID and the subject, let me select also here the subject from the query.
Ok let me also set the title property. And I was almost also forgetting let me set
the anonymous role. And so we also have the title property to fill in.
Edit issue, let's go ahead and select it here, this with subject that and let's end
with single quotes. So now we need to have a button on our page to save the changes
made to the issue. I will add a row to the edit record and put my save button here.
So let me just change here the label, save and double-click this to implement the
screen action. And first thing we need to do before we send anything to the
database is to make sure that our edit record is valid. So check the valid property
here. And if it is not valid, let me move this to this side,
if it is not valid we end the request at that point. And if it is valid we want to
update the issue that we have. So let me select here also the issue record from
the edit record. Ok this one. After we update the issue we want to redirect the
user back to the unclassified issues page. So let's drag and drop the destination
to the flow and here this one, unclassified. Let's connect these two.
And we are pretty much set for the issue edit page. Now we need to have our issues
connected to this page. And to do that, we are going back to our web block,
and we're going to create a link over the issue and let's select here the subject
and link this to, let's see here, link this to the issue edit.
I need to fill here in the input parameter.
I need to select from the table records the ID of the issue and there's one more thing
I want to do which is to add this information here, the hash sign and the ID and so
on, I want this to also belong to the link. And to do that I'm going to use here
this widget tree, which basically shows me the structure of the page with all the
elements and their hierarchy. And it also allows me to edit this structure.
I'm going to use the shift key to select here these objects and let me just expand
here the link and move them inside the link and before the other expression.
Ok this is pretty much said and done. We have changed the web block so let's see what
happened to our pages. So we have the web block on the unclassified.
And as you can see here we can also see the link here. And since we are using the
same web block on the other two pages so on the high priority we also see the same
changes so we only changed one place and this has the effect of the change being
visible in all the pages that use the same web block. Let's publish our application
and see if it works, the edit page. Ok so here we have the unclassified issues,
we don't have yet any issues classified as high or low priority.
So let's check our edit page and classify a couple of those.
And for instance let's classify this one as high priority. Ok and as you can here
see it disappears here from the list. So this means probably we have done things
right. And also this one, let's classify it as high, and a couple of ones let's
classify as low, this one and also this one. Now if we check on the high priority
list we have a couple issues there as you can see and if we check on the low
priority list we also have a couple issues there. And as you can see and since we
are using that web block we can edit the issues coming from this list.
So if I go here and if I edit this, and say that this is "Maria S.
Anders" and if I save this, you'll see that this also works.
It works but the page is also being redirected to the unclassified issues and we
don't want that.
We want the page to stay here because the issue is a high priority issue.
So let's go back to Service Studio and fix this. And to fix this we'll need to go
our save action here. And basically what we want is to be able to go back also to
the, let me add it here, to the high priority page, this one,
and also to the low priority page. And to do this, to have the conditions that
allow us to redirect to all these places, we'll use a switch.
And here the switch allows us to have multiple conditions. So we are going to have
one condition, let me just connect these two, one condition that will redirect me to
the high priority page, one other condition, number two, that will redirect me to
the low priority page. And there's a fall back, there's this otherwise which is not
properly a condition, this means that if I'm not in the right conditions to go to
high priority and not on the conditions to go to the low priority then we will be
directed to the unclassified page. Ok and now we need to implement these conditions
that gives us these paths one and two here. To do this we can select the path and
implement the condition or we can select the switch and implement them here as well.
So let's go ahead and say that to go to the high priority basically we need to
validate if the priority of my issue, which means to check this priority ID
attribute, if the priority is high priority then to check that I'm going to use here
the value from the static entity.
So I have here the priority static entity and I'm going to compare my attribute with
the high value here. And ok the same applies to the 2nd condition,
the only difference is that going to compare it with the low value instead of the
high so the priority ID needs to be equal to the low value. And in this case the
otherwise will be if the value is null. Ok so one other thing that I'm going to do
is to also have an option here to cancel the edit of the issue.
And let me just add here, cancel. And add a screen action to this.
And basically this screen action will have the same implementation that we did for
the save. So it's going to have, let me just copy, so it's going to have this
switch condition, and let me paste it here. I don't need this one,
let me delete it. And paste here. And we're pretty much done.
Let's test our application again. Ok so here we have our application.
Unclassified issues. Let me edit again this one, let's revert this to "Maria
Anders". And save and we now stay on the high priority and if we try to go to a low
priority and edit this and if we cancel, we still are on the low priority issues.
And that's it.