Dynamic expressions with numbers in Bubble let you perform calculations, format values, and aggregate data directly in element properties. You use arithmetic operators (plus, minus, times, divided by) on number fields, format numbers as currency or with decimal places using ':formatted as', and aggregate search results with ':sum', ':average', ':count'. This tutorial covers calculation, formatting, and aggregation patterns.
Overview: Numeric Dynamic Expressions in Bubble
This tutorial explains how to work with numbers in Bubble's dynamic expression system — performing calculations, formatting output, and aggregating database data.
Prerequisites
- A Bubble app with Data Types containing number fields
- Basic understanding of dynamic expressions in Bubble
- Elements that need to display calculated or formatted numbers
Step-by-step guide
Perform basic arithmetic in dynamic expressions
Perform basic arithmetic in dynamic expressions
In any text or number element, click 'Insert dynamic data'. Select a number field, then chain arithmetic operators. Available operators: +, -, *, /. For example: 'Current page's Product's price * 1.1' calculates price plus 10% tax. 'OrderItem's quantity * OrderItem's price' calculates line total. You can chain multiple operations: '(price * quantity) - discount'. Use parentheses by nesting expressions.
Expected result: Dynamic expressions perform arithmetic calculations on number fields in real time.
Format numbers for display
Format numbers for display
After selecting a number field, append ':formatted as' to control the display. Common formats: '$#,##0.00' for US currency ($1,234.56), '#,##0' for integers with commas (1,234), '0.0%' for percentages, '#,##0.00' for two decimal places. You can also use ':rounded to 2' to round to specific decimal places before formatting. For negative numbers, the format handles the minus sign automatically.
Pro tip: Always use ':formatted as' for display purposes. The underlying value remains a precise number — formatting only affects what the user sees.
Expected result: Numbers display in the correct format with proper currency symbols, commas, and decimal places.
Aggregate search results with sum, average, and count
Aggregate search results with sum, average, and count
On a search result, use aggregation operators: ':each item's [field]:sum' adds up all values, ':each item's [field]:average' calculates the mean, ':count' returns the number of items. For example: 'Do a search for Orders (this month):each item's total:sum' gives monthly revenue. 'Do a search for Reviews:each item's rating:average' gives the average review score. These work directly in text elements and conditions.
Expected result: Search results are aggregated into sum, average, and count values for display and calculations.
Handle edge cases and empty values
Handle edge cases and empty values
Division by zero returns an error — always check the divisor. Use a conditional: 'When [divisor] is 0 → show N/A' or 'When [divisor] is not 0 → show result'. Empty number fields default to 0 in calculations but may show blank in display. Use ':default to 0' on any expression that might be empty to prevent blank displays. For percentage calculations, handle the case where the total is zero to avoid division errors.
Expected result: Calculations handle edge cases gracefully without showing errors or blank values.
Use calculated values in conditions and workflows
Use calculated values in conditions and workflows
Numeric expressions work in conditions too. For example: 'When Do a search for CartItems:each item's subtotal:sum > 100' → show 'Free shipping!' message. In workflows, use calculated values as action parameters: set 'order_total' to the cart sum expression. You can also use 'arbitrary text' to construct formatted strings: 'You saved $[dynamic: original - discounted]:formatted as currency'.
Expected result: Calculated numeric values drive conditions, workflow parameters, and formatted display strings.
Complete working example
1NUMERIC EXPRESSIONS — REFERENCE2=================================34ARITHMETIC OPERATORS:5 field + number (addition)6 field - number (subtraction)7 field * number (multiplication)8 field / number (division)9 Chaining: price * quantity - discount1011FORMATTING:12 :formatted as '$#,##0.00' → $1,234.5613 :formatted as '#,##0' → 1,23414 :formatted as '0.0%' → 85.5%15 :formatted as '#,##0.00' → 1,234.5616 :rounded to 2 → 12.351718AGGREGATIONS:19 Search:each item's field:sum → total20 Search:each item's field:average → mean21 Search:count → count22 Search:each item's field:min → minimum23 Search:each item's field:max → maximum2425EDGE CASES:26 :default to 0 → replaces empty with 027 When divisor is 0 → show 'N/A'28 When field is empty → show default text2930EXAMPLES:31 Line total: quantity * price_per_unit32 Tax: subtotal * 0.0833 Average rating: Reviews:each item's rating:average34 Cart total: CartItems:each item's subtotal:sum35 Discount: original_price - sale_priceCommon mistakes when using Dynamic Expressions with Numbers in Bubble
Why it's a problem: Dividing by a field that could be zero without checking
How to avoid: Add a conditional: when the divisor is 0 or empty, show 'N/A' or 0 instead of performing the division
Why it's a problem: Formatting a number inside a calculation instead of at the end
How to avoid: Perform all arithmetic first, then apply ':formatted as' as the last operation in the chain
Why it's a problem: Using ':filtered' for aggregation instead of ':sum' or ':average'
How to avoid: After filtering, chain the aggregation operator: ':filtered:each item's field:sum'
Best practices
- Apply ':formatted as' only at the end of an expression chain, after all calculations
- Use ':default to 0' on expressions that might be empty to prevent blank displays
- Always guard against division by zero with a conditional check
- Use search aggregations (:sum, :average) instead of manual calculation loops
- Round to appropriate decimal places for financial calculations (2 for currency)
- Store calculated totals in the database for frequently accessed values to save WUs
- Test expressions with edge case data: zero values, empty fields, very large numbers
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need to display calculated values in my Bubble.io app: order totals (quantity * price), average ratings, and monthly revenue sums. How do I use dynamic expressions for math, formatting, and aggregation?
Add calculated fields to my product and order pages. Show line totals (quantity * price), format prices as USD currency, calculate average product ratings from reviews, and display total monthly revenue from the orders table.
Frequently asked questions
Can I use complex math like square root or power in Bubble?
Bubble does not have native square root or power operators. Use JavaScript in an HTML element for complex math, or approximate with available operators.
How do I display a percentage from two numbers?
Calculate: (part / total * 100):rounded to 1, then append '%' as static text. Or use ':formatted as 0.0%' which multiplies by 100 and adds the % symbol.
Can I perform calculations in Privacy Rules?
Privacy Rule conditions support basic comparisons but not complex arithmetic. For calculated access rules, store the computed value in a field and reference that field in the rule.
How do I sum values from a nested search?
Chain the search: 'Do a search for Orders:each item's items:each item's price:sum'. This sums the prices of all items across all orders. Be aware this can be WU-intensive for large datasets.
Can RapidDev help build data-driven dashboards with calculations?
Yes. RapidDev can build analytics dashboards with complex calculations, aggregations, charts, and real-time metrics in Bubble.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation