In this lesson we're going
to show you another widget
from the Rich Widgets library
that will help you implement
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,
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
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
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
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
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,
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,
We have one other parameter that
we can fill in, which is the default sort,
If you recall,
we had an order by in our query,
which was by submit date,
and we're going to use that again
So this is a text field,
let me select here again this,
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
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
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.
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,
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
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
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.