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

[luke2]

Using the expression Current cell's index can be very handy at times on repeating groups. The problem is, when a group is then added into a cell of a repeating group, it appears the Current cell's indexexpression disappears from the list, not being available to select.

While this is true, its not available in the list, you can still copy the dynamic expression and paste in where needed e.g. content, conditions, workflows…

Here is a hacky workaround, that appears to be working fine as it stands of this post date:

Current cell's index doesn’t appear in the list - this text element is inside 2 parent groups

Here we copy the working expression of Current cell's index inside the root of the rg

Then, we can paste the expression into a element

Dynamically this expression appears fine and doesn’t flag as an app error

Can be used on a condition example

Result of the above rendered

Example of workflow use

[sudsy]

For example, if you have a list of 4 items in a RG and in a custom state from your DB and you delete one item:

the RG will show :count 3
the custom state will show :count 4 with an empty row

That’s interesting. That actually seems like a bug.

[julienallard1]

There is the same issue when you need to know the state of an element (visible/pressed/hovered…) within a workflow.

You can’t, say, animate an element only when another element is pressed directly. Instead you have to build the expression in the Condition tab of the property editor and copy/paste it into your workflow.

[luke2]

Yeah nice point about the states that are usually locked to the ‘Conditions’ tab on the elements.

Having built in access on the workflows for those mentioned, visible/pressed/hovered would make life alot easier and clearer. For instance ‘When this button is hovered, show this alert’. They seem pretty reliable when these dynamic expressions are copied in. It would seem possible through the platform these are accepted and working, so not sure why there is no direct integration? Hopefully in the works with the new UI/UX design

[julienallard1]

I raised a bug few weeks ago on that matter. I was told it was indeed a bug:

I can build working conditions with options that aren't shown?

Hi, I was not too sure wether to post this in the Tips or Bugs section. In a workflow, I needed a “Terminate this workflow” action to be ran only if a certain group was visible. I discovered that “is visible” and “isn’t visible” aren’t available in workflows. So I went in the property panel of a random element and built the needed expression (say “Group A is visible”) and copy-paste it in the “Terminate this workflow” action’s condition. To my surprise it worked, and Bubble does not raise thi…

[julienallard1]

I was about to post here, but finally decided to make a new thread.

I have developed a way to create buttons that require 2 clicks to launch an action. They are useful when a confirmation is needed but a popup is a little too much for the task.

They are pretty simple and straightforward.

Dead simple button with self confirmation

While building an app, two months ago, I encountered the situation where I wanted to make users to confirm when trying to delete a record. The first thing that comes to mind is a little yes/no popup with a message: “Are you sure?”. But the kind of data to delete was, to my opinion, not enough important to build a whole popup + workflows for that action. Plus, it forces the user to redirect his attention to the message and yes/no buttons. So instead I built a little button that ask for a second …

[antony]

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.

[cowontherun]

Love this tip!

[boston85719]

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

[sudsy]

custom states of list of things that you set during page load don’t really work for large data sets…

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.

[boston85719]

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.

2. 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.

3. 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.

[sudsy]

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

The docs describe the Full list RG option as…

– Full list: The element draws as many cells as there are items in the data source. This is not the best approach when the list is long, as it loads many items, including some that aren’t visible at first. This is not recommended for long lists.

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.

[boston85719]

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.

[josh10]

Random question…are you in Jackson MS @jon2?

[petter]

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 )

[sudsy]

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

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…

[eli]

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

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.

[charly]

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

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

[petter]

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.

[di_lucena]

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.