Refresh Page Elements with Ajax
 Refresh Part of a Page
This lesson is part of the Developer Online Class for OutSystems 9 course.

In this lesson we will see how to use AJAX to refresh a part of the screen
instead of rendering the whole page from scratch. What we want to do is to give the
users the possibility to see the full description of the issue here in this issue
description webblock. Let me just open it up. Remember that we truncated the
description when it is bigger. So when the length is bigger then 100
characters we truncated the description on the page. And we want to give the user
the possibility to expand this description to the full length.
Let me just open this up, to do that we need a local variable,
let me add it here. This will be the show full description and it will be a boolean
variable that will by default will have the false value. And what we want to do with
this variable is to add it here to this condition so we want to show the truncated
version of the description when the length is more than 100 characters and we're not
on the show full description mode. And we are all set here for the condition.
What we want to give now to the user is a way to expand this description,
so we need to add here a link. So this will be the read more option here.
And let me select this and create a link over this text to a new screen action.
Let me rename this. This will be the toggle description. So when the user clicks
this link we want the full description to be shown, so in other words we want to
change the value of this variable that we just created. So let me go ahead and
implement this on the screen action. We want to assign to the show full description
well actually the opposite value that it holds at the present time.
Not full description. We want to invert the value that it holds.
This is it, so when the user clicks here the toggle description will be executed and
the variable will change from false to true. When the web opens the pages
rendered, the full description will be evaluated again and the
full description will be shown. But what we want to do actually is not to render the
whole page but instead just this description part. In other words,
just this container that holds this description. So to do that we need to use AJAX
as I said and will do that here on this link. So when we select this link
There's here a property which is the method. We are going to change this from
submit, which you have been using so far, to Ajax submit. And this method property
basically tells what type of request will be executed when you click this here link.
So instead of doing a submit you want to use an Ajax submit.
If you don't know AJAX stand for Asynchronous JavaScript and XML.
Basically what happens is that the asynchronous call and asynchronous request made
to the server and the server will respond with part of the HTML page,
not the full page, just one part of the page to be replaced on the client's side.
And we will see later on using the debug only this screen action and only this part
of the webblock will be executed. We won't see for instance the preparation of the
page getting executed again and all the rest of the pages being rendered.
We will see that later on. For now we set the Ajax submit as the method and now we
need to tell which part of the screen we actually want to refresh.
And to do that we will go here to the screen action and after we toggle the
variable, after we change the value, we want to use the Ajax refresh and this
option, this tool here will allow to select the widget from the screen or from the
webblock. And we actually don't want to refresh the whole webblock.
We want to refresh the container but the container that holds the description is not
here, and it is not here because only named widgets are available for selection.
So we need to give the name to our container, and I will click here to go back to
the webblock and set the name property of this container. And we will say this is the
description container. Now that it has a name I can select it,
so let's go back here to our Ajax refresh and select the container here.
Now it shows up. We selected the object there is also another property here which is
an animation effect. I am going to select this as a vertical slide which means that
when the browser updates the HTML this new description that will be shown,
the full description, will have an animation to vertical slide that comes over the
page. We will see that when we test application which is pretty much right now.
So let's publish and see if it's working. Okay, here we have our application and
here we have our read more link and if we click this, we see that we have,
we show the full description and we have the animation of vertical slide in the
content. If we go here to the other list, you will see that we have the option to
expand and we can expand more issues on our lists. What I want to do now,
let me go back here to the dashboard. What I want to do now is to go over this
request, this Ajax request using the debugger. Let's go back here to service studio
and let's set some break points here in the toggle description.
Let's add a break point here and we will also add, so this webblock is used here
in the dashboard and I will also have here a break point in the preparation of this
web screen. Let me set the debugger running and let's go back to our browser and
expand the description. So when I click here this will make a request to the server
and will execute the screen action. And so here it is the first break point to be
triggered is on the screen action. We're going to change the variable to true and
then we're going to refresh the screen. Let me step into first to see what happens
here. When I step into this Ajax refresh you will see that this goes to the
container that we selected. This is rendering the container that we selected and if
we step out of here, we go back to our screen action. This as you saw,
this only went to the issue description and rendered this part to send it to the
client and if we continue our request here, you'll see that the request ends.
It doesn't go into the preparation of the page. It only executes the screen action
and it only renders the widgets that were selected in the AJAX refresh.
So if you go back to our browser and here we have it, the full description of the
issue. And that's it.