Forum Academy Marketplace Showcase Pricing Features

Advanced Bubble users, what's a neat trick you recently discovered?

Hey Julian…

Thanks for creating such a cool post!

Here are a few thoughts from my side…

  1. Current Date/Time isn’t empty :formatted as text
    I use lots of States, but they can be quite limited in how you can make assignments to them, so I find myself constantly using the “Current Date/Time isn’t empty :formatted as text” trick mentioned earlier to make complex text assignments to them.

  2. Text Encoding
    After building a complex booking form, I’m becoming a big fan of what I loosely called “Text Encoding”, where you can pass a two dimensional array of information around as a list of text. So I define a one dimensional format for the encoded text, such as:
    value1¦value2¦value3¦value4
    Then having a list of these creates the the second dimension.
    To work with this requires some confidence with regex which took me a while to build up, but now I am flying and it enables information to be captured really rapidly in a form using States, and then processed into various data Things later on by an api running in the background if required.

  3. Reusable Element Trigger Pulsing
    So you have a reusable element (RE), and you want a workflow in that element to trigger an action on the page where the RE is used. For this I define a boolean state on the RE called “Trigger XYZ”, and I set it from No to Yes for just 500ms when the trigger is to occur. On the page where the RE is used, I have an event which triggers when the RE’s “Trigger XYZ” is yes. Works a treat and has enabled me to keep my design structure clean with REs at times when I thought that wasn’t going to be possible.

All the best,
Antony.

6 Likes

Love this tip!

1 Like

custom states of list of things that you set during page load don’t really work for large data sets…I have a list of 1700 items and it doesn’t ever work to get it to on page load set a custom state for the list…instead using a repeating group placed in a popup works fine

Interesting. A couple things though…

  • What happens (or doesn’t happen) when you attempt to load a large data set into a state? Is there an error, or does it silently fail with no items loaded at all? Or do less than 1700 items get loaded?

  • Do 1700 items actually need to be loaded, or might there be a way to further constrain the results?

  • Unless the”full list” option is used for the RG, Bubble is intelligently restricting the number of items retrieved, so all 1700 items are not actually being added to the RG at once without that option.

  1. Nothing seems to happen when you load the large data set on page load into a state. Of course I give up waiting after 30 seconds or so, so maybe if you allowed it to run for the 5 minutes before the app sees a runtime error it could load.

All I know is I tested with loading a full list of all the items in the D.B. that I need and it didn’t load. After that, I tested loading just 6 items and it worked fine.

So, my next test lead me to try the method I found suggested of using a R.G. in a popup.

  1. Yes, all 1700 items need to be loaded for this use case…but even if they weren’t needed it would still seem that the method of on page load adding a list of items to a custom state list is not as efficient as using the R.G in a popup.

  2. I am not sure about how intelligently it is loading the items retrieved, but on my repeating group set in a popup I have it set to ext vertical scroll, but my assumption is that it doesn’t matter which setting between vertical scroll, ext vertical scroll or full list, as my understanding is they all retrieve the full list of items searched but only display them “on demand” if you are using the vertical scroll; otherwise the way I’ve seen R.G. getting loaded when set to ext vertical scroll or full list, bubble will retrieve and display all items found at the same time.

Not to your questions but a side note on this method for searching.

  1. I am using this method as I have found it to be faster for loading large data sets.

  2. I am actually using two R.G. in the popup…this is for the purposes of a faster filtering of searches for the user. On my page I have extensive choices of filters. When using one R.G. in the popup and utilizing the “search for:filter” option on the single R.G. it would have to call the database each time the user set a new filter parameter and therefore slowing down the app.

An obvious solution would be to restrict the users ability to filter when they “set” filter parameters on a button press instead of when clicking the filter parameter through a checkbox or similar. What I did with the second R.G. in the popup was utilize it to have a datasource of the first R.G. (the one that was loaded on page load with all 1700 items) with the filter.

What I noticed on testing this method was that my filters ran almost instantaneously on the page. By the way, all the R.G. I have on my page are using the second R.G. in the popup as their datasource.

Another benefit of this, not only are my filters loading faster, but also I have the sort criteria listed on the R.G. on my page. So they have a datasource of the second R.G. in popup and then a sort parameter. This seems to display faster as well, and made it a bit easier to get the filters and sort parameters to work in tandem without a user needing to “set a search”.

