Bubble life hacks and tricks

[georgecollier]

Good morning everyone!

I’m curious if anyone has any little Bubble development life hacks they’ve come across. Please do share if you have any little tricks

I’ll start:

1. There is a length limit when creating a new reuseable element, but you can bypass this by creating it, then editing the reuseable element name from within the RE.
2. The app connector plugin allows you to automatically generate API calls to your backend to return data from the backend
3. You can allow whitelabelling without making all of your colours dynamic values by using CSS that will replace all instances of the primary colour (hat tip to @Thimo):

<style>

html {

--color_primary_default: #yourdynamiccolour !important;
--color_primary_default_rgb: #yourdynamiccolour !important;
}

</style>

4. yes/no field is yes is redunant - if we have a yes/no on the User, then Current User’s isActive = Current User’s isActive is yes
5. Group data variables are almost always more useful than custom states as they are dynamic AND can be set using Display data, just like set a custom state, except if you need to store lots of different data types on one single element (generally this would only occur in a repeating group)

[boston85719]

@georgecollier

There is a length limit when creating a new reuseable element, but you can bypass this by creating it, then editing the reuseable element name from within the RE.

length limit in the name when creating. Once you create change the name immediately prior to ever placing the reusable element on a page or other reusable element since once that reusable is placed onto a page or reusable element the updated name placed on the reusable element itself does not auto update all existing usage instances across the app.

@georgecollier

You can allow whitelabelling without making all of your colours dynamic values by using CSS that will replace all instances of the primary colour (hat tip to @Thimo):

I imagine this could be the case for all colors in the styles sheet. Do you know how to find the ID of each?

@georgecollier

(generally this would only occur in a repeating group)

When working with RG and the elements inside of the RG need some dynamic values, I put the groups into the RG itself (mostly have been in custom calendars). To make sure they do not interfere with the layout, I make the group container of inside rg cell align to parent, and ensure the groups are set to back.

1. Any and all group data variables (not in an RG) and plugin elements should be placed into a floating group and make that floating group set to float beneath the page. This keeps all values accessible while keeping them out of sight visually and out of way to not interfere with responsive design settings.
2. Still need to use an option set for color variables with an attribute for hex code as Bubble still has not provided an ability to access colors in style sheet via dynamic expression - needed when inline styling text elements where one portion may be a different color from the color set on the text element.
3. Put custom CSS for changing dropdowns or buttons onto settings of app instead of needing to add to each page if those elements custom CSS is used throughout the entire app
4. Use URL parameters instead of custom states for hiding/showing groups on a page as it provides for many more options in terms of features like sending an email with link to the exact view
5. When working with URL parameters and the get data from URL expression, choose the appropriate type for the parameter (ie: date, address, custom data type or option set), especially useful to reduce WU costs for finding the correct custom data entry if it is stored as unique id in the URL parameter
6. Put error messaging into the reusable header via workflow action unhandled error occurs so you only need one error messaging setup for the entire app

[georgecollier]

@boston85719

Put error messaging into the reusable header via workflow action unhandled error occurs so you only need one error messaging setup for the entire app

^^^

I remember putting it on every reuseable assuming it would track errors only for that reuseable, and getting like 50 email notifications for one error because all of them ran the unhandled error workflow that notified me about it!

@boston85719

all group data variables (not in an RG) and plugin elements should be placed into a floating group and make that floating group set to float beneath the page.

I normally do a popup but this can’t take plugin elements as it’s not visible on page load - does floating group resolve this?

[boston85719]

@georgecollier

floating group resolve this?

yes, except for some free plugins that may require the plugin element to be in the same group as the other elements it interacts with…so far I’ve only come across this with the reveal for inputs or character counts for inputs/multiline inputs from some zeroqode free plugins for those functions. The floating group is by default visible on page load, but float beneath elements, although not visible to user, is still visible on page load. One thing to note, any elements inside may still be seen if the page background is not set to color or something element to block, so when I use inputs there, I make sure all formatting is to basically be invisible.

[georgecollier]

Smart, I’d just never considered using a floating group below instead of a hidden popup above!

[dorilama]

@georgecollier

Group data variables are almost always more useful than custom states as they are dynamic AND can be set using Display data

if somebody is coming from a yes-code background with reactive frameworks I like to think about (repeating)groups as computed values, while states are reference values.
Just remember that when you display daya imperatively you loose the reactivity of the previous expressions.
Bubble should really think about letting us mark a group to avoid rendering any element in the page, so we can have reactive variables without the ugly clutter in the html structure.

@boston85719

Do you know how to find the ID of each

css variables are inherited by child components, so if you open the browser dev tools and inspect any element in the preview page you should be able to see the inherited variables in the style panel.
The only problem is that bubble can change the variable name without notice.

[lindsay_knowcode]

Don’t try to be clever and use lots of abbreviated names.

In trad code - you do it to save typing. In Bubble it’s probably pointless because of visual editing.

You can probably guess I am sorting out an app where the previous developer has lots of names like

surveyTS
surveyJP
surveyPT

