Time Saving Hacks

Tips
1

I thought I’d share a few time saving things I’ve added to several apps recently.

Reuseable repeating group pager
For a long time I thought this was impossible since the repeating group events (next/previous page) only work on the page that the repeating group is on. However I’ve worked around that limitation using a reuseable component and states.

  1. Create a reuseable with the previous/next page count etc.
  2. Pass in the total items count, current page number and items per page (I put these as properties)
  3. Do the math to determine the pages in the reuseable - total items/items per page :ceiling
  4. Hide pager if page count is 1 or 0
  5. add state on reuseable “selected page”
  6. on previous button set state to current page minus 1, on next set it to plus 1
  7. use a scheduled custom event to reset the state after 1 second (must be scheduled to break the chain else the state isn’t read on the parent page)
  8. on the page use a when element state is not empty, then go to page in repeating group using the pagers selected page

Reuseable tabs
I used to think that I couldn’t have a reuseable tab because I needed to tab option sets and then use the selected option in a search for data. However I got around this with.

  1. Create reuseable with properties tabs (text list) and state “selected” (single text)
  2. on tab click set state selected to current tabs text
  3. place the reuseable on the page, pass in the option sets displays (comma separated) or use arbitary text / split by comma to pass the tabs list into the reuseable
  4. reference the tabs selected state - for tabs that are option sets you just need to convert the text back to the option by “get all options” filtered to options display = selected text :first item

Alternatively to states I add a boolean on the tabs reuseable to pass the tab into the url as “tab” param then reference that on the page. Use the “go to page” action and select “current page” and then pass in the tab param.

Search database with popups
I have been using popups to search a list of things and then link them to another thing. The problem with how I was doing it is that I was using states to hold the thing I wanted to add the list to on the popup - so my popups had lots of states for the datas they were changing and lots of workflows… really messy. Here’s the better way:

  1. create the popup with the list of things to select from
  2. use state on the reuseable to pass in the current list of things
  3. reference the current list of things in the searched list to show what has already been selected (if item is in current list = selected)
  4. allow user to add and remove items BUT don’t save them to a data just yet. instead hold them in the state “current list”
  5. use event “when pop closes” to set a state “selected” (boolean) to yes
  6. on the page of the thing you want to change the list on, add workflow for when the state on the reuseable is yes - then copy the current list and write it to the thing

Now the popup can be used anywhere with any data and no additional states or data needs to be added to the popup.

Initializing reuseables with custom event
Here’s what I WAS doing - click button, create thing, show thing in popup, set states, show popup etc - on each button click when I wanted to show a popup. Here’s the better way:

  1. add custom event to popup “initialize”
  2. set properties to receive the data (if needed)
  3. then do all the initialize steps in the popups custom event
  4. now on button click all you need to do is call the initalize event within the reuseable and you can forget about show/pass data etc.

Nesting plugins and non-stylable elements
A lot of custom plugins don’t integrate well with the bubble style editor. Previously I’d have to style them whenever I used them - think progress bars, audio players, videos etc.

The better way is to put them in 1 reuseable and then style them there and then use the reuseable INSTEAD of the element itself.

I use this method for a lot of things - custom buttons (tabs with selected/normal states - use a boolean on the reuseable), buttons with counters (pass the numbers into the reuseable), custom dropdowns, custom filters, icons with selected/not selected states, flags with colors (option set on reuseable).

Custom events for math and workflows
I used to only use custom events for breaking up complex workflows into smaller chunks - that’s good but it’s not the only way to use them. Now I use them much more regularly to do really small repeatable functions…

Simple math - yes there are math plugins but I don’t want to remember the formula, I just want to pass in a few values and return the result (and forget about parenthesis and operators).

  • add multiple numbers together (great for working with search of things sum + search of things sum etc (since each number is a field it’s super easy to update a search without having to redo the whole equation!)
  • round to nearest 15 minutes, change minutes to hours etc. It’s very handy to have these go to custom events ready to plug into workflows.

Creating or find data - create if doesn’t exist, return existing (or newly created). These are super helpful 2 step custom events that I slot in to workflows all the time. Really useful for backend workflows with lots of similar steps. Also works well for popups that need to create or update on save.

Routers/forced orders - I use recursive API workflows to iterate through lists or counts (iterate X times) and then return to a router custom event to process the next step. Often I have a few custom events here to make this work - 1 event to go to the next steps number, and another to start the step (the router). These are great for complex calculation flows where things have to happen in specific order.

Custom logging - lets face it the bubble logs/reports are really terrible. I never use them. Instead I create my own logs and log only when I need to debug something. I have a logger custom event that I trigger at whatever steps I want to check - I just pass in the data from the steps and a log record is created. There’s another workflow that auto deletes these after 24 hrs. Now I can log exactly what I want and see everything super clearly and with no delays.

What do you do?
What do you do to build quickly and efficiently in bubble? I’d love to hear your solutions :slight_smile:

6 Likes
2

Dude these are some stellar tricks!

I pretty much do all of these too in my own way.

Returning data from Custom Events is one of my favorites. Especially for math, or order dependent actions.

I also love custom events for daisy chain filtering and sorting of repeating groups.

2 Likes
3

These are great tips. Thanks for sharing.

I should try out the reusable tabs and paginations.

After custom events started returning values I have been using custom events to store variables needed in backend workflows. I also use them to store conditionals e.g. I have a conditional custom event where I pass two values and a condition. When condition is true one value is returned, and another when condition is false.

Also, I have custom events that take a few conditions and do an OR or AND of those and return the result.

But some of these hacks cause extra WUs I think. Not sure if there are ways to avoid that.

Could you elaborate on this one? You use it in test or live? In frontend or backend? And how do you achieve creating logs only when you need?

4

I add the custom event after/before each step in the workflows during debugging. I then copy the expressions into the logger which creates a record with text data when the workflow runs. (I have it in a custom event so they get created in a consistent way so my other auto delete logic works).

It’s a great way to get visibility on workflows as I can break down the steps as much as I need to figure out why I get the result I get.

Usually I start with 1 log for each custom workflow so I can see if a workflow isn’t running - then I’ll narrow down and add more logs until I find the root issue. It’s also a great way to check for looping and things happening out of order.

I generally only use it on test side debugging but occasionally I add it to live side - although for live side I normally have a change history data type that I log into for various datas.

For data that is shared across many parts of the app (ie files, change history etc) I don’t use data fields to link the data, instead I use a generic text field and map the datas ID into it. This way you don’t end up with 50 fields on something like “files” or “videos” when they have to be linked to 50 different datas.

For instance:
File data structure:
name, file url, size, type, for_id (text to hold the unique id of the thing it links to)

Then I just use the search for:
search for files where for_id = this things unique ID.

1 Like
5

Thanks for clarifying.