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.
Data Bindings Picker
Section titled “Data Bindings Picker”The picker icon opens the Data Bindings Picker for the Repeat expression.
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 this toolbar when you need to change how you browse or insert expressions, because those controls shape what you can pick next.
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.
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 Expression Builder
Section titled “Close Expression Builder”This step closes the Expression Builder so the next step can finish back in the main Properties panel.
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.