URL Parameters as List with Listed related Items

[boston85719]

In the past I put up a post about how to send a list into a URL parameter and extract that list.

How to set Parameter as a List

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 [Screen Shot 2020-12-10 at 3.12.07 PM] Essentially the extract with regex pattern takes the parameter and turns it into a text list so that the cont…

Recently, I decided in an attempt to bypass the database for some WU savings on some tasks, like shopping cart, as well as to provide some nice features in the app as well, to revisit this.

Firstly, the regex pattern to extract the list of items in the URL parameter is [^,\s][^,]*[^,\s]* this will allow you to extract a list of texts, which can be used as constraints for all sorts of other data types or option set filtering to get the right set of values.

In order to send in more values to the list or remove values from the list you can use the below type of navigation go to page workflow action. Use plus item to add and minus item to remove. In the below screen shot the extract with regex uses the above regex pattern.

So, I wanted to take this further as I needed to create not just a list of items in the URL parameter, I also needed to attach a list of things to each item…think of it kind of like JSON in the URL but not really as there are no key value pairs and you will just need to remember the position of each item.

For example, I have a type of food as a menu item that can be customized and a list of customization choices. The order will have multiple food items selected, so need the first concept of a list in URL parameter as described above. But, I need to ‘attach’ the customization choices to each menu item independently, so think that a particular dish will have customizations of large and no veggies and extra spicy, while another menu item in the order will have customizations of small and extra veggies and no spicy.

To extract these values as well I used this regex pattern [^|\s][^|]*[^|\s]*…each item of customizations are separated by |

So I can use a double regex extraction in the dynamic expression to extract from the URL like below

The first extract with regex is the first pattern in this post and the second is the second pattern in this post.

Below is screen shot of a nested repeating group

So, with this, I’ve taken a 12 step form with around 30 values required, 4 sets of lists and 4 sets of lists within lists…never touched the database and provided payment without user signed in and only storing the necessary values in database after payment is successful.

I don’t want to pay for WUs that do not equate to money for the app.

[chris.williamson1996]

Creative and efficient setup, I love always seeing you push outside of bubbles boundaries, thanks for sharing🙌

[boston85719]

@chris.williamson1996

I love always seeing you push outside of bubbles boundaries

Thank you Chris. I never want to feel like ‘Bubble beat me’, so often need to find some creative ways to get around what may be limitations. I’m actually really excited about this new setup as the form flow is super snappy. I added in some nice CSS goodies as well to get it to avoid the dreaded page reload when users on mobile scroll up and have the view look like a native app (apart from the browser url bar at bottom on mobile).

[msgiblin]

I’m intrigued! Now once you have your list, how are you comparing it to your search items for filtering?

[boston85719]

When I first put together the method of putting together a URL parameter with a list, I had to jump through numerous hoops because somebody at Bubble loves the negatives, and so we only had the ‘is not in’ operator, and the logical complement to that of ‘is in’ was not available. This approach led me to request as many others had for them to put the ‘is in’ operator into the system.

Now that has been done, the filtering becomes much more simple.

Firstly, when I use this, it is with a setup where the existing choices are already on the page…this can be done many ways, but a repeating group with a list of things is one way, which I make use of as I have a need to show the user on the page the selections in other steps as a ‘summary’ of the completed form/booking.

So, using the get data from URL with the extract regex pattern, you have a list of things, which in most of my cases are the unique IDs of custom data types or the display values of option sets. Then when you setup a regular search, you can use the same type of approach, where the constraint would be, unique id is in ‘get data from URL extract with regex’ or get on option: all options filtered ‘this option display is in get data from URL extract with regex’

Super simple now we have the ‘is in’ operator.

Can do that with advanced filters as well to check against intersects with if comparing a list field from db entry against the list from the URL parameter.

[msgiblin]

@boston85719

Can do that with advanced filters as well to check against intersects with if comparing a list field from db entry against the list from the URL parameter.

Thanks for the full writeup! Honestly I’m glad you mentioned the advanced filters as well because I had wondered if you’d find a way around them with your text lists.

[boston85719]

@msgiblin

I had wondered if you’d find a way around them

There is no real way around them if you have a field that is a list of things that needs to be compared against another list of things to find partial matches such as when the field list contains 5 or more of the items in the other list to compare against.

[msgiblin]

Yeah that’s exactly where I’m at and what I’m using - it’s surprisingly powerful. I had been hesitant to use Filtered:Advanced due to some words of caution in this forum, but when the data is at the level of the thing being filtered, and other results constrained properly up to that point…it’s surprisingly light on WU compared to what I was preparing for. I know when used with the wrong data structure, especially nested searches, it can get gnarly.