Help with Search Bar and Filtering in My First App


Hello,

I’m new here and just started building my first app. I’ve made some progress – for example, I’ve created groups where clicking on an item opens a popup, and that part works fine.

However, I’m currently stuck with the search bar and filtering.

I tried using a dynamic approach, uploading all the data, but filtering doesn’t work as expected. Then I switched to a static setup (manually listing all the options), but even then, I couldn’t get it to filter properly – for example, showing only the matching item or bringing it to the top.

I’ve also experimented with conditionals to show/hide results depending on the input, but nothing seems to work.

I’ve attached a screenshot in case someone has dealt with a similar issue. Any help or suggestions would be greatly appreciated!

Thanks in advance,

:clap: Awesome! That was my first big win too! First getting the ability to pass data around is a huge motivation boost.

Basically, for me, the hardest thing to really grasp early on, was how the dynamic expressions allow me to understand a bit more about the data that it currently has, as well as how that relates to the element data source type (ie: what type of data is this element supposed to have). Getting that first popup to show the data felt amazing and that was the first time it started to make sense of how to set the data type and data source.

These are two different things. I am personally not sure what it is that you are expecting to be able to do and with what elements are you expecting to be able to do them, as well as what type of data you are using (custom data types or option sets).

From the screen shot and information in the post, I imagine that you have a repeating group that has in the screen shot visible R1 R2 and at least one other under it, and that the group from which you are now able to click to show data in the popup are the groups that contain the text elements and buttons.

So, above there is an input element and a button of search, that presumably is the way in which a user will type some value into the input element and press the search button and the repeating group below will show the appropriate search results. What is not known is what value is the filter supposed to be constraining the search results by and what is expected to be the sort of values that it can be matched against based on what the user types into the input element.

In Bubble, when we are searching and filtering a custom data type we created in our database, we are able to constrain the search (ie: set values to match against in order to filter the results) using the values of the items data fields (if there is a field called name and it is of type text, that is a data field that can be used to match against) comparatively against another value (which can be static or dynamic).

Below is an example data structure for company with different fields of different data types.

And inside of the database I have these entries

With this setup I can put together my search and filters if I supply data values of the same types of data to compare them against. So if I want to compare against the name, which is type text, I need to supply a text value to compare it against, which can come from the value in an input element. In this example I can also compare against the number of employees if I supply a number value to compare it against.

When you first setup the search you will see something like below. In order to add the constraints (ie: filters) to the search, you must press the +add a new constraint. Personally, I always check ignore empty constraints and hardly use sort by, but you can sort by most text and number fields.

Once you have that setup you need to ensure you have already in place a source for the values to compare against, which can be static or dynamic. In the example, I added onto the page a custom state of similar name and same data types as the data fields on my Company data type. These are my sources of values to use in constraints for comparison. You can setup like this for most use cases and it is fine, and in fact, the easiest way to learn how to setup a search and filter. If using the custom states, you just need elements on the page for the user to interact with to set those custom state values, and have the workflow actions to set state when the input elements values change.

Below is how I setup the constraints (filters) to compare against what are the dynamic values of the custom states as well as using an input element on the page to filter by the name, so that whatever values the user is typing into the input element will be used to filter the name values from my database entries.

Once you get the hang of ensuring anytime you want to pass data around for any reason, like showing popups, running workflow actions etc. you have to ensure you have a data source that is of the correct type of data. For me, that was the hardest thing to put together early on.

Thank you so so much.

I really appreciate the help.

Thank you!

1 Like