Conditional display
Show/hide/if based on state (toggle, variable, form state).
Conditional display & repeating lists
Use show/hide/if and repeaters to render UI from data — configured visually in Wappler.
Conditional display & repeating lists
Section titled “Conditional display & repeating lists”Build reactive UI by showing/hiding sections and repeating elements from a dataset — configured visually in Wappler (no manual code required for the common cases).
Three building blocks
Section titled “Three building blocks”Most dynamic UI on the page comes down to: conditional display, binding text/attributes to data, and repeating UI for lists.
Bindings
Bind text, attributes, and classes to data using the picker.
Repeaters
Render lists from arrays / Data View / Data Store.
Pick the element in App Structure
Configure dynamic behavior in Properties
Let data drive the UI
Where you’ll work
Section titled “Where you’ll work”Select the element in App Structure, then use Properties to configure show/hide/if, repeat, and bindings.
Conditional display (show/hide/if)
Section titled “Conditional display (show/hide/if)”Control when an element is visible and whether it exists in the DOM.
Show/Hide toggles visibility
Section titled “Show/Hide toggles visibility”Use show/hide when you want to keep the element in the DOM but toggle visibility based on state (a Toggle, Variable, form state, etc.).
tip: Show/hide is great for UI switches where layout stays stable.
If conditionally renders
Section titled “If conditionally renders”Use if when you want the element removed from the DOM when false (often better for performance and for components that should not exist).
important: If removes the element from the DOM when false. Nested bindings and events won’t run because the element isn’t there.
Choosing the right one
Section titled “Choosing the right one”Prefer show/hide for simple visibility, and if for expensive UI (repeaters, complex components, large sections).
show/hide = visibility
if = render/unrender
both are declarative (no manual DOM updates)
Binding text and attributes
Section titled “Binding text and attributes”Connect what users see to your data using bindings (instead of manual string concatenation).
Prefer reactive text binding
Section titled “Prefer reactive text binding”When you bind text content, prefer dmx-text (or the text binding option in Properties) for stable updates and less flicker than raw template text.
Reactive updates
Updates automatically when the source data changes.
Formatter-friendly
Use formatters (date/currency/text) directly in the expression.
No manual DOM
Avoids manual DOM manipulation.
Bind attributes/classes/styles visually
Section titled “Bind attributes/classes/styles visually”Use bindings for attributes like src/href/value and conditional classes/styles. This is how Wappler maps to dmx-bind:* without you writing raw attributes.
tip: Use the binding picker to select the right field/formatter for src/href/value/classes — it’s scope-aware and avoids typos.
Use the picker to avoid typos
Section titled “Use the picker to avoid typos”When a field supports bindings, use the picker to browse available components and methods in the current scope.
tip: If a binding looks wrong, re-check what’s selected in App Structure — scope is selection-driven.
Repeating lists (repeaters)
Section titled “Repeating lists (repeaters)”Repeat UI from an array, Data View, Data Store, or API result.
Two repeat styles (what they change)
Section titled “Two repeat styles (what they change)”App Connect supports two repeat patterns. In Wappler you’ll pick the one that matches your desired HTML structure.
Repeat the element
The element itself repeats (great for repeating a row/card/list item).
Repeat children
The container stays once, its children repeat (great for a single wrapper like a UL or grid row).
Element-repeat changes the element count
Repeat-children keeps the wrapper stable
Both create a local item scope
Common data sources for repeating
Section titled “Common data sources for repeating”Repeaters can be driven by Arrays, Data Store records, Data View output, or API results. The picker will show you what’s available in scope.
Array items
Data Store records
Data View data (filtered/sorted/paged)
Server Connect data
Scope matters inside a repeat
Section titled “Scope matters inside a repeat”Inside a repeat, bindings resolve against the current item. Select a repeated element in App Structure to see the right fields in the picker.
tip: If you can’t see a field, ensure you’re selecting the repeated node (not just the parent wrapper).
Conclusion
Section titled “Conclusion”Next, practice with Data View and events/actions, then learn formatters.
Pick your next tour
Section titled “Pick your next tour”Continue learning App Connect.