Dropdown list to show categories and subcategories

Hi Bubbler’s.
Recently joined this community and very happy to discover Bubble and Bubblers :).
Need some help in showing dropdown lists. I have categories and subcategories and would like to show them in one dropdown list, but somehow make difference among them…for example to show Vehicles (as categories) and below (in different colors or different font or with indent) cars, motorcycles, bikes…, and then Houses (as category) and apartments, flats…as subcategories…
i.e. to show list of names in the dropdown list like a tree structure with 2 levels…

I believe it can be done in bubble, but can not figure out how…
Thanks in advance…

Look for the plug-in Selectize. It’s excellent.

2 Likes

I’m pretty sure this can’t be done using a dropdown, but it can easily be done by using repeating groups. You’ll give up the convenience of the dropdown, but gain max flexibility. I actually use RGs for most of my dropdowns even if I don’t need fancy categorization just due to the flexibility you get. To use RGs:

  1. Add a button (or even better a text element if you want to include Font Awesome icons).
  2. Add an RG within a groupfocus and reference the element from 1. Make the RG 1 row and full list. This will be for your categories.
  3. Add a second RG within the first RG for your sub categories. Again, make it 1 row and full list.
  4. Add a workflow to your element in 1 to toggle the groupfocus. You can fancy with your FA icon that changes if the groupfocus is visible.

This is how my “dropdowns” look using this method:

2 Likes

@lindsay_knowcode were you referring perhaps to this great plugin by @Jici (Jean Claude … can your plugin enable this use case by @zhadz ?)

1 Like

Yeap that’s the one. It’s a fantastic plug-in. The demo page speaks for itself as to what you can achieve with it.

1 Like

thanks lindsay_knowcode…it sure looks like a great plugin…which of these many options would do my problem with subcategories, if you could help? The one with countries in the demo, its my guess?
thanks a lot again for pointing out this great plugin.

In order to get categories like this

You check a box on the Element properties like this:

It couldn’t be simpler ~ 2 seconds and you are done! You can get more sophisticated with custom HTML, and the examples in the sample app are easy to copy and adapt. I do both.

However, the reason this plugin is a million % useful is that it gracefully deals with dropdowns of 100s and 1000s of items, while the built-in Dropdown element is terrible with 1000s of items as it takes ~10+ seconds to run that query and deliver the content to the browser. To be fair, the retrieval time is the same with both, it is just the user experience of a spinner and being searchable.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.