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
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
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
Select the element in App Structure, then use Properties to configure show/hide/if, repeat, and bindings.
Conditional display (show/hide/if)
Control when an element is visible and whether it exists in the DOM.
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
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
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
Connect what users see to your data using bindings (instead of manual string concatenation).
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
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
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)
Repeat UI from an array, Data View, Data Store, or API result.
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
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
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
Next, practice with Data View and events/actions, then learn formatters.
Pick your next tour
Continue learning App Connect.