Beginner’s guide to sorting in a Repeating Group
If you are using a Repeating Group in your Bubble application, you would have often wondered how you can sort the results displayed. Some common examples are sorting the results alphabetically, ascending-descending on their price, based on their creation date.
You should aim to do the sorting before loading the results in the Repeating Group. This will happen on the Server side which means that your results will load slighlty faster. Another option is to do it Client side, which is not recommended. Client side actions rely on the capability of your user’s device. And this will for obvious reasons, load the results slower.
Here we are only going to see how we can manipulate the data on Bubble’s servers itself.
Setting up the Repeating Group
We’ll begin by creating a simple Repeating Group where we load a list of Users with no constraints.
We then create a simple text field in the Repeating group to display the User’s firstName.
The result will be a list of names not sorted alphabetically.
Sorting alphabetically (A-Z)
If we want to sort the list alphabetically (A-Z) we need to define the sorting parameter. We do this in the same area where we define the constraints in “Do a Search for”.
We need to select the field on the basis we want to sort the list in the Sort by dropdown. In our case, it will be firstName. Now we need to define whether the list has to be sorted in a descending or ascending order. As we want to sort it A-Z, we want it in a ascending order therefore the Descending has to be no.
Sorting alphabetically (Z-A)
If on the other hand we want to sort the result in a descending order, the Descending option has to be set to yes.
Sorting by number (Low-High)
If you want to sort the results on the basis of a number, say Rank, the method is same. We just need to change the Sort by field.
The result will be a list of Users sorted according to their rank.
If you need some help with your Bubble app or if you need a team of Bubble developers to build a Bubble app for you, reach out to me at himanshu@nocodeassistant.com. You can also follow me on Twitter.
