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
Section titled “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)
Section titled “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
Section titled “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
Section titled “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)
Section titled “Simple binding with formatting (auto-selected)”This value uses a binding expression that formats as currency: minPrice.value.formatCurrency('$').
Text binding expression
Section titled “Text binding expression”This field contains the expression for the selected element.
Opening Data Bindings Picker
Section titled “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
Section titled “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)
Section titled “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
Section titled “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)
Section titled “Opening the Data Formatter (currency)”The formatter opens from this control so the flow can move from a raw price binding to a readable display format. The next steps stay inside the formatter popup and show how the final formatting chain is assembled.
Data Formatter popup
Section titled “Data Formatter popup”The Data Formatter lets you build a formatter chain (pipeline) visually and insert it back into the field.
Formatter chain tree
Section titled “Formatter chain tree”This tree represents your formatter chain. Select a formatter to edit its settings in Properties.
Formatter settings (Properties)
Section titled “Formatter settings (Properties)”These properties matter because the selected formatter changes the final output, and the next step closes the popup after you understand that effect.
Close Data Formatter
Section titled “Close Data Formatter”Close the formatter once you understand the chain so you can return to the picker and continue the broader App Connect flow.
Close Data Bindings Picker
Section titled “Close Data Bindings Picker”Close the Data Bindings Picker to return to Properties.
Now select the repeater (auto-selected)
Section titled “Now select the repeater (auto-selected)”The repeater displays the Data View results as cards.
Repeat expression
Section titled “Repeat expression”This property points to the collection being repeated (Data View results).
tip: Use the Data Bindings Picker here to explore the full path (for example:
data_view1.data).
Opening Data Bindings Picker (repeat)
Section titled “Opening Data Bindings Picker (repeat)”We’ll open the Data Bindings Picker so you can inspect the repeat expression in context.
Repeat expression in the picker
Section titled “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
Section titled “Close Data Bindings Picker”Close the Data Bindings Picker to continue.
Data View (Structure)
Section titled “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
Section titled “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
Section titled “Visual Expression Builder popup”The Visual Expression Builder helps you build valid expressions with operators, functions, and data sources in scope.
Query builder
Section titled “Query builder”Each row is Field + Operator + Value. This is how you define filter rules without typing the full expression.
AND / OR groups
Section titled “AND / OR groups”Use AND or OR here to decide how multiple filter rules should combine, because that choice changes the meaning of the final expression. The next step previews the result, so this is the moment where the logic of the filter becomes clear.
Expression preview
Section titled “Expression preview”This shows the final expression that goes back into the filter field when you apply/close the popup.
Close Visual Expression Builder
Section titled “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)
Section titled “Simple binding: Show (auto-selected)”This panel uses a simple binding to show/hide itself: dmx-show="showDetails.checked".
Show binding (When)
Section titled “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
Section titled “Preview the filters in action”Switch to Preview mode and interact with the controls to see bindings update instantly.
Switch to Preview mode
Section titled “Switch to Preview mode”Switch to Preview mode now so you can test the finished App Connect example live in the next step.
Wait for Preview mode
Section titled “Wait for Preview mode”Wait for the page to finish switching modes.
Beds filter
Section titled “Beds filter”We’ll open the Beds dropdown so you can change the minimum beds filter.
Minimum beds value
Section titled “Minimum beds value”This dropdown value updates the filter. We’ll pick a higher minimum beds value to narrow the list.
Action button
Section titled “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
Section titled “See the results update”The listing cards and summary badges update immediately when state changes.
Return to Edit mode
Section titled “Return to Edit mode”Return to Edit mode so you can keep exploring the setup after confirming the live behavior.
Wire an event → action
Section titled “Wire an event → action”Events are where interactivity starts. You pick an event (click/submit/keyup/…) and assign an action.
Action button
Section titled “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
Section titled “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
Section titled “Use event modifiers”Modifiers change behavior (prevent default, stop propagation, capture, once) and can add key/button conditions.
Conclusion
Section titled “Conclusion”You’ve seen the core workflow: inspect components, configure Properties, and wire an event to an action.
Pick your next tour
Section titled “Pick your next tour”Continue with deeper tours on expressions, collections, and filtering.