More UI Patterns with OutSystems Widgets
Sort Columns in a List
This lesson is part of the Developer Online Class for OutSystems 9 course.
LEARN MORE

Transcript
In this lesson we're going to show you another widget
from the Rich Widgets library that will help you implement
a sortable table record.
Where we're going to do this, is on this webblock.
So on our table of issues, this is where we're going to implement
our certain capabilities.
We will need to add here, a widget, so I will use the search function here
in the in service studio, to find the sort widget.
The widget that we want to use is this one, so it's this interface widget
we have here that lists our column.
As you can see here, you can find it under the rich widgets
so this widget here belongs to the rich widgets.
This is going to be a little bit tricky sometimes, so I will go over the steps
to implement this real slow so that you can get all this.
You can also pause the video and try to do it on your own
and come back to see the end result.
So, what we're going to do, is to put this widget
in each one of the columns that we want to sort by.
So let's drop it here on the first one for now,
on the 'issue column'.
As you can see here, we have an input parameter
to fill in, which is the column, will go over it...
and we have a handler, an onnotify handler to fill in,
as we saw in the previous lessons.
So, somewhere inside this webblock the notify widget is used
so that the parent, in this case this issues webblock
knows that it needs to do something, and in this case it will need to refresh
the table records.
So, first thing we'll fill in, is the column...and the column here,
we're going to use this is one of the part that it's a little bit awkward to use.
We're going to use here, a syntax, to identify the table
and the column that we want to sort by.
The syntax is actually the same that you use in an advance query.
So, we'll need to use curly brackets to identify to define the entity,
so in this case it will be the issue entity,
and then we'll use square brackets to either defy the attribute.
In this case, in this column, we want to sort by the first thing
that is shown here on the column, so this will be the ID.
So, we want to sort by the ID or the number of the issue.
So this is the syntax you need to pay attention to,
to put both of the open and closed curly brackets,
and open and closed square brackets.
Then, when something happens, we need to implement the handler
for that notification.
What actually this webblock does is that it creates a link
over this label that we have here, creates a link over the text that is on this column
and when you click on this link, that's when you're going to sort
your table records.
So that's when you're going to have the notification.
So, let's implement this connection and instead of having the default
onnotify name, let's say that this is the onOrderBy.
Then when we implement this, we'll need to do something here,
but first of all, I want to do one other thing, which is, on my query,
I need to prepare my query to receive a parameter for the order by.
Again, to do this, we'll need a parameter. So let's add here a query parameter,
which will be the order by, and let's replace here this issue submit date,
let's remove this one and let's add the order by.
So, this is the way to put some dynamic sorting in our simple query.
So we are adding a parameter that will have a value for which the query
will be sorted, and now we need to fill in this parameter.
To fill in this parameter, we will need to know which of the columns was clicked
by the user.
To know which of the columns was clicked, we are going to use,
let's go back here to our search... if you recall when we did
the search for sort, we also had a couple of actions here
on the logic, we had a couple of actions.
So we have here the lists our column get order by.
This is the action, it actually is also a function,
that will return the column that the user clicked on.
So, let's use this one, so list, we have the auto complete
lists or column get order by, this one.
Now, let me just expand here this editor a little bit to see the help,
we need to pass the widget ID of the table record.
The widget ID, if we go here to our table records,
this widget ID is given by a property that we have on the table records,
which is the ID.
We have one other parameter that we can fill in, which is the default sort,
or the default order.
If you recall, we had an order by in our query,
which was by submit date, and we're going to use that again
as our default sort.
So this is a text field, let me select here again this,
synchronize here, so this is a text attribute there,
so let me add the double quotes here, and now again I will use the same syntax
that we used on the column.
So, curly brackets, to define the entity, and then square brackets
to define the attribute.
So this will be submit date.
Now, we have our query prepared to have a dynamic order by attribute,
and now we can implement our onOrderBy.
What we want to do here is again, to use the refresh query that we used
in the previous lessons
so we want to refresh our query, that we have in preparation,
that will have the same input parameters.
Look here, what we are using again the same function to get the column
that was clicked by the user.
So we will get our results sorted by that column, and then we need
to refresh the table records.
Here we go, refresh the table records and this is pretty much all done,
this is all that we need to do.
Let me just go ahead and add the same widget, sort widget,
add it to the other columns. So here, on the second column,
I want to sort by, so in this case, I want to sort by the contact name.
So, contact name.
As the destination for the onNotify, we'll use the same one on order by
that we just implemented. The last one is the reported on,
so let me just drop the widget here next to the text, and in this case,
we're going to order by the submit date.
So again, let's add curly-brackets, issue, then follow by the square-brackets,
submit date.
The destination will also be the on order by.
So, we're all done, so by which order will this sort?
I know that it sorts in this column, it sorts by the issue ID,
but does it sort ascendingly or descendingly?
Well, we will see that, let me just publish this,
and you will see how this works.
Okay, so let's go to our lists, on the unclassified, as you know,
we have three pages using the same webblock,
so we will have the sorting in all those three pages...
you see that now we have a link here, on the top of our table records,
and if I click the issue, my table is sorted by the issue ID
in ascending order.
If I click the issue again, you'll see that this changes the order,
now it's in descending order. So, that's the way to work with this widget,
and if I click here on the reported by, now we have the contact's name
in alphabetical order, and the report is on...
we have it sorted by the submit date, and that's it.