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('$').
Orient yourself in Properties panel
Section titled “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
Section titled “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
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)”We’ll open the Data Formatter so you can inspect or adjust the currency formatting chain.
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)”Configure currency symbol, locale, precision, etc. depending on the formatter.
Close Data Formatter
Section titled “Close Data Formatter”Press Next to close the Data Formatter (Cancel) and return to the Data Bindings Picker.
Close Data Bindings Picker
Section titled “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)
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). 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)
Section titled “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
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. 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)
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”Groups let you combine multiple rules with AND/OR for more advanced filtering.
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”Close the Visual Expression Builder to return to the Data View properties. This step matters because Close Visual Expression Builder is part of Popup Expressionbindingspickup Button Cancel, and understanding that context makes the next action easier to repeat in your own project.
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”Preview mode makes the page interactive so you can use the controls as a user would.
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”Switch back to Edit mode to continue inspecting components.
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.