How to do complex calculations in Bubble

The Bubble expression editor – you know… this one:

Bubble's expression editor

… is pretty good! But if you’re trying to do more complex mathematical expressions, you’ll find that the built-in editor has its limits. You can easily set up basic arithmetic like + – * and /, but at a certain point you’ll want to bring parentheses into the equation, and you may be surprised to find that you can’t.

The workaround for new Bubblers is often to temporarily store the numerical values in different Custom States, and calculate them over several actions in a workflow. It’ll work, but it’s not elegant. Yuck.

Enter the math.js plugin

The solution is the plugin Math.js. It uses the maths.js Javascript library that has a range of built-in functions and constants. Unlike custom states, the result of the expression is updated live – no workflows needed, just like the content of a group or the results of a search. Here’s an example from my advanced article on Recursive Workflows:

Note that the text in white is pure text – not a Bubble expression. In this way you can reference Bubble element’s and states directly in the expression, and then wrap it in parentheses and do arithmetic to your heart’s content. The great thing about the plugin is that it doesn’t rely on a third-party API.

Complex calculations and conversions

The library supports numbers, big numbers, complex numbers, fractions, units, strings, arrays, and matrices, so that you can do more complex calculations and even convert between units. Take a look at the screenshot below where I just casually add together centimeters and inches as if the two weren’t enemies to their death:

Screenshot showing unit conversion between cm and inches in Bubble.

A quick look at the Bubble debugger shows that we get the correct number, and can show the result as a text that includes the unit:

Doing calculations this way is a lot faster and lighter on your app than passing it through workflows, and the flexibility of the library is pretty awesome. Try it out!


More Posts

Custom states VS URL parameters for navigation in Bubble

A lot of Bubble tutorials and guides describing page navigation default to using custom states for hiding and showing Groups. While states will work just fine in many cases, it has its limitations and shouldn’t be used simply because it’s

How to add keyboard shortcuts to your Bubble App

Keyboard shortcuts have been a natural part of desktop applications since… well, forever. For web applications it’s really in the last few years that they’ve started to become commonplace enough for users to actually remember to use them. Not to

Bubble vs WordPress – what’s the difference?

When people first hear about Bubble, they often quickly draw the comparison to WordPress. It’s not that far-fetched – after all, they’re both platforms that allow non-coders to set up a website, create content and publish it for the world

How to run Javascript from an action in Bubble

Javascript is a pretty easy programming language and can greatly extend Bubble’s features, like copying text to the clipboard. If you’re not fluent in computerese, make sure to visit the Bubble forum, where you’ll always find someone happy to help

Leave A Reply

Your email address will not be published. Required fields are marked *


Useful articles and tips

Useful articles and tips

Join the mailing list to get guides, opinions and articles on Bubble, no-code, automation and the tech industry.

You have Successfully Subscribed!

Share This