Bindings
UI is wired to data with expressions.
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
Section titled “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
Section titled “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()).
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
Section titled “Prerequisites”This tour opens a sample App Connect page in Design View. Keep Page Panels (Structure) and Selection Panels (Properties) visible.
Expression: computed result
Section titled “Expression: computed result”The result is computed from two inputs. No click action is needed — the expression is reactive.
Result field (auto-selected)
Section titled “Result field (auto-selected)”Inspect the result text binding — it shows the computed sum expression. (The result text is selected for you.)
Text binding expression
Section titled “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
Section titled “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.
Data Bindings Picker popup
Section titled “Data Bindings Picker popup”Use the Data Bindings Picker to select inputs and formatters from a tree and insert them into the binding field.
Inputs in scope
Section titled “Inputs in scope”You’ll see the input components and their properties in the tree. Select their value properties to build expressions.
Expression preview
Section titled “Expression preview”This preview shows the full expression that will be inserted back into the text binding field.
Formatter icon
Section titled “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
Section titled “Close Data Bindings Picker”Close the Data Bindings Picker to return to Properties.
Try it in Preview mode
Section titled “Try it in Preview mode”Switch to Preview mode and change the input values. The result updates immediately.
Switch to Preview mode
Section titled “Switch to Preview mode”Switch to Preview mode now so you can test the calculator live in the next step instead of only reading the setup in Design view.
Wait for Preview mode
Section titled “Wait for Preview mode”Wait for the page to finish switching modes.
Change A and B
Section titled “Change A and B”Type new numbers in A and B. The result updates instantly (no button required).
Return to Edit mode
Section titled “Return to Edit mode”Return to Edit mode so you can keep building after confirming the live calculator behavior in Preview.
Next steps
Section titled “Next steps”You’ve practiced expressions and type conversion. Next, learn the bigger workflow: components, properties, events, and actions.
Pick your next tour
Section titled “Pick your next tour”Continue learning App Connect gradually.