So the OCD kicked in today and I spent more time than I should have to figure this out.
If you use option sets for any search filters (I personally like this method over a data type) and you are in the mood to do like the big boys do and use URL parameters for your search filtering needs, Bubble initially seems to come up short on this.
However, where there is a will there is usually a way in Bubble.
Firstly, I set up my data option sets like so:
The ‘filter’ attribute is basically a slug
In order to pass the option into a parameter, you would need the slug if it were to look correct (ie: lower case with - to connect words)
On the data type that you would be filtering for you need your option set to be a data field on the data type you are searching
Now on the search page itself you need to have your set up for selecting the filters (Option-Set)
The above screen shot is my own page selection…it is a RG with datasource being the option set…there is an icon for checkbox to make the selections.
The search page needs to have several custom states for this all to work perfectly…by perfectly I mean if a user creates a search and they want to share the URL and have that URL when opened set all the search filters
This can replace the ever present common practice of saving a search by having a data field that is a list that holds all the selected filters…which doesn’t really help if there are multiple filter types on a search page and you want only one data field for storing a search.
This method allows you to have a single text field that you use the “this URL” feature in a workflow to store the URL complete with all search filters as parameters.
BACK TO THE SETUP
On the search page you need several custom states
- A custom state that is a list of the Options selected for filtering
- State that is a list of texts that will represent the list of selected options as a text value
- State that is a list of texts that will represent all of the options available
- State that is a list of texts that will represent the options that are not selected (this is because of the limitation imposed by bubble by not providing a ‘is in’ feature for setting a list as they only provide the ‘is not in’ feature)
items per page is for my pagination and the side-menu-visible is for my responsive design and are not necessary for the functionality of this post.
Your workflows for selecting a filter option and adding it to the list of filters and to the URL parameter
Your workflows for selecting a filter option and removing it from the list of filters and from the URL parameter
This is pretty straightforward and simple enough while the user is on page and filtering the search page…the real issue I had was figuring out how to get it so a user could share the URL and allow another person who follows the URL have the search filters set on page load.
Here are the workflows for that
Be aware and keep in mind that in the below screen shot
the filter is the attribute filter on the option set and is not the same as the :filtered function
So with this set up you can successfully create a parameter that is a list. If you want to save that URL as mentioned above you’d need to figure the way you want to trigger the workflow pictured of saving ‘this url’