I honestly don’t know if this is the best approach but this seems to be working more efficiently for me.

I also have a lot of R.G. on my page, around 14 of them, which I am utilizing for enabling users to toggle between a list and gallery view of the search results and have it fully responsive on all screen sizes. I am trying to find a way to get the responsiveness to work as I wanted with less R.G. on my page but have already spent a lot of time trying to with no luck.

1 Like

The docs describe the Full list RG option as…

So, Full list does does apparently differ from the other RG layout styles in terms of performance, although I have no idea how it compares to the custom state method. Personally, I’d be trying to keep server data transfer to a minimum to optimize the mobile experience.

Anyway, we’re getting a bit off topic for this thread, but as long as you have a workable solution that performs well on mobile, I guess that’s what matters. :slightly_smiling_face:

Actually none of the methods I tried performed well. It is just the R.G. in popup seems to perform the best…no matter what there is a considerable lag time when loading in bubble and I haven’t come across a lot of ways to improve that.

If you have some tips I’d be really appreciative of knowing how others are getting on with performance issues. I’ve read through some threads in the past but haven’t come across any tips on how to get things to load in the most efficient way possible.

Random question…are you in Jackson MS @jon2?

Very simple trick that I think has spread on the forum, but still worth a mention:

You can toggle a yes/no status by setting it up Data Type’s Yes/No is NO

If it’s no, the answer is yes, and if it’s yes, the answer is no, leading to a toggle of the value. Can save some time not having to set up double workflows with conditions.

(I tried to find out who gave me this tip initially, but couldn’t find it. For the record, someone deserves credit for this, and it’s not me :slight_smile: )

6 Likes

:+1: I found it particularly helpful when toggling the visibility of reusable elements (RE), since (unlike most other page elements) it can’t be done using conditionals (which I generally prefer). To do so, add an is_visible custom state to the RE. Then construct a single workflow as follows…

2 Likes

If I’m not mistaken, I think the first time it was really presented was in @keith’s Cool with Bool video. An excellent trick, though.

2 Likes

Not an advanced trick, but a very useful one. This is not mine, the helps was from @JohnMark

How to deal with password fields autofill with password suggestion :slight_smile:

In Bubble Settings > General, tick “reveal the ID”
and go to password field to give a name to your password field with “search” inside, like notASearchField for my case.

It works :slight_smile:

3 Likes

Another non-advanced but useful little trick that it took me three years to find:

When you want to create a An Input’s value has changed workflow, instead of adding an event and setting up the event in the workflow editor, simply right click the input element and pick Start/Edit workflow. We’re used to doing this on buttons, since it has a dedicated button in the element inspector. But it works just as well for inputs, and Bubble sets up the event for you automatically.

5 Likes

Little trick I learned somewhere in the forum…
Link elements are not available in the workflow editor.
However if you create any other element (a text for example) and create workflows with it, you can later convert it to a link (right click it, convert to other element) and the workflow will still be there.
Very usefull for keeping track of the number of clicks of a link.

5 Likes

Wow, I love everything about this thread. 2 favorites.

First: Scheduling recursive workflows (I posted about it). Watch out for their sharp edges, though.

Second: A guide to advanced use of reusables. I can’t thank you enough, @petter. It has changed my life. Makes everything soooo much easier to focus on.

2 Likes

Glad to hear that @rico.trevisan :slight_smile:

Advanced use of reusables was helpful. I also have one minor trick.

When you click on a group and change it’s height or width, hold down CTRL at the same time while changing the size, this will drag both ends of the group to resize.

Saves time when you group elements and want to add some padding.

2 Likes

Do when input is focused is not an option in the workflows tab. So you can either:

  1. copy-paste the condition from the Design tab (thread) (hat tip to @boston85719)

or

  1. use a shape element as a hook: YouTube link - should go to the correct timestamp 13:04 (hat tip to @romanmg)

So many hacks here that feels like the design should take them in consideration

An empty value counts as less than zero! By that I mean that the following condition placed on an empty value will return yes:

(Value is empty)
Value ≤ 0 returns yes

This may have been obvious to everyone else, but I’ve been setting up a huge number of unnecessary is 0 or is empty conditions when all I need to do was replace is with :sweat_smile:

4 Likes