As far as I am managing to work out, I think they are references to the Parent, the Current and god knows what the other one is. (I think it might be Previous)

And if you really still think abbreviations are a good idea - please use the comments to provide a key for whatever the abbreviated names actually refer to. Please.

So enough whinging - I suggest using the comments to help the next guy make sense of your half-baked Bubble efforts.

[ankur1]

@georgecollier

Group data variables are almost always more useful than custom states as they are dynamic AND can be set using Display data, just like set a custom state, except if you need to store lots of different data types on one single element (generally this would only occur in a repeating group)

I’ve read it in multiple places, but I still can’t figure out the case where using a ‘group by’ variable has real benefits. Or is it just a preference?

[bonjour_17]

He’s talking about the data which is hold by a Group object.

[Zeroic]

@boston85719

I imagine this could be the case for all colors in the styles sheet. Do you know how to find the ID of each?

I get this from the Styles tab in the Inspect element window

[animisha45]

@boston85719

Any and all group data variables (not in an RG) and plugin elements should be placed into a floating group and make that floating group set to float beneath the page.

I usually use a popup for this. Does a floating group provide any advantages over popup for the same purpose?

[adamhholmes]

A Popup is NOT visible (until/unless it’s shown by an action).

Therefore anything inside a Popup is also not visible.

That can have an effect on whether or not data is loaded, and when (and how much of it) it gets loaded (which is neither better or worse, it’s just something to be aware of, although can have some benefits).

It also means popups generally can’t be used to hold plugin elements - as plugin elements MUST be visible in order for them to work.

Whereas a floating group can be ‘hidden’ behind the page, but is still visible - so anything inside them is also ‘visible’.

[animisha45]

Got it.

[boston85719]

@animisha45

I usually use a popup for this. Does a floating group provide any advantages over popup for the same purpose?

@georgecollier

I normally do a popup but this can’t take plugin elements as it’s not visible on page load - does floating group resolve this?

@boston85719

yes, except for some free plugins that may require the plugin element to be in the same group as the other elements it interacts with…so far I’ve only come across this with the reveal for inputs or character counts for inputs/multiline inputs from some zeroqode free plugins for those functions. The floating group is by default visible on page load, but float beneath elements, although not visible to user, is still visible on page load. One thing to note, any elements inside may still be seen if the page background is not set to color or something element to block, so when I use inputs there, I make sure all formatting is to basically be invisible.

Mostly what has already been discussed in the thread

[davidb]

@boston85719

• Still need to use an option set for color variables with an attribute for hex code as Bubble still has not provided an ability to access colors in style sheet via dynamic expression - needed when inline styling text elements where one portion may be a different color from the color set on the text element.

I use an option set for all sorts of markup that I need to periodically include in different places in an app. For example:

• bbcode for colors and other inline text formatting like @boston85719 suggests
• bbcode for icons within text elements that contribute to visual consistency with icons used in icon and button elements
• bbcode for inline hyperlinks within text elements
• bbcode for image references in email body text
• HTML/CSS that I want on some but not all pages

[georgecollier]

@adamhholmes

A Popup is NOT visible (until/unless it’s shown by an action).

Therefore anything inside a Popup is also not visible.

That can have an effect on whether or not data is loaded, and when (and how much of it) it gets loaded (which is neither better or worse, it’s just something to be aware of, although can have some benefits).

Yep - data is loaded in popups even when not shown. Easy way to crash performance!

@davidb

HTML/CSS that I want on some but not all pages

I like this! I often custom style individual elements (sigh, Bubble please add a custom CSS field to element styles like every other app builder) - this is a great way to reuse

[adamhholmes]

@georgecollier

Yep - data is loaded in popups even when not shown. Easy way to crash performance!

Actually, it’s the opposite - data is NOT loaded in a popup when the popup is not visible.

Only if/when that popup is made visible OR a reference is made to the data elsewhere, will it be loaded to the page.

So, knowing that, you can use popups (or any other hidden container) to have some reasonable control over what data gets loaded, and when, in order to minimise page-load times, and only load certain data when it’s actually needed.

Whereas data IS loaded in a floating group behind the page (assuming the FG is visible) regardless of whether it’s referenced elsewhere or not. So all data (of visible Groups/RGs) will be loaded on page-load.

[boston85719]

@adamhholmes

Whereas data IS loaded in a floating group behind the page (assuming the FG is visible) regardless of whether it’s referenced elsewhere or not. So all data (of visible Groups/RGs) will be loaded on page-load.

I put data source as empty, then conditions to set the data source property to ensure loading only when necessary for elements in floating group.

[adamhholmes]

@boston85719

I put data source as empty, then conditions to set the data source property to ensure loading only when necessary for elements in floating group.

Yeah, that’s another good way to control if/when data gets loaded.

[georgecollier]

@adamhholmes

Actually, it’s the opposite - data is NOT loaded in a popup when the popup is not visible.

I’ve been adding conditions for nothing Just tested and yeah, popup data is not loaded unless it is referenced in a visible element. Thank you