Hi everyone! I’ve been keeping a list of things that I think would really speed up my Bubble workflow. I know that some of these have already been suggested by multiple Bubblers before, but I wanted to make this list that included those ideas as well, just in case they’ve gotten lost in the forum. If anyone would like to make suggestions to these, please feel free to reply below!
@allenyang First of all, Welcome! I saw your other thread and thought of including these ideas in there, but they aren’t related to third-party services. Absolutely no pressure to read through these of course if you’re focusing only on third-party services right now. Thank you so much!
Bubble Editor Ideas
-
The ability to filter elements when selecting the value of a number field (this is currently only possible with all fields except for number fields). This isn’t usually an issue with simple pages, but it can be very difficult to find the number input that you need when the page has hundreds of elements.
This was implemented by the Bubble team on 12/02/19!! -
The ability to change a “Make Changes to a Thing” action into a “Create a New Thing” action. This would save a lot of time since both are usually using the same inputs to modify the same fields. This was implemented by the Bubble team!
-
The ability to ungroup a single element from a group. Right now, the only workaround is to add a second, ‘dummy’ element, select that element and the single element that you’d like to ungroup, ungroup them, and then delete the ‘dummy’ element. In the example below, the option to “ungroup” doesn’t appear until two elements are selected. This was implemented by the Bubble team!
-
The ability to re-order fields by drag and drop; this would help keep things organized when there are many fields being modified:
-
A one-click “Add All” button that prepopulates all of a Thing’s fields in the “Make Changes to a Thing” and “Create a New Thing” actions (so we don’t have to individually select all of the fields). If an action already has “fields to modify” selected, then clicking the “Add All” button would add the rest of the data type’s fields that haven’t been selected by the developer yet.
This was implemented by the Bubble team on their Pebble Day! -
A one-click “Suggest values” button that sets the value of each of those fields to be the inputs on the page that utilize those field values as the elements’ default values. For inputs that don’t have a dynamic default value, the inputs’ placeholder texts would be used to suggest the values for the modified fields.
For example, clicking the “Suggest all values”:
Would set the field’s values based on either the input’s name or the default value that the input utilizes, or the placeholder text of the input
-
The ability to change a field name or a constraint field without deleting it first and then creating it. This was implemented by the Bubble team!!
-
The ability to select elements that are in different groups and modify them at once (e.g., applying a style to multiple buttons that are in different groups). Right now, when selecting buttons (or other types of elements) that are in different groups, all of the buttons’ container groups become selected as well, which doesn’t allow you to modify all of the buttons’ styles at once. This was implemented by the Bubble team!
-
The ability to select multiple elements in the left-side panel by clicking “shift” and then being able to copy only those specific, selected elements:
-
The ability to “copy without data” and “paste without data” (i.e., only copy or paste the UI without data or workflows). This would save time if this action also automatically reset all of the just-pasted element names.
-
“Smart” element names - I’m not sure if this is possible, but all of my element names are usually in the format of “[Element Type] [Field it modifies] [(Thing being modified]”, so an example would be “Input First name (User)”. Often times those inputs have a default value, such as “Parent group User’s First name”, or a placeholder that is the same as the field’s name. It would speed things up if I could click a button for input elements that have a default value or placeholder value to rename them in that format:
For example, clicking this button:
Would automatically change the input name to:
-
The ability to view a single Thing’s data in the responsive editor (i.e., if the page has a type of content, we could enter a unique ID for that type in the responsive editor. This would then display that Thing’s data, instead of all of the long dynamic data expressions. This would save a lot of time from having to jump back and forth between the responsive editor and preview mode).
-
Suggested by @tim12333: “A :formatted as function for geographic locations and allow us to define what gets extracted similar to the date :formatted as. For example you would be able to get street address, street, city, state by typing in sa, s, c, st under custom formatting for a geographic location. Right now you have to copy and paste the dynamic data in a text box for each individual field you want to extract.”
-
Suggested by @tim12333: “Allow us to see responsive settings inside the UI builder tab. Sometimes I know what responsive settings I need without having to see a preview, and it takes time to navigate to where I was inside the responsive tab just to change a few settings.”
-
Suggested by @louisadekoya: “Some sort of smart select tool that would allow us to select all children of a parent for example, or all siblings, or all elements of the same type etc.”
-
Suggested by @louisadekoya: “The ability to swap the positions of two selected elements.” This was added by the Bubble team on their Pebble Day! (Note: To use this feature, click on two elements and then click “Arrange → Swap element positions”)
-
Suggested by @louisadekoya: “A way to set a group’s type and in one click, have the type and value cascade (as parent group’s thing) down to all/selected sub groups within it.”
-
Suggested by @louisadekoya: “A sweeper tool to sweep all elements up or down from a certain point, like this https://youtu.be/xWurQ7-KTFU?t=40 or just the ability to move all selected elements up or down by a specified value in any direction.”
-
Suggested by @eli and @yusaney1 :
A. “Preferred currency settings per app so we don’t have to set the currency format manually every time we need to use the :format as currency.”
B. The option to enter a custom currency symbol in the Currency dropdown
C. The option to choose whether the currency symbol will be at the beginning or end of the string
A. After selecting “Currency” from the dropdown, the “use app-level currency settings” box would be checked by default (if the app-level currency settings were not empty), and the currency formatting dropdowns’ default values would be populated with the app’s currency formatting settings. Unchecking the “use app-level currency settings checkbox” would allow the developer to change the values of the currency formatting dropdowns -
Suggested by @edd: The ability to highlight and copy part of a long, dynamic expression, and paste it somewhere else in your app.
“Use case: Suppose you’ve been using the above expression but no longer care about the Current User’s favorite color. You either need to rewrite the expression from scratch with only the last three clauses, or convert the first one into something sure to pass the condition like Current User’s email is not “fake@fake.com” (or equivalent nonsense).” -
Suggested by @robert: The ability to edit a part of a long expression without having to rebuild from scratch.
This was implemented by the Bubble team on their Pebble Day! -
Suggested by @luke2: Real-time pixel distances displayed when moving element & using ‘Show distance on hover
In the GIF below, the distances between the selected element and the other elements only displayed on hover, but it would be helpful to have the option to see those distances as the element is being moved
-
Suggested by @luke2 and @robbertmastebroek : Allow conditional properties on a repeating group to change its “layout style”, “Rows”, “Columns”, “Separator”, “Width”, and “Color”:
-
Suggested by @robbertmastebroek: “The ability to pin elements to corners more easily, with controls similar to Sketch. Some of this is definitely possible in Bubble, but its a bit finicky to get it working right.”
(video credit: Sketch) -
Suggested by @robbertmastebroek: “The above resizing options available in Sketch also allow to create (Reusable) Elements with dynamic widths, enabling elements (like buttons, tags) to have dynamic widths, or even align vertically. This really is a must-have in UI design, especially in more complicated app/software UI we often design in Bubble.”
(video credit: Nando Rossi) -
Suggested by @edd: “The ability to copy workflow actions from a page/reusable event and paste to an API workflow event, and vice versa (more the former) A lot of times I’ll start by building a workflow on page, but then I’ll see an opportunity to optimize by using an API workflow, but as far as I know I cannot copy/paste an action from a page/reusable to an API workflow, thus requiring me to rebuild the flow in the other place. I realize that not all actions are compatible between the two, but many are! (e.g., Make changes to thing, send email).”
This was implemented by the Bubble Team on their Pebble day!! -
Suggested by @edd and @gf_wolfer: (UX Change) A larger input box to enter deployment notes:
-
Suggested by @ryan16: “It would be really useful during development if when you select ‘disable workflow’ if a big X was drawn over the workflow trigger. Then you could see at a glance it was not enabled instead of having to click into it. Just making it a different color isn’t nearly as helpful to keeping your flow.” This was implemented by the Bubble team on 11/15/19!
-
Suggested by @robert: A “lightweight” mode for the editor, or the option to run the app in “lightweight” mode to conserve RAM. “I’m running with 16GB of RAM, but it’s not enough. Frequent reloads of the page, and generally slow performance on pages with lots of elements.”
-
Suggested by @yusaney1: In the App Text’s “Text ID” dropdown, when you type a new app text title, and then click to “Define another App Text”, the just-typed text should be the default value of the New Application Text’s Text ID input so the user doesn’t have to re-type it. (This is currently what happens when you create a new “Field” or “Thing” in the editor, but it doesn’t happen when creating new app texts).
The default value of the “Text ID” input is empty when it should be the value that was just typed
-
Suggested by @yusaney1 and @robert: It would be helpful to have all “Create a new…” options in editor dropdowns (e.g., Create a new field, and Create a new App Text) as the first options in their dropdowns, instead of the last option of the dropdown (to save time from having to scroll to the bottom each time).
The “Create a new field…” option moved to the top of the dropdown
The “Define another text…” option moved to the top of the dropdown
-
Suggested by @boston85719: An “overflow: auto” checkbox that allows you to add a scrollbar when needed to text elements and group elements (especially group focus elements). This option would allow users to easily create custom search boxes without needing to add custom code.
-
Suggested by @ryan16: Adjust the editor’s page organized so that pages are ordered alphabetically in the first column and then across, instead of what it currently is, across then down.
-
Suggested by @JohnMark: The ability to define a secondary and tertiary language in the editor’s Languages section, and the ability to edit the app text values for all three languages in a single view (as shown below)
-
Suggested by @petter: The ability to add multi-level path options to a Go to Page action. Currently, we have to use a link and reload the page to maintain the page’s parameters. Adding a multi-level path to the Go To Page action would solve this. “Using plugins is an option, but Bubble doesn’t recognize that the path has changed in those cases, so you can’t use it for SEO purposes such as Meta Title/Description”.
-
Suggested by @petter: A “maintain parameters” checkbox within the Go to Page action. The Go To Page action resets all parameters unless you specify that they should change. A Maintain parameters checkbox that simply kept all parameters in the URL at their current value would be handy. This was implemented by the Bubble team!!
-
Suggested by @petter: A “pause” icon on all breakpoint workflows in development mode. This would make it easier to find workflows with breakpoints:
a. -
Suggested by @ryan16: The ability to select two elements and enter a number to alter vertical and horizontal distances between them. For example, if two elements are 40 pixels apart, the user could select both elements, and quickly enter “20” in order to make sure the elements are only separated by 20 pixels. You can currently subtract this amount by adjusting the X or Y coordinates of an element, but the ability to enter the distance in pixels would speed things up.
-
Suggested by @gf_wolfer and @w.fly: Adjust the UI for long conditionals and “only when” statements so that they are vertically stacked on top of each other, instead of a long paragraph. This would allow you to simply read the conditions, re-order the statements by drag and drop, and copy and paste single statements (the entire paragraph can only be copied at the moment), and very clearly switch and/or statements with a dropdown.
-
Suggested by @ryan16 and @ben7: The ability to move and reposition elements by drag and drop through the element sidebar, similar to how it’s done in design software like Adobe and Sketch:
-
A :possessive option for text expressions. Often times, I’ll need to include something along the lines of “[Current User’s Full Name]'s Orders”.
Right now, in order to have the correct grammar, I need to use the expression “Current User’s Full Name truncated from end to 1 is “s”:formatted as text” →
If true, the value should be Current User’s Full Name’ Orders
If false, the value should be Current User’s Full Name’s Orders -
Suggested by @petter: The ability to lock an element inside of a group. Sometimes when you drag an element, it is virtually impossible to not “lose it” outside of the group it belongs to, especially if it’s big. An option that keeps the element inside the group it belongs to would be handy.
-
Suggested by @klaas.vanhoeck1: An easier option to filter by a certain day. Currently, you need to use the expression “[Date value] change minutes to 0, change hours to 0, change seconds to 0” (shown in the screenshot below)
It would be much easier to have a statement such as: Date field is in [Date value] (or Date field is [Date value]'s Day) -
Suggested by @melon: A color or copy change to the “ON” and “OFF” buttons for conditionals in the editor to add more meaning (e.g., Disable/Enable or Preview/Hide Preview)
-
Suggested by @melon: Adjust plugin filters so that one-time payment plugins aren’t shown when the “Free” filter is selected:
-
Suggested by @melon: The option to disable a plugin instead of uninstalling and removing all plugin elements from an app:
-
Suggested by @petter: The option to deactivate the performance warning from the debugger, and to move this to the Capacity tab instead:
-
Suggested by @petter: A :negate operator for numbers that would turn a value negative (e.g., turning 5 into -5). The +hours, +seconds etc. for date fields is very cumbersome to use if you want to subtract something, and instead of adding a minus operator to all of those fields, a negate value operator could let us subtract hours etc. without going through custom fields.
A +minutes operator would also be helpful. -
Suggested by @zelus_pudding: Ability to set the height of a group/repeating group to be equal to the height of the viewport. Here is a similar example of this design in Evernote:
-
Suggested by @petter: The option to quickly identify elements that are overlapping by showing their borders in red when a button is held down (or a setting is activated). “On big SPA’s, two out of 100 groups overlapping by a single pixel can wreak havoc. Would be a timesaver to be able to spot them quickly”.
-
Suggested by @klaas.vanhoeck1: The ability to edit the responsive settings (e.g., fixed-width, minimum width) of multiple elements at once. This option would save time when trying to make an entire page responsive.
-
Suggested by @petter: Make “clear all” reset to empty field instead of …edit me…:
-
Suggested by @luke2: The ability to add editor comments for individual conditionals to help keep things organized.
-
Suggested by @aloecf : Bubble based editor zoom hotkeys with a scroller (similar to Figma). This approach would be easier than using the zoom percentage input.
-
Suggested by @w.fly : The ability to “show” elements that are hidden on page load, in the editor by default. One way to do this would be to add an “Outline hidden elements” option (similar to the “Show element borders” option but for hidden elements). "We all know that hiding an element then showing when you need to is a great performance gain for your Bubble app - But it makes things clunky when you’re using the editor. Each time you load a page to edit that has hidden elements on page load, the element is invisible - Leading to large blank spaces on your editor page - Requiring you to manually un-hide each time. For SPA apps, it’s a killer if you have 25 hidden groups on a page. This is how hidden elements are currently displayed in the editor on load:
AFTER (put an overlay on top of hidden elements, so when you open up a new page, you can SEE what all hidden elements you have without having to click into each one):
The option in the editor could look like this:
(Notes: This would not apply to popups/floating groups. The recommendation is to start with groups/repeating groups first. And, clicking on the eye icon at the top left of the outline would unhide it so you can rapidly edit right there. -
Suggested by @julienallard1: Similar to 56., add an option to use the “last visibility state” in the editor so when the editor page refreshes, we would find the displaying elements in the same state as they were before.
-
Suggested by @yusaney1: The option to duplicate a single data entry in the App Data tab.
-
Suggested by @aloecf: The ability to set up grids, gutters, and margins. “Right now Margins are not able to be set so the left one is always 12px. Can we implement something to change the default margin for that left column?”:
-
Suggested by @duke.severn: The option to use “:defaulting to” for any type of empty values (the current option is text-only).
-
Suggested by @julian_digitalsilva: The ability to group workflows by workflow folder when viewing all workflows.
-
Suggested by @gsantoro: The ability to choose the position of a popup element.
-
Suggested by @duke.severn: Suggested by duke.severn Preload the :formatted as currency initial content values with the most recently used values:
-
Suggested by @paul.dalpozzo: Have the undo button display a short history of past edits (similar to Adobe or Microsoft Office products). It would also be a nice feature have the option to select multiple items in the history to remove.
-
Suggested by @paul.dalpozzo: A “workflow tree” view so you can trace precedents and dependents (like in Excel) so you can quickly see a map of how workflows work together in complex combinations - like for instance a page workflow that schedules a backend workflow that then calls another backend workflow recursively, or allows easily viewing a user flow through workflows and pages.
-
Suggested by @paul.dalpozzo: Functionality to auto-create inputs or outputs on a page from a thing’s fields. The flow would be something like: “Click to add a thing to this page” → select inputs or output types (similar to the API “initialize calls” popup window layout) → click ok → the editor creates all the selected elements on the page already connected to the thing in the DB.
-
Suggested by @paul.dalpozzo: Ability to add “columns” to a text element that will automatically reflow content in 2 or more columns.
-
Have the group element’s “Collapse this element’s height when hidden” setting checked by default since this is usually checked.
-
Add the ability to set a standard group element to become a floating group through a conditional. For example, in most messaging apps, there in group on the page which contains a multiline input for the user to write a new message. At mobile page widths, this group needs to float to the bottom of the user’s phone for a better UX. If we could set a group to float through a conditional/property change that would save time and eliminate the need to create different UIs for desktop and mobile.
-
The option to temporarily turn off the “please refresh this page” option in development mode, and allow each Bubble developer to test just the page that they’re working on (e…g, ?refreshoff=true). When two collaborators are working on different pages in the same development version, this would allow each collaborator to preview their page’s changes without needing to reload the page each second, due to the other developer’s changes.
-
The ability to move two elements that are within different groups at the same time.
-
The ability to import/export a single page (with all of its elements, workflows, and data types). This would save a lot of time from having to fix many errors when copying and pasting with workflows.
-
The ability to auto-generate a single-page for mobile apps, after selecting multiple pages. Each page would be copied into the new single-page with all of its workflows, stacked vertically. There may be a few errors to fix but this would save time from having to manually copy each page and its workflows into the single page.
-
Suggested by @klaas.vanhoeck1: Every time you select a certain input in the workflow ‘make changes to a thing’ or ‘create a thing’, you have to click 2 times. Once for selecting the input (i.e.
input Name
) and the second time "'s value
". Instead, the editor could always take "‘s value
’ as the standard, because 99% of the time this is the case. -
Suggested by @majorfmo and @mtastwo: A dark mode for the Bubble editor to reduce eye strain and eye damage. Also, the light gray on a darker gray on the floating menu(s), in the editor, is very tough on the eyes. An “almost white” text wold be far better here.
-
Suggested by @christo1: The ability to number workflows so they are easier to find.
-
Suggested by @christo1: The ability to select a group of actions to copy/cut and paste elsewhere in that order.
-
Suggested by @gsantoro: Add a workflow action called “Refresh repeating group”. Sometimes the automatic refresh of RG takes a few seconds to happen (may impact on user experience) or it doesn’t happen at all. There are solutions like setting custom states and/or other solutions, but it’s not that simple to make it work perfectly.
-
Suggested by @gsantoro: The ability to select and drag more than one element at once.
-
Suggested by @gsantoro: Show a spatial reference (at least in one of the elements, like the one at the top), just as it happens when you drag a single element.
Dragging two elements:
-
Suggested by @mghatiya - The ability to set the minimum width of an element in terms of pixels instead of percentages.
-
Suggested by @yusaney1 - The ability to view the page’s state, in order to determine when the page is loading/creating data. Exactly when the top loading bar appears, we should be able to access this “state” of the page (example screenshot below). This would be very useful to determine when we want to let the user know that the page is loading, so we can show a loading image or just an informative text. Currently, you have to implement a workaround or install a paid plugin to achieve this.
-
Suggested by @yusaney1: When creating conditionals that involve a search, it would be helpful to have an option to reference that search by using “Parent condition search”, instead of having to copy and paste the expression:
-
Suggested by @alix75: It would be helpful to have a PDF viewer (that isn’t an iframe) to allow applications that can utilize in-app signature functionality.
-
Suggested by @melon: Remove the “user entered email” from the notification message during a wrong email entry
-
Suggested by @joeyg: Move a custom state from one element to another and maintain all existing references to that state. “Oftentimes I create a custom state on an element, build some functionality around it, and then want to move it to another element (reasons: because I’m trying something new, simply for organizational reasons, or I’d just rather have it somewhere else.). Takes so much time to create the new custom state and then redo all the workflows, I usually just don’t do it.”
-
Suggested by @kevin.hunt: Make the custom states window wider by default and make it expandable.