[Early access beta] New expression composer for more intuitive logic!

[grace.hong]

Hi everyone,

We’re very excited to launch an early-access beta for our revamped expression composer, which you use to integrate logic everywhere across your Bubble app, from elements’ design to the workflow conditionals.

This revamp of the expression composer allows you to:

• Edit in the middle of your expression, without deleting existing content
• View implicit parentheses, so you can keep track of and manage your expression’s order of operations
• Access dynamic data with your keyboard, allowing for faster development

To get early access, turn on the new expression composer as a beta feature. Go to Settings > Versions > Beta Features and check on the “New expression composer” feature.

Because this is a beta feature, you have full control over turning it on and off. We also generate a savepoint for you whenever you turn on this feature, so you can revert to your app’s previous status, if desired, after using the new expression composer.

In the next few weeks, everyone on Bubble will be able to toggle the new composer on or off directly from the editor. After we make updates based on your beta feedback, we’ll roll this out as the default experience.

Check out the beta documentation for more details on how the new composer changes affect building logical expressions.

Note: The new expression composer is in beta. This means the feature is pretty close to its final look, feel, and function, but we may still make some design and functionality changes before the new expression composer becomes the default experience. There may also still be some bugs in certain edge-case interactions. This feature should not break your existing applications since these changes only appear in edit-mode, not run-mode.

Potential future capabilities we’re considering for this feature:

• Selecting parts of expressions
• Preserving the expression with type mismatches
• Using literal data sources

We are very excited to see how you feel about the expression composer. You can leave feedback through the beta feature’s “submit feedback” button or submit bug reports here. Happy Bubbling!

Note: We are currently investigating editor performance issues separate from this feature. This new expression composer should NOT impact your performance, and you can turn it on and off whenever you’d like!

–
As of November 20th

Changelog:

• Updated the keyboard shortcut from “/” to “Ctrl/Cmd + /”
• Added the on-hover type affordance for atoms
• Fixed a bug on entering alpha input in color pickers
• Fix the debugger when the new expression composer beta feature is turned on
• Performance improvement for dropdowns in expression composer beta
• Fix a bug that would sometimes prevent the context menu from working on new expression composer
• Fix a bug that would cause some custom states to be marked as issues when they are not on new expression composer
• Improve the tracking of user focus to prevent issues where sometimes clicks were lost on new expression composer
• Improve the dragging behavior for the property editor on new expression composer
• Fix the colors of element picker and page folder dropdowns on new expression composer (no longer white text on white background)
• Ensure that Reusable Element Popups appear in dropdowns allowing popups on new expression composer
• Update short text composer button to add dynamic button on new expression composer (this is a new design for the button to insert dynamic data in short text composers)
• Updated the visualization from brackets to parentheses, with new underlining + coloring to more clearly distinguish precedence in order of operations
• Fixed a bug where you could not add dynamic data in color composers on conditionals
• Fixed bug on dynamic data entry after deleting empty entry
• Fixed hidden column checkboxes on the workflow action download data on CSV
• Modified bottom padding on text composer
• Adjusted placeholder for Google Material Icon and style attributes
• Fixed memory leak on issue checker
• Change data type to grouping for repeating groups as relevant
• Fix rendering error when deleting static text span at end of text composer
• Allow single click deletion on flyouts
• Insert dynamic data on empty dynamic image/file fields
• Performance on typing when using the new composer
• Entering literals without losing focus
• Dropdown going underneath (i.e., becoming transparent) on fields/short text composers
• Clicking on “More” only requires one, not two clicks to open the dropdown
• Increase the clickable area after a dynamic expression
• Ensure all fields are visible and do not generate issues
• Fix bugs on broken Data API, upload data, Google Material Icons
• Adding error boundaries, so rendering issues are isolated
• Fix option sets list dropdown to show list options
• Allow typing text spans in short text composer in the flyout (and flyouts within flyouts)
• Resolved issues appearing on the issue checker when new composer is turned on
• Addressed performance issues related to elements loading in elements picker
• Differentiate between shape errors and type errors
• Light-mode composers implemented
• Default values appear for null values on dropdown placeholders
• On filtered, you should be able to now correctly specify all constraints and operators
• On dropdowns in Styles, App Search, and Replace modal, elements are visible
• Short text composer designs have been updated

Upcoming fixes:

