Forum Academy Marketplace Showcase Pricing Features

How to set Parameter as a List

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

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

Ah okay, got it. Thanks.

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

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)

image

image

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

image
image

Step 3 - Dynamically set checkboxes from URL

image

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.

3 Likes

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.

What does the URL look like?

/projects?type=TraditionalContest

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

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.

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’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

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.

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.

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.

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.

1 Like

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.

image

text type

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?

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

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-

image

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.

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.

Did you try to follow the steps in this thread?

Thank you immensely! That ‘is not in’ threw me for a loop.

Update to this Tip

If you are using an approach to displaying your results that incorporates a reusable element, you would not be able to use this method…and in fact this method may be able to be adjusted using the following approach and avoids the multiple custom states for ‘is in’ vs ‘is not in’

You can do this without using any custom states

Essentially the extract with regex pattern takes the parameter and turns it into a text list so that the contains and doesn’t contain functions associated with lists will work.

Here is how to add it as a filter

Screen Shot 2020-12-10 at 2.57.50 PM Screen Shot 2020-12-10 at 2.57.42 PM

I actually ended up needing to filter some results and it works very well…I have a data type of Meetings with a related Data type of ‘Event-Types’

I set up a double filter to get to filter my results using the reusable element

The second portion of this ‘double filter’ is shown just above: the first portion is below

All of this would mean the use of multiple custom states as explained in the first post is probably unnecessary overall and you could just use this strategy of the extract with regex pattern.

2 Likes