State
Use Data components (Variable, Array, Toggle) and collections (Data Store) to hold state.
App Connect Quick Overview
A hands-on intro to App Connect in Wappler: review key components, configure Properties, and attach an event action.
Getting oriented
App Connect makes pages reactive by connecting UI to data and events. You build it visually with components + Properties.
How App Connect works (in Wappler)
App Connect is a reactive layer: components hold data, UI reads that data, and events trigger actions that update data. When data changes, the UI updates automatically.
important: Use Wappler’s Data Bindings Picker and Actions Picker to select data and actions from a tree. This keeps your bindings consistent with what’s in scope.
Data Bindings Picker
Browse what’s in scope and insert valid expressions into fields without typing everything.
Visual Expression Builder
Build filter expressions with operators, functions, and in-scope data sources.
Actions Picker
Choose actions (like Set Value) to run when events happen (like a button click).
Review components
Configure Properties
Wire an event → action
Prerequisites
This tour opens a sample App Connect page in Design View. Keep Page Panels (Structure) and Selection Panels (Properties) visible.
Bindings → formatter → repeater → filter expressions → show/hide
Start with a simple text binding and see how currency formatting works. Next, inspect the repeater’s repeat expression, then open the Visual Expression Builder used by the Data View filter. Finally, review a Show/Hide binding.
Simple binding with formatting (auto-selected)
This value uses a binding expression that formats as currency: minPrice.value.formatCurrency('$').
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 for the selected element. This step matters because Text binding expression is part of Selection Panels Properties Innertextvalue, and understanding that context makes the next action easier to repeat in your own project.
Opening Data Bindings Picker
We’ll open the Data Bindings Picker so you can browse what’s in scope and insert valid expressions without typing everything.
Data Bindings Picker popup
Browse what’s in scope for this field. Since the current expression uses minPrice.value, you should see minPrice (Variable) and its value here.
Find `minPrice.value` (and data in scope)
In the tree, expand minPrice and select its value. That’s the value being formatted as currency in the field.
note: Scope matters: the picker only shows data that’s valid for the current selection.
Active expression tag
The formatter button applies to the active tag. We’ll focus the expression tag so formatting targets the right expression.
Opening the Data Formatter (currency)
We’ll open the Data Formatter so you can inspect or adjust the currency formatting chain.
Data Formatter popup
The Data Formatter lets you build a formatter chain (pipeline) visually and insert it back into the field.
Formatter chain tree
This tree represents your formatter chain. Select a formatter to edit its settings in Properties.
Formatter settings (Properties)
Configure currency symbol, locale, precision, etc. depending on the formatter.
Close Data Formatter
Press Next to close the Data Formatter (Cancel) and return to the Data Bindings Picker.
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.
Now select the repeater (auto-selected)
The repeater displays the Data View results as cards.
Repeat expression
This property points to the collection being repeated (Data View results). This step matters because Repeat expression is part of Selection Panels Properties Control Repeatexpression, and understanding that context makes the next action easier to repeat in your own project.
tip: Use the Data Bindings Picker here to explore the full path (for example:
data_view1.data).
Opening Data Bindings Picker (repeat)
We’ll open the Data Bindings Picker so you can inspect the repeat expression in context. This step matters because Opening Data Bindings Picker (repeat) is part of Selection Panels Properties Control Repeatexpression, and understanding that context makes the next action easier to repeat in your own project.
Repeat expression in the picker
This picker is scoped to the repeater. You’ll see item-level fields like title, beds, and price here too.
Close Data Bindings Picker
Close the Data Bindings Picker to continue. 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.
Data View (Structure)
The Data View defines which records appear. We’ll select data_view1 so you can inspect its filter expression.
Opening filter in Expression Builder
The filter is a rule-based expression. We’ll open it in the Visual Expression Builder so you can inspect the logic.
tip: Use the Visual Expression Builder for logical expressions (filter rules, AND/OR groups). Use the Data Formatter for formatting pipelines.
Visual Expression Builder popup
The Visual Expression Builder helps you build valid expressions with operators, functions, and data sources in scope.
Query builder
Each row is Field + Operator + Value. This is how you define filter rules without typing the full expression.
AND / OR groups
Groups let you combine multiple rules with AND/OR for more advanced filtering.
Expression preview
This shows the final expression that goes back into the filter field when you apply/close the popup.
Close Visual Expression Builder
Review the full Visual Expression Builder one last time. Press Next to close it and return to the Data View properties.
Simple binding: Show (auto-selected)
This panel uses a simple binding to show/hide itself: dmx-show="showDetails.checked".
Show binding (When)
This is the expression behind dmx-show (Show → When). It uses the same Data Bindings Picker and scope rules as your other bindings.
tip: For complex conditions, open the picker and build the expression visually.
Preview the filters in action
Switch to Preview mode and interact with the controls to see bindings update instantly.
Switch to Preview mode
Preview mode makes the page interactive so you can use the controls as a user would.
Wait for Preview mode
Wait for the page to finish switching modes.
Beds filter
We’ll open the Beds dropdown so you can change the minimum beds filter.
Minimum beds value
This dropdown value updates the filter. We’ll pick a higher minimum beds value to narrow the list.
Action button
This button runs an action that updates greeting state. We’ll click it to demonstrate state-driven UI updates.
See the results update
The listing cards and summary badges update immediately when state changes.
Return to Edit mode
Switch back to Edit mode to continue inspecting components.
Wire an event → action
Events are where interactivity starts. You pick an event (click/submit/keyup/…) and assign an action.
Action button
This button is where we’ll attach a Click event. We’ll select actionButton so you can inspect its event and action settings.
Add a Click event
In Properties → Events, enable Click and choose an action. Actions are picked visually (you don’t type raw code for common tasks).
tip: Look for an Action picker (it will help you choose a component action like “Set Value”, “Insert Record”, etc.).
Use event modifiers
Modifiers change behavior (prevent default, stop propagation, capture, once) and can add key/button conditions.
Conclusion
You’ve seen the core workflow: inspect components, configure Properties, and wire an event to an action.
Pick your next tour
Continue with deeper tours on expressions, collections, and filtering.