Calculator (expressions + toNumber)

Build a small reactive calculator in Wappler and use it to understand expressions, input scope, and why toNumber() is essential before doing numeric math in bindings.

Calculator: reactive expressions

This tour uses a two-input calculator to show how App Connect expressions evaluate in real time. You will inspect the result binding, follow where each value comes from, and see where type conversion prevents string-math bugs.

What you’ll learn

You will learn the whole expression workflow, not just the final formula: which inputs are in scope, how the Data Bindings Picker helps assemble the expression safely, and where to apply toNumber() so the result behaves like real arithmetic.

note: HTML input values are strings by default. Use toNumber() before doing math (A.value.toNumber() + B.value.toNumber()).

Bindings

UI is wired to data with expressions.

Data Bindings Picker

Browse what’s in scope and insert valid expressions into a field.

toNumber()

Convert input strings to numbers before doing math.

Select the result element

Inspect its text binding in Properties

Use the Data Bindings Picker to explore scope + build the expression

Prerequisites

This tour opens a sample App Connect page in Design View. Keep Page Panels (Structure) and Selection Panels (Properties) visible.

Expression: computed result

The result is computed from two inputs. No click action is needed — the expression is reactive.

Result field (auto-selected)

Inspect the result text binding — it shows the computed sum expression. (The result text is selected for you.)

Orient yourself in Properties panel

Start with the wider context in the Properties panel so the next control makes sense in the full workflow. In the next step, you will focus on Text binding expression and see how it fits into this area.

Text binding expression

This field contains the expression that computes the sum. It uses toNumber() so math works correctly.

note: App Connect input values are strings by default. Use toNumber() before doing math (A.value.toNumber() + B.value.toNumber()).

Inspect it in the Data Bindings Picker

The picker icon opens the Data Bindings Picker so you can explore what’s in scope and see how the expression is built.

tip: Prefer the Data Bindings Picker over typing raw expressions — it keeps your bindings valid.

Use the Data Bindings Picker to select inputs and formatters from a tree and insert them into the binding field.

Inputs in scope

You’ll see the input components and their properties in the tree. Select their value properties to build expressions.

Expression preview

This preview shows the full expression that will be inserted back into the text binding field.

Formatter icon

This icon opens the Data Formatter for advanced formatter chains such as number, currency, date, and text formatting. You can explore that popup in the dedicated Data Formatter tour.

Close Data Bindings Picker

Close the Data Bindings Picker to return to Properties. This step matters because Close Data Bindings Picker is part of Popup Databindingspickup Button Cancel, and understanding that context makes the next action easier to repeat in your own project.

Try it in Preview mode

Switch to Preview mode and change the input values. The result updates immediately.

Switch to Preview mode

Preview mode makes the inputs interactive.

Wait for Preview mode

Wait for the page to finish switching modes.

Change A and B

Type new numbers in A and B. The result updates instantly (no button required).

Return to Edit mode

Switch back to Edit mode to continue learning.

Next steps

You’ve practiced expressions and type conversion. Next, learn the bigger workflow: components, properties, events, and actions.

Pick your next tour

Continue learning App Connect gradually.