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
Section titled “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
Section titled “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
Section titled “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)
Section titled “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
Section titled “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
Section titled “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
Section titled “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)
Section titled “Bindings (reactive properties)”A binding connects a property to data. When the data changes, the property updates automatically.
Use the expression picker
Section titled “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 ( + )
Section titled “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
Section titled “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
Section titled “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)
Section titled “Events (run actions)”Events are configured in Properties. You enable an event and choose an action to execute.
Actions are visual, not raw code
Section titled “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
Section titled “Modifiers change behavior”Modifiers like prevent/stop/once help you control default browser behavior and event propagation without manual code.
Conclusion
Section titled “Conclusion”Next, take a hands-on tour or jump straight to collections and filtering.
Pick your next tour
Section titled “Pick your next tour”Choose a focused tour based on what you want to build.