Data Picker
Browse available components, data, and methods in a tree and insert them into a field.
Core concepts (expressions + bindings)
Understand App Connect’s reactive model, expression rules, scoping, and how to use Wappler’s data/action pickers to build bindings visually.
Core concepts
App Connect is declarative and reactive: you declare what the UI should show and when actions should run, and App Connect keeps the page in sync.
Expressions are picker-driven
In Wappler, most dynamic behavior is configured in Properties using bindings and actions. Use the Data Picker and Expression Builder to select data and functions from a tree, so you can build expressions quickly and safely.
Scope
What you can pick depends on what’s selected in App Structure and where you are in the component hierarchy.
Formatters
Use formatters (date/currency/text) directly in bindings to shape values for display.
Data changes → UI updates
Events trigger actions
Expressions stay declarative
Where you work in Wappler
Most App Connect work happens in two places: App Structure (select components) and Properties (configure bindings and events).
Quick walkthrough (one binding + currency)
A quick, low-friction example: bind a single value, then format it as currency. This is the “happy path” for most bindings — fast, safe, and picker-driven.
Pick a single value from scope
In Properties, open the picker for a bindable field (for example Text/Value). Select a single value (not an array), like a product price or variable value. The picker inserts a valid expression for you.
tip: If you only need a simple path (like
product.price), picking is faster and avoids typos.
Pick a scalar value, not a list
Let the picker insert correct syntax
Stay within current component scope
Format it as currency
With the value selected, apply a number formatter like formatCurrency() so the UI shows a readable price (e.g. $1,234.56) without changing the underlying data.
note: For one-off formatting, the picker is enough. Use the Data Formatter popup when you want to build longer formatter chains visually.
Chain formatters on the expression
Format at display time
Keep the source value unchanged
When to use the Expression Builder
Use the Visual Expression Builder for logic and conditions (operators, comparisons, grouped rules). It’s still scope-aware, but it’s built for expressions like filters and if conditions rather than simple data paths.
tip: Rule of thumb: Data Bindings Picker for “pick a value”, Expression Builder for “build logic”.
Build conditions and comparisons
Group rules for readability
Use scope-aware picker inputs
Bindings (reactive properties)
A binding connects a property to data. When the data changes, the property updates automatically.
Use the expression picker
When a field supports bindings, Wappler offers a picker so you can select data sources and methods instead of typing everything by hand.
tip: If you’re unsure what’s available, use the picker to explore the current data scope.
Dynamic Attributes ( + )
Not every binding starts as a field. In the Dynamic Attributes section, use the ( + ) button to add new App Connect attributes to the selected element. The list is generated from the component’s HTML rules and filtered by what’s allowed on that element (via each rule’s allowedOn).
tip: If you don’t see a specific attribute, try selecting a different element or inserting the related component first.
Why the ( + ) list changes
The Dynamic Attributes menu is context-aware: selecting a different element changes the list because different HTML_RULES match, and allowedOn decides where each rule can be applied (for example, some rules only allow a Google Maps attribute on a dmx-google-maps element).
Understand scope
What you can bind to depends on what’s in scope (which components exist on the page and where they are in the structure). In Wappler, this is why selecting the correct node in App Structure matters.
Events (run actions)
Events are configured in Properties. You enable an event and choose an action to execute.
Actions are visual, not raw code
Choose an action from the Actions Picker (for example: set a value, insert/update a record, navigate, reload data), then configure its parameters in Properties.
tip: If you can’t find an action, check the selected component and the event type — available actions are context-aware.
Enable an event
Pick an action
Configure parameters in Properties
Modifiers change behavior
Modifiers like prevent/stop/once help you control default browser behavior and event propagation without manual code.
Conclusion
Next, take a hands-on tour or jump straight to collections and filtering.
Pick your next tour
Choose a focused tour based on what you want to build.