Taking advantage of the fact that you @kate.mcnally is focused on modernizing the editor interface and still “improving” things like the elements tree and other UI stuffs and probably will improve other sections too, I would like to list here some of the things that I, as Bubble Developer, who uses the editor daily, believe which would greatly improve the experience of creating with Bubble, reduce the use of custom code for some things (custom CSS to change some elements properties), make some things more dynamic and even easier to identify. I think all these little things, if looked at separately are things that could be considered insignificant, but when fixed/improved, will make the development a little better/faster in many aspects.
FYI I like how things have improved in the editor, slowly, but it has improved, but to advance some points so that your team can included in your scope and avoid things that would be listed in future community feedback, taking more time to be implemented, I leave below is a list of possible improvements that I believe will make difference to the community.
Design tab - Elements Tree
I know that the element tree has become wider in the new version, but would be interesting to have a way to identify elements that have:
1 - Custom States Indicator - Currently we need to click on the element to check the Custom States or search action on the Workflow tab that “set” something to find Custom States. Yeah, the most part of us use some main element to store this Custom States, bus in some cases we decide to create Custom Stated tied to some specific elements to let us now copy this element later with workflows and avoid that lot of issues to appear on the issue checker because we lost the Custom State reference.
2 - Notes Indicator - The same context applies to Notes that we need to click on the element to check the notes or try to find in the notes search (that is not a really search feature) or we need to use other ways like emojis in the element itself or in the notes itself to make this easy to find.
Design tab - Input Elements
Well, there are actually some improvements that could be made to all inputs, but I’ll leave the rest of them to list in a future post. For now, I would love for the ones listed below to be improved.
1 - Date/Time Picker - We should have the option to select a list of dates or range of dates. Yeah, I know we have plugins for this, but wouldn’t it be interesting to have this native to Bubble after so many years?
2 - Multiselect Dropdown - This is a plugin maintained by Bubble itself that should have already been included as a native part of the editor. But ok, it’s a functional plugin. However, even though it is maintained by bubble, this plugin does not have the option to disable the input “
This input should not be empty”, which leads us to two problems that need to be solved alternatively.The first one is the most obvious, we cannot have this control of the mandatory field in the input itself and we need to work with it in other ways, checking if the input value (which is a list) is not empty.
The other problem caused by this is that by not having this native option and needing conditionals, as this is a mandatory field on a form and is linked to the action of a trigger (a button for example), if the button is clicked the state invalid input will not be automatically set and again we need to deal with this in other ways. This isn’t the end of the world, but it could be improved.
3 - RadioButtons - We currently have an invalid value condition “
This RadioButtons isn't valid” which can be set with a specific style. But even if this input is marked as mandatory, if it is linked to an action that creates something and that needs a Boolean value, if we try to create it without a value in the input (neither yes nor no) the action will not be triggered, as the input needs a value, but the invalid value state will not be recognized and the style will not be applied. Again, just like Multiselect Dropdown, we need to use alternative ways.
Design tab - Property Editor
We know that although Bubble is a NO CODE platform (LOW CODE in some cases) it is based on HIGH CODE (traditional code) and therefore depends on things that exist in the traditional code world first so that it can come to exist in the low/no code world.
However, if we think about CSS properties, there are still several properties that, even though they have existed for a long time in traditional code, have not yet been implemented here. Many of them would help a lot to avoid a using plugins and custom code that we eventually need to use as worktrought for certain situations. Below are some examples that could be implemented.
1 - New Dynamic Units - Currently we only have an absolute measurement (pixels: px) and a relative measurement based on the size of the parent element (percentage: %). But we could have other measures supported by most browsers that would would be very useful, based on the font size (em, rem) and based on the user viewport (vh, vw).
2 - Ability to set Dynamic Dimensions (suggested by @daviddr17) - Implementing the ability to set dynamic dimensions on elements would make possible a lot of controls, conditionals and relative associations that would be welcome in many use cases. An example would be using these relative dimensions to define the dynamic width of a Group Focus based on the width of its reference element. Currently we need to define a fixed width for the Group Focus or use custom code to create this dynamic effect.
Workflow Tab
I don’t know what the plans are for the workflows tab, but we’ve already had some suggestions for flows based on other tools like Webflow and FlutterFlow (images below).
I personally think these tool flows are beautiful, but on the other hand they take up a lot of visual space. If you want to get a general idea of all workflows events, it’s kind of difficult. I wouldn’t say Bubble’s current layout is all bad, I like how the workflows are displayed in Bubble, just with a few considerations as listed below.
1 - More colors for events - I’m a visual type of developer as well as a logical one. I believe that most people who work with both backend and frontend are the same, especially design specialists. Therefore, I like to keep things visually organized. In fact organization in any aspect is essential to facilitate maintenance as much as documentation. That said, I like identifying specific events separated by color in addition to folders. I personally wish there were a few more color shades that could be used, as there are too many event categories for so few colors (the current ones).
2 - Native icons on events and actions - I believe that having native icons on events and actions (as in other tools), identifying categories, etc., would be something that would contribute to the quick identification of certain actions and would prevent us from needing to add them on our own specific emojis or labels.
3 - Visual identification of notes/comments - We could have a specific icon or any other way to visually identify that an event or action has a note/comment. This would help a lot in identifying important things about specific events. Currently I use a specific icon to identify this in my events, but there may be cases where I added notes/comments and forgot to add the icon. So if it were something automatic (does the event have a note? display the X icon / actions within the event have a note? display the Y icon) it would be much better.
4 - Hover to reveal notes - Another feature that would be interesting and save time would be to be able to hover over the event/action (with note) and be able to see/read the note.
5- Ability to reset all Element’s Custom States - Having a new option as well as
reset data, but that resets all custom states would help a lot. To avoid any problems in existing apps, this should be a new option, separate from the currentreset dataoption. Because not every time you want to reset a container’s data you want to reset its Custom States too, in the same way, not every time you want to reset a container’s Custom States you want to reset its data. Furthermore, this action should be able to be performed on any element and not just on containers, since any element can have Custom States.
Data tab - Data Types
1 -Increase the width for Data Types Fields and Type name field (to allows us to see all the label for large labels).
2 - Increase the width for the popup “Create a new field”, including the inputs width (to allow us see the entire name of any Data Types/Option Sets/Plugin Types, since in some cases we need to name things in a more descriptive way, and this makes the name a little long that is not fully displayed in the Field Type input).
Data tab - App data
1 - Increase the height of the horizontal scroll bar (to make it easier for us, and especially for users with some visual difficulties, when we need to drag the bar to scroll in custom views with many columns).
2 - Highlight the hovered field with a different background color (so we can visually identify the field we want to delete without needing to wait for the alert popup to make sure we selected the correct field).
3 - The actions of resizing the column and dragging the column to another position practically overlap each other. This is not an action that I (and others I believe) use often, maybe for comparison purposes in some cases, but it would be interesting if the action of moving the column was something like clicking and holding on any area of the column title to enable drag and drop.
Data tab - Option Sets
1 - Like in Data Types, increase the width for Option Sets Options and Option set name field (to allows us to see all the label for large labels).
2 - Like in Data Types, Increase the width for the popup “Create a new attribute”.
3 - I believe if the Option Sets Attributes was displayed in a table format as well as Data Types would be ideal (the additional attributes displayed in columns would make it easier to view their values without having to enter the option’s edit mode “Modify attributes”).
4 - Allow reordering of OS options using drag and drop (the same capability should be applied to the plugin editor, this would make building plugins with dozens of properties much easier).
5 - Remove current reordering and editing options. In the case of reordering Option Sets by using drag and drop, the options “move up” and “move down” would no longer be necessary and “Modify attributes” could just be a pencil edit icon as it is for Data Types records.
Styles tab
1 - Style for disabled inputs - Practically all inputs have an action to disable it and this is an extremely important action and frequently used in forms. However, in the styles tab, the inputs do not have the option to create a style for when they are disabled like we currently have for disabled (non-clickable) buttons.
Input
Button
2 - Styles tab not scrollable and being cut off - Depending on the number of conditions in the styles, you are not able to select the desired options because the visible screen is cut off. You need to zoom out the entire window to see the options. This tab should be scrollable. The same happens if you check “Lock Property Editor” to make the properties tab fixed to the right on editor, but in this case, the last conditional still allows you to scroll through the drop-down menu (Get data from page URL is the last option in the list so you can see we can scroll through the list), but you will not be able to create other conditionals after the last visible one.
Style tab conditionals
Fixed properties tab
3 - Dynamically switch between pre-created styles - It would be great if we could use conditionals on elements that would allow us to switch between pre-created styles. For example, if we have two tag styles, one green and one red. And in the editor we could say something like:
When the conditional X is true, change it to the green style,When the conditional X is false, change it to the red style. That would be of great help.
API tab (new)
1 - New tab (suggested by @Jici)- If we had a new tab to keep all the API Connector calls/settings together in their own tab, things would be a little more organized.
Settings tab - General - Optimize Application
This functionality should be a larger or full screen popup to allow a better view of the list. Also we can see that there is a certain category for each thing listed. Currently all removed/unused items (DTs, Os, fields, options, attributes, properties, styles, plugins, reusable elements, etc.) are listed when opening the popup, generating a huge list. We should be able to filter it by these categories.
To be clear, I’m not complaining about how things currently are in the Bubble. Yeah, we have some problems that need to be fixed and improved, but what I want to demonstrate with these suggestions is that we could have a tool that makes creating apps even easier, requiring even less technical code knowledge, speeding up the development process even more and making Bubble an even more robust and complete tool compared to the others.
If I remember anything else, I’ll come back here and update this topic.
Width, Height… would save so much custom css workarounds