How to set Parameter as a List

[boston85719]

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

NOTE
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

1. A custom state that is a list of the Options selected for filtering
2. State that is a list of texts that will represent the list of selected options as a text value
3. State that is a list of texts that will represent all of the options available
4. 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’

[mghatiya]

Thanks @boston85719. Could you please also share what is the final outcome of url you are intending to achieve and what list would it have?

That objective would make it easier to follow what you have written.

Thanks,
Mukesh

[boston85719]

final outcome is a url that has a parameter that is a list

the list would be a list of filter options

[mghatiya]

So, like which of these following? Thing is I can interpret your sentence in different ways. That’s why asking for example.

domain/show-houses/2-bedroom/3-bedroom/4-bedroom

domain/show-houses/2-bedroom/1-bathroom/1-yard

domain/show-houses/filter-list-23423423423x23423423

[boston85719]

None of those are a parameter

This is an example if you follow the instructions and set things up properly in your data base with option sets etc.

https://application.bubbleapps.io/version-test/search?debug_mode=true&services=deep-clean%2C%20mopping%2C%20windows%2C%20vacuuming%2C%20dusting%2C%20polishing%2C%20bathroom%2C%20bedroom%2C%20laundry%2C%20cooking%2C%20dishes%2C%20pet-clean-up%2C%20trash

[mghatiya]

Ah okay, got it. Thanks.

Yes, it is a need I have felt in past.

[devin.fraze]

Amazing @boston85719, my OCD for this sort of thing kicked in out of nowhere literally 2 days ago at the exact same time. Must be something in the air. That being said, I developed a similar but different method I think might be easier for others to implement.

Step 1 - Filter by URL

On the repeating group with type “project”, I do a “search for projects” as the datasource, and I set the constraints as a filter of the option sets in the URL. My option set here is “Type” (ignore “Status” for now)

Step 2 - Create URL

To create the url I have checkboxes which trigger workflows that update the url.

• In my workflow I navigate to a “new” page (it’s the same page).
• In data to send, I return an empty search so as to avoid bringing up a specific project.
• I also send the current page parameters, so I don’t lose other param search values.
• Lastly, I create a string of words in my param “type” that I can search through for the filtering process in step 1.

Workflow for changing url

Step 3 - Dynamically set checkboxes from URL

And that’s it!
Just one workflow per checkbox, no custom states, and the url is sharable and will return the same search. Also, it will automatically sync with the search input forms when the page loads.

Considerations

So obviously my example options where all one word, using your method of slug creation makes sense. It might also be possible to do that by running a “:find&replace” on the option’s name where you simply find the spaces and replace them by “-”.

Additionally, there weren’t “+” between options in the url. For my needs, it doesn’t matter, but it would be easy enough to do during step 2 if I wanted to make the url look nicer.

[devin.fraze]

On a side note, the reason I am searching the forum in the first place is that I was hoping to do something like this with “Data Types” instead of “Option Sets”. The reason being I’d like my users to be able to generate a data type called “Tags” that they can then use to filter “projects” in the repeating group. I am not having success yet.

I can do it for one “tags” at a time, but I am having trouble filtering a list of “tags” from the URL and then filtering based on that list.

---

Update: I solved this adding “:filter” and doing an advanced search. Not ideal, but it works now.

[boston85719]

@devin.fraze

Additionally, there weren’t “+” between options in the url.

What does the URL look like?

[devin.fraze]

/projects?type=TraditionalContest

But it shouldn’t be too hard to make it:
/projects?type=Traditional+Contest

[devin.fraze]

I’m also just realizing that if I wanted to do a checkbox for every option in the option set and I had too many of them to do manually, I could just create a repeating group with a checkbox inside where the label of the checkbox is dynamically assigned.

Since I only have 3 options, I just manually did it for each.

[boston85719]

for URLs you should try to stick with lowercase and I do think you should attempt to make it more readable with a / or something like +

@devin.fraze

I’m also just realizing that if I wanted to do a checkbox for every option in the option set and I had too many of them to do manually

I’m not sure your method would be suitable for an option set that is larger because of the need for formatted as text and the append function. Although you could use dynamic data in the formatted as text, it will be really difficult to find an efficient way to append the choices made when allowing a user to make multiple choices from the same repeating group.

My option set has 16 choices and I use a repeating group and allow for multiple selections. The URL looks like

@boston85719

https://application.bubbleapps.io/version-test/search?debug_mode=true&services=deep-clean%2C%20mopping%2C%20windows%2C%20vacuuming%2C%20dusting%2C%20polishing%2C%20bathroom%2C%20bedroom%2C%20laundry%2C%20cooking%2C%20dishes%2C%20pet-clean-up%2C%20trash

which the %2C%20 seems to be some way the browser is coding a comma from a list of items…I’ve seen it on other sites as well and believe it is some native feature of browsers in recognition of a comma because I don’t need to do anything to extract it from the URL into a text element and display the same list with a comma separating the items of the list.

@devin.fraze

In data to send, I return an empty search so as to avoid bringing up a specific project

I am assuming this part is so that the data you send is empty…if so, why not just leave it empty and don’t do a search to return an empty value?

It would be cool to see if you can get this configured to work with a larger option set using a repeating group and get some kind of separator between the list items. Would be nice for me to avoid the custom states I needed for my method.

[devin.fraze]

@boston85719

for URLs you should try to stick with lowercase and I do think you should attempt to make it more readable with a / or something like +

I agree that visually it would look better the the user, but bubble doesn’t seem to care in how it parses the info.

I believe it would be possible to do dynamic formatted as text.

I have the %2C%20 text as well for my other not option list and while it doesn’t look good, it does seem to be a web standard.

@boston85719

I am assuming this part is so that the data you send is empty…if so, why not just leave it empty and don’t do a search to return an empty value?

I need to do this because bubble requires that you send some data when navigating to a page which has a datatype (aka for me it is projects). I suppose I could remove this from the page and do get the project ID some other way.

[boston85719]

@devin.fraze

I need to do this because bubble requires that you send some data when navigating to a page which has a datatype (aka for me it is projects). I suppose I could remove this from the page and do get the project ID some other way.

I forgot about that. I avoid that by creating a group that will be the parent of all elements on the page and set that group data type instead of the page.

[maja-overgaard]

Awesome tutorial - thanks for sharing.

When you retrieve the data from the url: what type is “services”? I am trying to retrieve a list of values from the URL, but when I set the type to the type of my option set (OptionFacilities) I do not receieve any values back.

[boston85719]

text type

[maja-overgaard]

Thanks for the quick reply. I’ve tested it by setting it to “text type” and indeed works. Would you have any idea why it is not working with type = an option set?

[boston85719]

because your parameter is not an option set, it is a text value…when sending the parameter to the URL it is sent as a text value

[maja-overgaard]

Yes true. But it is possible to “transform” the parameter to be of the the option type. So you can use it to e.g. filter search results from the database of the same type. In example below the type “optionListingType” is an Option set-

But it only works with one parameter value, not a list of them. I’ll try to figure it out maybe with using text and states instead as you do.

[welbygsa]

Hi all , same problem here , trying to retrieve a parameter and converting it back to list, so I can use a constraint “is in” or “contains” from a list.