Now that we’ve built the structure of the page, that lists the articles we’re now going to look at the sort buttons.

The sort buttons can be found on the UI objects panel, here in the data area. We can use them whenever we want and can add them to a page.

So to define these sort buttons all you have to do is select the button, come here to the data panel and here in the sort button section you’ll need to select a target. 

We want to order this flex item called e-grid. 

So once we’ve selected the target for this sort, we have to define what the sorting criteria will be. So the criteria we’re going to select for this example is date. The attribute that will be used is this field from the collection here.

Now we need to define what the sort direction is going to be, we want to sort from the most recent to the oldest so we’re going to leave this as it is. 

For this button we’re going to do exactly the same thing, we’re going to come here again to the data panel and we’re going to select the flex layout and then we’re going to select the attribute by which we sort, in this case the date. And now we’re going to select the sort direction, which will be ascending. So now we want to sort by oldest to newest.

And that’s how easy it is to define your sort buttons, let’s enter preview mode and make sure this works. We’re going to have a small problem, since these first three items here don’t have a date we’re only going to be able to see the sort function working for these two entries here. So let’s focus on these, let’s sort, ok as we can see its sorting from most recent to oldest. And now let’s select the opposite. 

Ok, and that’s how easy it is to define your sort buttons.