Nested data
Submit arrays of fields (items[name][], items[qty][])
Form Repeat
Learn how Form Repeat structures nested form rows in Wappler so users can add, remove, reorder, and submit repeated data as one coherent request.
Form Repeat
Section titled “Form Repeat”This tour explains both the UI problem and the data model behind Form Repeat. You will look at how repeated rows are defined, which controls manage those rows, and how Wappler turns the repeated inputs into structured data the server can process.
What it solves
Section titled “What it solves”By the end, you should recognize when Form Repeat is the right tool: whenever users need to manage a variable number of related entries in one form and you want Wappler to keep the repeated fields, controls, and submitted payload aligned.
UI controls
Add/remove/duplicate/move rows visually
Constraints
Min/max items + optional sorting
Configure items + min/max
Add controls with actions
Submit nested fields in one request
Where you configure it
Section titled “Where you configure it”This tour selects the Form Repeat component in App Structure and then inspects its Items/min/max/sortable properties in Properties.
Core properties
Section titled “Core properties”Configure what repeats and how it behaves.
Form Repeat component
Section titled “Form Repeat component”This component repeats a block of form fields for each item. This step matters because Form Repeat component is part of the Structure panel, and understanding that context makes the next action easier to repeat in your own project.
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 Items (what repeats) and see how it fits into this area.
Items (what repeats)
Section titled “Items (what repeats)”Items is bound to an array source. Each row gets its own scope (name/qty in this example). This step matters because Items (what repeats) is part of Selection Panels Properties Formrepeatitems, and understanding that context makes the next action easier to repeat in your own project.
Min items
Section titled “Min items”Min prevents removing rows below a required count. Use canAdd/canRemove to keep buttons in sync.
tip: Bind disabled to lineItems.canAdd / lineItems.canRemove so controls stay in sync with min/max.
min keeps at least N rows
Bind disabled to canRemove when at min
Prefer clear UX for required rows
Max items
Section titled “Max items”Max prevents adding too many rows. Pair it with canAdd so the Add button disables at the limit.
max prevents too many rows
Bind disabled to canAdd when at max
Keep constraints visible to users
Sortable + handle
Section titled “Sortable + handle”Enable sortable for drag reordering, and set a handle selector so only a handle can drag.
important: Use a handle (like .handle) so inputs remain easy to edit without accidental drags.
sortable enables drag reorder
handle selects the drag grip element
animation controls drag animation duration
Handle selector
Section titled “Handle selector”Handle is the CSS selector that defines the drag grip (so editing inputs doesn’t start dragging).
tip: In this page, the drag button uses the class .handle, so Handle is set to .handle.
Animation (ms)
Section titled “Animation (ms)”Animation controls how long the drag reorder animation runs (in milliseconds).
Keep it short (e.g. 150–250ms)
Use 0 to disable animation
Don’t over-animate data entry UIs
Actions and events
Section titled “Actions and events”Form Repeat includes actions for adding, removing, moving, duplicating, and resetting rows.
Common actions
Section titled “Common actions”Attach these actions to button click events via the Actions Picker.
repeat.add()
repeat.remove($index)
repeat.duplicate($index)
repeat.moveBefore($index) / moveAfter($index)
repeat.reset()
Common events
Section titled “Common events”Listen to lifecycle events like added/removed/moved when you need to trigger follow-up logic.
dmx-on:added
dmx-on:removed
dmx-on:moved (oldIndex/newIndex)
dmx-on:duplicated
dmx-on:updated
Preview mode: try the repeat controls
Section titled “Preview mode: try the repeat controls”Switch to Preview mode and use the controls to add/duplicate/remove rows. This shows how repeat actions drive the UI.
Preview mode
Section titled “Preview mode”Switch the page to Preview mode so you can interact with it like a real app.
Wait for Preview mode
Section titled “Wait for Preview mode”Wait for the page to finish switching modes.
Add item button
Section titled “Add item button”We’ll click Add item to append a new row (until max).
Duplicate a row
Section titled “Duplicate a row”Duplicate copies the row values into a new item.
Remove a row
Section titled “Remove a row”Remove deletes a row. When you hit min, the button disables via lineItems.canRemove.
Try editing row fields
Section titled “Try editing row fields”Edit the Name/Qty inputs, then duplicate a row to see the values carry over.
Reset back to initial items
Section titled “Reset back to initial items”Reset restores the original array so you can try again.
Return to Edit mode
Section titled “Return to Edit mode”Switch back to Edit mode to continue inspecting components.
Wrap-up
Section titled “Wrap-up”Next, connect the repeated fields to a Server Connect form for nested inserts/updates.
Next steps
Section titled “Next steps”Pick a related tour to continue.