• Making deletion a smoother experience
• Increasing the clickable area on short text composers
• Edge cases on field creation, App Text, focus state, long literals

[petter]

Brilliant

[msgiblin]

Hi Grace, I’m excited to start using this! I can fill out a bug report as well, but immediately after activating the experimental Expression Composer, my app errors went from ‘0’ to ‘49’.

Taking a look at the sorts of errors to fix, they all reference options that just don’t exist, perhaps some internal Bubble identification rubric (for example, instead of ‘Yes’ it says ‘cmOuC’

Clicking on one of these, the ‘option’ is says isn’t possible is indeed possible and still shows as valid:

Once I disabled the experimental expression composer, the errors went away.

[grace.hong]

@msgiblin Thank you for sharing – could you please submit a bug report? We should be able to get to this quickly.

[msgiblin]

Done!

[tylerboodman]

Same, had some errors right after enabling, it scared me cause I reverted to the save point and it still had the errors but just needed to turn off the beta feature. Will report it

[julianno.09]

Same bugs here. Error on = expressions. It used to be = and now only > or < is available.

[tylerboodman]

“is” isn’t available? Usually there isn’t an “=”

[jos2]

Looks nice nice, but when you hover an dynamic insert there comes a “more” option. but when the dynamic insert is covering the full width of the box then there is no space for the more anymore and then the “more” comes on the next line but when you want to click on it, it disappears because you left the dynamic insert with the mouse hover. i will file a bug report.

[grace.hong]

Thanks all for the reporting - please continue doing so, so we can ship out updates

@jos2 This is a known issue – we do have alternative ways to add onto the expression in these cases. You can click on the last atom in the expression and either press the “More” button (which would become fixed) or press down on your keyboard!

[drixxon]

How was the experience otherwise? Would you suggest we wait until they fix the phantom errors before trying out the expression composer?

I’m ok with a little jank if it’ll speed up my workflow creation

[christine.shiba]

try it with keyboard shortcuts! Use up/down arrows to navigate the dropdown, and press / to add dynamic data in any composer.

[zelus_pudding]

So stoked about this, nice work team Bubble!

[julianno.09]

Nope. The bug occurs on :filtered operator.

Type is a Option set. I use Type = Option to filter.

No makes sense.

[grace.hong]

Working on a fix for properly showing operators and fields on filters. Will update this post with a changelog once we push more updates!

[sudsy]

Is it intended behavior that multiple "more"s appear in some contexts?

 

The following expression is valid logically, but the text is so faded it’s hard to read and seems to suggest the expression is not yet valid.

 

Also, how do we rearrange portions of an expression which evaluate to the same type? For instance, how would I swap the position of the 2 boolean subexpressions in the image above - i.e. move Search for… and Current User… to the opposite sides of the or?

And do the “corners” take the place of parentheses in this new UI?

Lastly, have we lost the ability to hover a portion of the expression to see the type to which it evaluates? I found that quite useful in various situations.

[drixxon]

Just for the first part of your question, the multiple mores all have different functions.

I’ve seen up to three different mores before.

If you’re setting up a text field, the first more would be:lowercase , :uppercase, :truncated, etc

The second more would be “and” or “or”

The third more would also be “and” “or” but operating underneath semi different rules than the second more. Idrk how to explain the rules but it makes sense.

This anecdote is based off of the non-elemental system. If they changed the functionality in the new system, I’d be none the wiser.

[georgecollier]

@sudsy

Is it intended behavior that multiple "more"s appear in some contexts?

Do you have parentheses enabled? If yes then it should appear multiple times (different places to put parentheses)

[sudsy]

@drixxon

the multiple mores all have different functions.

Thanks, @drixxon. Things make a bit more sense when I interpret the corners as parentheses from the experimental feature.

@georgecollier

Do you have parentheses enabled?

Thanks, @georgecollier. No, I don’t have that experimental feature enabled; but since the description for this new UI states that it overrides the parentheses feature, then I’m assuming the corners are analogous to parentheses (and the new UI makes a bit more sense in that light).

EDIT

I have to say, though, that while the ability to “insert” expressions is improved with this new UI, I was also hoping for an easy way to “rearrange” subexpressions within an expression. I’ll have to play a bit with copy/paste to see if that’s improved.

[georgecollier]

@sudsy

rearrange” subexpressions within an expression.

Oooh, imagine being able to drag and drop and slot in.