Advanced Filtering: Searchbox + Filters

[sylvainn]

Hi guys,

I have a RG with a list of invoices. And I would like my users be able to do 2 things:

• filter invoices by status: draft, pending, paid.
• searching invoices

I managed to do both but I don’t manage to combine them.

I tried to follow tutorials like the video below but I don’t have Dropdown inputs, what I have are Clickable Texts filtering the RG results.

If anyone can help me, I’d be grateful.

Thanks,

How To Create A Multi Layer Filter In Your App - Bubble.io Tutorial

[ed727]

Hi, there is a much simpler approach…

• Your RG data source should be “Search for Invoices” (or whatever you call the invoice datatype)
• That will open up the box where you can put in your constraints. You can put in multiple constraints which draw from input fields, dropdowns, etc. on the page.
• The RG will automatically update when users put in new search inputs
• This is all done “server side” which will be much more performant if your database gets big (though if for whatever reason you’d rather have the search done client side, like the list isn’t too long and you’d rather the user manipulate it within the browser rather than having to make repeated data calls, then execute the above via the “:filter” which can be added after the “Search for…”)

If you want to use clickable texts instead of a dropdown to select status…

• Create a custom state on an element (doesn’t matter what element)
• Have a constraint in the “Search for” box (described above) refer to the custom state’s value
• When a user clicks on the Status text, have it run a workflow to set the custom state to that selection
• Use a condition on the text to underline/de-underline based on the custom state

[cmarchan]

@sylvainn

Filtering Repeating Groups | Bubble.io Tutorial

[equibodyapp]

I’ve done this (minus the search for clients name but I just have to build this out).

Combination of custom state on the RG

Combined with conditionals on the RG

That change the constraints depending on the custom state

When I implement the search function I will use this plugin

(buildcamp have a great tutorial on youtube)

And add a new constraint for each of my conditionals for the contact type = search&automcomplete’s matches then tick the ‘ignore empty constraints’

The reason I do it this way is because my invoice contact is a user not just text so I have to set the fuzzy search to be search users not invoices. If your contact name field is a text field you can set it up the same way as the youtube tutorial based on custom states. You may have to have a few plugin elements on the page and the conditionals will tell it which element to match based on the custom state.

I use fizzy search as much faster than regular search constraints on an RG.

[sylvainn]

Thank you very much for your help!

Actually, using Fuzzy Search didn’t work for me as the input fuzzy field type is Text type and what I search is Customer list type.

I managed to do it with Searchbox input instead as you can put Dynamic data. And I followed the tutorial below for the filters. (This guy is great by the way! )

Now I can combine the Searchbox and filters!

Custom States | Bubble.io Tutorial

[equibodyapp]

@sylvainn

Actually, using Fuzzy Search didn’t work for me as the input fuzzy field type is Text type and what I search is Customer list type.

Yeah it does work - that’s why in my original post I wrote a note about how to do it if you have a datatype instead of text you want to search.

Set the fuzzy to search for customer list type not invoice - the name/s field should be text in that type. Then you add it as an additional constraint in your ‘do a search for’ rather than the data source being the fuzzy like in the tutorial.

Much faster than just using search box.

[sylvainn]

It was quite difficult to understand it for me.

So much settings you can struggle with. But thanks to you, I managed it!

It works perfectly.

I owe you a coffee!

[equibodyapp]

Glad it helped