Building a Bubble.is Search filter

Over the past few months, I have started using Bubble.is. It is a great and very flexible platform, that enables very easily to build back-office systems for a startup, in a very short time, and low to no cost. It can also be used for fast building of apps and systems mock-ups, with full working functionality.

I use it heavily, combined with Zapier & Integromat, and I have reached a high level of automation of our internal processes, in a very short time.

However, there are always the annoying stuff.

In Bubble, one of the first things I encountered was the inability to perform a full fledged search. If you have a screen where you’re listing all your customers, you’d like a quick way to search them and filter in only those matching certain criteria.

You’d expect Bubble’s “contains” operation will actually do what you expect it to do. You’d expect that if you search for a customer named Steve, it will be enough to type “St” in the search box, and then only customers whose names start with “St” will *miraculously* appear in your search results.

Unfortunately, that is not the case. With Bubble’s “contains” keyword, it will only match whole words. You’ll actually need to type in “Steve” to get all the Steves in your system. But what if your customer’s name is William? Did he register as William or maybe as Will? You’ll need to do both searches to find that out.

So, after banging my head around the issue for some time, I was finally able to find a simple (even if somewhat tedious) method that will solve many of these problems. It’s not a complete google-like search, in which you’ll get William in the results even if you types in “illi”, but it is able to search for entries that start or end with my search term. Typing in “Will”, will return all Wills and Williams as well.

The trick relies on 2 text-operations: “:truncated” and “:number of characters”, which I recently discovered.

Let’s say I have a customer Data type, I have a page which lists them, and I want to search there for specific customers.

I’ll have 3 fields in my customer Data type: First Name, Last Name, Customer ID.

Here’s how my Page will look like (I am using a Repeating Group to display the entries):

Customers page

Let’s start at searching only for the first name. Withe Bubble’s straightforward solution, I’ll need to type in “Robin” to get Robin Williams filtered in. I’d like to be able to type “Ro” in the search box, and get this:

How do I do that?

First, I need to use an Advanced filter.

In that filter, I am shortening (:truncated) the customer’s first name to the length of my search string (:number of characters), and then using Bubble’s contains operation on 2 words with the same length, which is what “contains” is limited to do in the first place.

Well, I was on a roll, so why stop there?

I don’t want to need to capitalize every word (needing to know whether it’s a name or not). I want to be able to just type everything in lowercase, like this:

For this to work, I just need to add an additional simple string manipulation operation “:lowercase” which takes a string, and converts it to lowercase, combined with “:truncated”.

Note that I’ve not added a new constraint, because an additional constraint means that they will all need to be met for a result to appear on the results list. So I expanded my initial constraint with the keyword “or” which means that it is enough if one of the constraints to be met, and the match will appear in the results. I didn’t replace my previous constraint, I just expanded it, because if I will type a name with a capital letter (old habits die hard), I still want to get the result. Optimally, I would have converted both the search term and the First name to lowercase, and compared them, but Bubble doesn’t support it (as far as I could find).

Note that the “Ignore empty constraints” option is checked. This is mainly in case that I do compound some other constraints, and I don’t want a constraint that doesn’t filter anything, to be applied. This is useful if you apply several different constraints on different fields, and you actually want to apply only the constraints you’re putting information into (I might go into that in a separate post).

Now, of course, I want my search to be applied to the customers’ last names, as well. Like this:

If I type “b” I want it applied both to the first name and last name fields.

So, I apply the same logic to the last name. Once again, I shorten (:truncated) the length of my target field (Last Name), to the current length of my search term (:number of characters), and compare that (contains) with my search term. I do it both for the Last Name field as it is, and for the Last Name field converted to lower-case letters (:lowercase).

Note again that I have not added a new constraint, but expanded on the previous one, with the keyword “or”.

Finally, I want to search on the customer ID as well.

Since (as you can see), my customer IDs all start similarly, I want to be able to both search the beginning of the customer ID and its end. It will be much faster for me to just type the last 3 or 4 numerals than typing the whole number:

How do I do this?

By applying another operation on the customer ID field. This operation is “:truncate from end”. This operation shortens the Field to the length of my search string, but it does it from the end of the customer ID and not from the beginning. Since in this case I am using numbers, I am not applying the :lowercase operation, as it is irrelevant here.

And this is how my full filter looks like:

If you’ve found this article useful, please show your appreciation by clapping it.