Refresh Page Elements with Ajax
Change and Refresh a Row on a Displayed List
This lesson is part of the Developer Online Class for OutSystems 9 course.
LEARN MORE

Transcript
In this lesson we will see how to interact with the record on the list and remove
it from that list. What we want to do is here on the unclassified issues,
provide an option for the users to quickly classify these as high or low priority.
You remember that we implemented this list using a reusable element.
So we'll need to go here to the issues webblock and add the buttons to this list.
What we want to do again is to classify the issues so we only want to show these
buttons, when these issues don't already have a priority set.
And to do that we need to add an If here, so lets add an If here below the issue
description and on the If we'll add the condition. So we'll need to check here the
priority ID, the priority ID on the issue table needs to be null.
And if it is null, we'll have two buttons here on the true branch.
Add the second one there. One will be to set the priority as high,
and one will be to set the priority as low. Okay. Let me just set the preview
settings here, on the If to show only the true branch. And now what I want to do is
to customize the buttons. I want these buttons to look good.
And to do that I will set the, I will use some CSS again. And I will set the width
of this button. So first thing will be to set the width. And we'll use one column
for each one of the buttons. Very well. And now we will apply some CSS to these
buttons. Open the CSS editor and on the issue stat which is the webblock,
I will paste some CSS that I have on the clipboard. This high priority and low
priority these are the classes that we are going to add to each one of these two
buttons. So let me go ahead and select the high, and I will add here the high
priority class. You see that the class turn the button text red.
It is a little bit smaller. And also on the low priority we set the class,
okay. Very well. Now what we need to do is to implement the logic for these two
buttons. And were going to do that using a screen action. It will be the set issue
priority. The screen action needs to receive an input parameter with the new
priority so the ID of the new priority that's going to be set for that record this
will need to be a priority identifier so let me select it here.
Okay? And basically the logic of the implementation of this action will be to set
this priority in the table records, and then update it in the database.
So let's go ahead and assign the priority value, we'll select the record here from
the list records, this one, and we will set here the value to be the new priority
ID, and now we will need to use the update here, the update issue,
to update this issue on the database. And select the record here,
again we'll get it from the table records, and it is this one.
Okay so we have the action implemented, we need to bind those two records to this,
those two buttons to this action. So let's select the first one the high priority
set the destination to be the set issue priority. We need to set the argument,
the parameter of this action. So here will be using the high priority value from the
static entity. And on this one, first we need to set the action and to set here the
argument we will use the low value from the static entity. Okay so we're pretty much
all done. Lets publish and see how this all works. Okay, so here we have our
application if we go here into the Unclassified you see the buttons to classify the
issues as high and low. If we go into the high priority of our low priority you
don't find the buttons so our conditions are correctly set. Let's set this first
one, #43, as a high priority. And you see that it disappears from the list.
Let's do the same for the 44. And it disappears again from the list and you see
here, and you see the count of issues on the menu is being updated.
Let's set the next two as low. And there you have it, and so the issues are being
removed from the table. Actually the whole page is being refreshed because,
also the menu is being refreshed. Let's see this in the debug so you can follow what
is happening. Let's add here a break point on the screen action.
And also a break point here on the preparation of the web lock,
and let's set the debugger. And let's go here and set this, number 47 as high
priority. Here we have it, the screen action is executed, okay?
Let me just step over this. It is good; we set the value we update the issue on a
database. Right? Let's continue. And afterwards the page here,
the whole page is being rendered and the issues webblock is also being rendered.
And the preparation is being executed. The query is being executed again.
The query is executed. And the webblock is rendered. Okay so if you go here,
everything is executed again, and that's why the whole page is updated in the
client. What we want to do now, is not to update the whole page,
it is to use those Ajax capabilities to only update what has changed on the page.
So let's go back to service studio, and to do this first thing we'll do is to
actually set here the method type for these two buttons. Again as we did for the
link we have here a method. And this is set to submit. And we want to change it to
Ajax submit, and the same thing for the low. Okay so we are saying this is a Ajax
submit so this is only going to refresh only a part of the screen.
We need to state here on the screen action we need to say which part of the screen
we're going to refresh. And the part of the screen that we're going to refresh is
the table records. So here it is, the issue table. But before we refresh the issue
table we need to refresh, you recall we have a query here? This query is bound to
the table record. So we need to refresh those results, we need to refresh the data
that was updated in the database. And to do that were going to use here,
the widget, the refresh query. The refresh query basically allows you to reuse a
query that you defined in this case here you defined on the preparation.
This one and this query is re-executed and the data that is returned from this query
is again bound to the table records. So when you refresh here,
you will be refreshing the table records with the new data. Let's see this in
action. Let's publish. Let me just remove here this break point,
we already know that the preparation is not executed. So let's publish and see our
application. Okay again we have here our dashboard. Let's go into the unclassified.
And now we want to, we want to know that we're refreshing the table.
So let's set this #48 as a low priority in this case. And we have here our break
point. So in this case let's continue the request. And you saw that only the table
got updated. So only this part of the screen got updated, and you see this because
also here on the menu you don't have the menu updated. We will deal with this in the
next lesson. For now lets focus on our task which is to refresh what changed on the
screen. And we can take this a step further, by refreshing only the row that we
updated. Let's go back to service studio. In fact what were doing is in that every
time we set one issue as high or low, this issue is removed from the table,
right? So this issue is no longer shown on the unclassified issues.
So we can use here, let me just remove this. So we can use another built in
function, which is the list remove, built-in action actually.
List removes, and this action basically removes from the record list,
a record that is on a specific position. So for the record list what we will select
is actually the table records, record list. So this one. And you see that when I
select this, this icon changed and it changed because this is an action that is
being executed in an Ajax submit request. And so this action here will actually
refresh the table on the client side. Okay? So this will refresh the table.
And what we want to do is set the position and the position will be the current row
number of our table records. Okay. So again, let's publish this,
here we have break point. So let's test this and see what happens in our
application. One other thing that you can do here is set the animation effect in
this action. So we can highlight, for instance that the row is removed.
And for now we will disable this break point to see this in the application.
Okay so here we go again, into the unclassified list and let's set number 49 as a
high priority. And you saw that only that row was refreshed and was removed from the
table records. And this is it.