Scope-aware
The picker only shows what’s in scope.
Data Bindings Picker (scope + Design/Code)
Deep dive into Wappler’s Data Bindings Picker and Visual Expression Builder: scope tree, Design vs Code view editing, preview, and inserting expressions safely.
Introduction
Section titled “Introduction”This tour uses a dedicated App Connect tour page so you can explore bindings and pickers safely. You’ll learn how Wappler builds expressions visually, how scope affects what you can pick, and how Design vs Code view affects how you edit bindings.
What you’ll learn
Section titled “What you’ll learn”Wappler’s binding workflow is picker-driven: select data from a tree and let Wappler generate the correct expression for you.
Safe expressions
Picking avoids typos and invalid paths.
Formatting hook
When you’re ready to format values, continue with the Data Formatter tour (this tour focuses on bindings + Expression Builder).
Select the right node in App Structure
Open the picker from Properties
Use the tree + preview to build expressions
Bound element (auto-selected)
Section titled “Bound element (auto-selected)”This step auto-selects a repeating element in Design View so the picker has real data in scope.
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 Data Bindings Picker and see how it fits into this area.
Data Bindings Picker
Section titled “Data Bindings Picker”The picker icon opens the Data Bindings Picker for the Repeat expression. This step matters because Data Bindings Picker is part of Selection Panels Properties Repeatexpression, and understanding that context makes the next action easier to repeat in your own project.
tip: When in doubt, open the picker: it shows only valid items for the current scope.
Data Bindings Picker (scope browser)
Section titled “Data Bindings Picker (scope browser)”The Data Bindings Picker shows data/components/methods available in the current scope. Selecting an item builds the correct expression and previews what will be inserted back into Properties.
Picker popup
Section titled “Picker popup”This popup is the central workflow for building bindings safely. Use it whenever you see a picker icon next to a bindable field.
Scope tree
Section titled “Scope tree”Expand nodes to browse components and their data. This is your current scope — it changes depending on what’s selected in App Structure.
Toolbar (search + navigation)
Section titled “Toolbar (search + navigation)”Use the toolbar to search and navigate large scopes quickly (expand/collapse, search, etc.).
Preview expression
Section titled “Preview expression”This preview shows the full expression that will be inserted into the originating field when you pick items from the tree.
Preview toolbar (optional)
Section titled “Preview toolbar (optional)”Depending on the picker mode, the preview area can offer helper controls for editing or refining the expression before inserting it.
Design vs Code view (editing mode)
Section titled “Design vs Code view (editing mode)”When a binding supports mixed content, Wappler offers two editing modes. Design view helps you visually build a combined value (text + picked expressions) without worrying about quoting/escaping. Code view shows the raw expression/text, so you can fine-tune it directly when needed. You can switch between them, but it’s usually safest to stay in Design view and let Wappler generate valid syntax.
Close the Data Bindings Picker
Section titled “Close the Data Bindings Picker”Close the picker to return to Properties. This step matters because Close the 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.
Visual Expression Builder (logic + operators)
Section titled “Visual Expression Builder (logic + operators)”Some properties use the Visual Expression Builder. It’s still scope-aware, but focused on building logic (operators, conditions) rather than just picking a data path.
Component with filter (auto-selected)
Section titled “Component with filter (auto-selected)”This step selects a Data View so you can see the Expression Builder flow.
Visual Expression Builder
Section titled “Visual Expression Builder”The Data View Filter picker opens the Visual Expression Builder so you can build conditions visually.
Expression Builder popup
Section titled “Expression Builder popup”This popup helps you build valid expressions with operators and grouped conditions, while staying in the correct scope.
Scope tree
Section titled “Scope tree”Just like the Data Bindings Picker, the Expression Builder exposes scope. Use it to pick data sources and methods while constructing logic.
Preview expression
Section titled “Preview expression”This preview shows the full expression that will be inserted back into the originating field when you apply/close the popup.
Design vs Code view (editing mode)
Section titled “Design vs Code view (editing mode)”If the expression builder shows mixed content, you can switch between Design (visual) and Code (raw) editing. Design view is preferred because Wappler handles quoting/escaping and keeps the expression valid; Code view is there when you need to tweak the raw expression.
Close the Visual Expression Builder
Section titled “Close the Visual Expression Builder”Close the popup to return to Properties. This step matters because Close the 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.
Conclusion
Section titled “Conclusion”You’ve seen how Wappler builds bindings safely with pickers, how scope affects what’s available, and how Design vs Code view lets you choose between visual editing and raw expression editing.
Pick your next tour
Section titled “Pick your next tour”Continue with a deeper formatting tour or review formatters at a high level.