Refresh Page Elements with Ajax
Use Events to Refresh Parts of the Page
This lesson is part of the Developer Online Class for OutSystems 9 course.
LEARN MORE

Transcript
In the previous lesson, we updated a single row in the table records in this
issues web block, but we still need to update the menu tabs when an issue's
classified. But let me open here, our application for you to see recall that when we
classify an issue. Let's for instance, classify here number 50 as a low priority.
When we classify, see that we have 5 low priority issues. When we classify this as a low
priority, we only refresh that row, but the menu doesn't get updated.
So let's see how we can fix this. And, what we want to do here in this screen
action. In the set issue priority, actually what we want to do,
what we'd like to do is to refresh the menu that would be done by using an AJAX
refresh and then selecting the menu. But we don't have the menu in this context.
The menu is not part of this web block. The menu is part of the page.
So we have the issues Web Block here and on the same page we also have the menu.
So what we need to do is to use another pattern in AJAX development,
which is to notify for this Web Block to notify the parent that it needs to do
something. This is a generic notification. Okay, let's start doing that,
so let's add here again an execute action node. And the action that we want to
select here is the notify, here this one, notify widget. And basically,
what this does is a generic notification of the parent so the page that contains
this issue or the Web Block that contains this issues Web Block and it can send the
message. In this case, we don't want to send any message we just want to say that we
have done something and you need to refresh. You see here that when we added this to
the Web Block we got some errors here. And this is because, when we set this Web Block
to--when we added this action to the Web Block we actually also added here a new
property to this Web Block, which is the handler for the event.
So now the page that uses that instantiates this Web Block needs to do something on
this notification. So we need to have here on this page a screen action and this
will happen for all the three pages that have the Web Block. Okay,
so in all of these three pages, we need to have a screen action.
Let me just go ahead and implement a new one. Service Studio automatically gave it the
on notify name. On this screen action, what we want to do is to refresh the menu.
So this is where we are going to put the AJAX refresh to refresh the menu.
But again, the menu is not shown here. And, you recall that only named widgets
will appear here. So, we'll need to go back to our page and give a name to our menu.
So let's set here, this as menu, and now we can select here the menu.
Okay, we'll have to do the same for the other one. So, let me first set here the
menu name, there. And, now implement the new screen action that will refresh the
menu. Okay, and the last one, let's do the same. Set the name for the Web Block,
menu, implement the new screen action here and on this new screen action,
refresh the menu there, okay. Well, this is pretty much what will have to do,
let me just go over what was done here. So, in our screen action where set the
priority, we notified a parent okay, using this built in action.
We notified a parent, then on the pages that contain this Web Block we need to handle
that notification. So we need to implement a screen action. And,
on that screen action we are refreshing the menu Web Block. So,
let's see if this works. Okay, so let's go again to the unclassified and set one
other issue. We'll set number 51 as high. This first one will go over in the
application and on the second one that we will set to low, we will go through that
request using the debugger again. So, number 51, let's set it to high and there you
have it. So, number 51 disappeared from the list. You saw the refresh on that row
and the menu got updated. So now we have 7 high priority issues and 25 unclassified.
So, let's go back to Service Studio and set some break points,
and let's set a break point here. No, actually we're going to set a break point here
on this screen action. Okay, and we will see, through the debugger,
we will see that from where the request is coming from. And,
another that we need to do is how does our menu get refreshed?
So, those counters got refreshed, so this means that the preparation of the menu web
block is also being executed. So let's confirm that and put a break point here,
and let's debug our application. Okay, so let's set number 52 as a low priority
again. And it disappeared and here we have it. So we have a break point here on
notify and if we continue. You'll see that this will refresh the menu.
If we continue, you see that this leads to the preparation of the menu and we're
still coming from the on notify. You see here, so if we step out of this.
Let's refresh the menu, let's render the menu, we go back to the on notify screen
action, Okay, so there you have it and again now we have seven low priority issues
and 24 unclassified issues and that's it.