Collection sorting

With dynamic collection sorting, web visitors can sort through content according to specific parameters, like name, ID, date updated, date created, and much more!

Note: To demonstrate this feature, we'll use the car database that we've created in the previous step. Please open the dynamic filter and search documentation before and follow the steps before continuing with this one tutorial.

Dynamic collection sorting in Ycode

Have you set up the car database that we've created in the previous step? Great!

As a first step, we'll add an input element to a form. Select your form element, and then in the top panel, click on the Form icon and choose Select.

You can now drag the element to where you want it to be and style it with the settings on the right. We'll explain all the design settings here.

Now we'll select the table that's used for the content filters. For us, it's the list of cars, so we'll select the layer that's named "Cars".

With the element selected, open the settings on the right-hand side, and under Get data from, you'll see a new setting named Sort by.

Here you can choose a specific field to apply the sorting to. For our example, we'll choose Input value—it's also the option you're most likely to use in other situations.

Once selected, you can choose the field that's used to sort through the content. Keep your mouse clicked on Input value and drag it to any field to connect them both. We're dragging it to the Select field.

Now under Sort by, you'll see a new option: Order. This allows you to choose the order in which the content is sorted. The options are:

  • Input value

  • Ascending

  • Descending

We're choosing ascending.

Click the Select input field layer in the Layers sidebar and open the settings on the right-hand side. Under Get options for, open the Options dropdown and select Sort by.

This will display new settings, one of which is Columns. Here you can choose the different fields you want to sort the content by. We'll leave all fields selected for this example.

Let's preview the app and see the work we've done! As you can see, web visitors can now easily sort through data collections on your website.