I’ll assume you have mastered the art of basic sorting in your Bubble app. Your users can click a button to sort a list by name or by price. What’s the next step?

Often, users want more control. When they sort by price, they might want to see the most expensive items or the cheapest items. Making them use two separate buttons for "Price High-Low" and "Price Low-High" is clumsy. A much more elegant and professional solution is a two-way toggle: a single button that flips the sort direction with each click.

In this advanced tutorial, I’ll build on our previous example and show you how to upgrade your "Sort by Price" button into a powerful ascending/descending toggle using a second custom state.

Prerequisites

This tutorial directly builds on my first guide, "Repeating group sorting in Bubble." Before you begin, you should already have:

1. A repeating group of Products.
2. A custom state on your page named sort_by (type: text).
3. Buttons and workflows that set the sort_by state to "name" or "price".

Step 1: Creating the "direction" custom state

To remember the sort direction (ascending or descending), we need a piece of "memory" on our page. A custom state is perfect for this.

1. Just as before, click on your main page element to open the Element Inspector.

2. Click the small "i" icon to open the Element States dialog.

3. Click "Add a new custom state".

4. Configure this second state to track direction:

   • State name: sort_desc (short for "sort descending").
   • State type: yes / no (This is a boolean type, perfect for an on/off or true/false scenario).
   • Default value: no (We'll use 'no' to mean ascending/A-Z and 'yes' to mean descending/Z-A).

5. Click Create.

   

Step 2: Button workflows

Now we'll update our workflows.

A. The "Sort by Price" Toggle Logic

Modify the workflow for your "Sort by Price" button. It will now need two actions.

1. Go to the workflow for the "Sort by Price" button. The first action should still be Set state for sort_by to price. This ensures we're always sorting by price when this button is clicked.

2. Click to add a new action. This will be our toggle magic.

   • Action: Element Actions -> Set state.
   • Element: Choose your page (products_page).
   • Custom state: Select sort_desc.
   • Value: This is the crucial part. Click "Insert dynamic data" and enter the expression: products_page's sort_desc is "no"

How does this work? This expression is a question that Bubble evaluates to either yes or no.

• If sort_desc is currently "no", the expression is "no" is true, so Bubble sets the state's new value to yes.
• If sort_desc is currently "yes", the expression is "no" is false, so Bubble sets the state's new value to no.

It’s a perfect, one-line toggle.

B. Resetting the sort direction

There's a potential UX issue. What if a user sorts by price (descending), and then clicks "Sort by Name"? They would expect the list to sort A-Z, not Z-A. We need to ensure the "Sort by Name" button resets the direction.

1. Go to the workflow for the "Sort by Name" button.

2. You should already have an action that sets sort_by to name.

3. Add a second action to this workflow:

   • Action: Set state
   • Element: products_page
   • Custom state: sort_desc
   • Value: no

This ensures that whenever the user sorts by name, the direction is always reset to its default (ascending A-Z).

Step 3: Connecting the toggle to the Repeating Group

The final step is to tell our repeating group to use the new sort_desc state to determine its sort direction.

1. Select your Repeating Group and go to the Conditional tab.
2. Find the condition: When products_page's sort_by is price.
3. Click on the Data source for that condition to edit it.
4. Inside the Do a search for Product settings, find the sort field for Price.
5. The Descending property is currently set to a static "yes". We need to make this dynamic. Click on "yes" to bring up the property editor, and clear the static value.
6. The text will now say "Click to add dynamic data". Click it.
7. Choose products_page's sort_desc.

Now, when Bubble evaluates this data source, it will dynamically set the descending property to whatever value our sort_desc custom state holds (yes or no).

To give your users a visual cue, you can use conditionals on an icon next to your button. Show a "down arrow" icon when products_page's sort_desc is "yes" and an "up arrow" icon when it's "no.

The result

Preview your page.

• Click "Sort by Price". The list sorts from highest price to lowest, because sort_desc was flipped from no to yes.
• Click "Sort by Price" again. The list instantly flips, now showing the lowest price to the highest, because sort_desc was toggled back to no.
• Click "Sort by Name". The list sorts A-Z, and the direction state is reset for the next time you sort by price.

You’ve successfully transformed a simple sort button into a powerful, professional two-way toggle.

By understanding how to combine multiple custom states, you can build incredibly complex and intuitive user interfaces in Bubble, all without a single line of code.

ABOUT ME

I'm Juliet Edjere, a no-code professional focused on automation, product development, and building scalable solutions with no coding knowledge.

I document all aspects of MVP validation, including how designs, data, and market trends intersect.

Click. Build. Launch.

Visit my website → built with Carrd and designed in Figma