Dynamic Add Fields

Dynamic add fields let a user add multiple repeating rows of related data inside a form, without needing to leave the page or open child records manually. They power any form with a “+ Add another” button — line items, attendees, contacts, dependants, attachments — wherever the user might need one or many.

Where They're Used

• Invoices and quotes: Each line item is a row with product, quantity and price.
• Event registrations: Each attendee row captures name, dietary requirement and ticket type.
• Travel bookings: Each traveller row captures passport details and meal preference.
• Contact forms: Each emergency contact row captures name, relationship and phone.

How They Differ from Sub-Tables

A dynamic add field is rendered inside the parent form. The user fills in everything on one page and saves it all together. By contrast, a related child table is opened as a separate edit dialog. Dynamic add fields are better when:

• You expect a small number (typically 1–20) of repeats.
• The repeating fields are simple — not themselves complex forms.
• You want the user to see and confirm all rows at once before saving.

Behaviour Highlights

• Rows can be reordered by drag-and-drop (if enabled).
• A minimum and maximum number of rows can be enforced (e.g. at least 1 line item, no more than 50).
• Cross-row calculations are supported — e.g. a total field outside the repeater that sums quantity × price across all rows.
• Validation is per-row: each row must pass its own field requirements before the form submits.

Tip: If your repeater would have 30+ rows or each row has 10+ fields, switch to a paginated child table — performance and usability both improve.

This article shows step-by-step how to add a dynamic-add-field group to a form. The same pattern works for invoices, registrations, contact lists and anywhere else you want repeating rows.

Step-by-Step

1. In the form builder, click Add Field and choose Dynamic Add Group.
2. Give the group a label (the user-visible heading), an internal name (the database column or array key) and a helper text if useful.
3. Define the child fields. Inside the group, add the fields that make up one row — for an invoice that's typically Product, Quantity, Unit Price.
4. Configure the row controls:
   • Min rows: at least how many rows must be present.
   • Max rows: hard cap on rows.
   • Add row label: the button text (e.g. “Add line item”).
   • Reorder enabled: allow drag-handle to reorder rows.
   • Delete confirmation: ask before removing a row that has data.
5. If you need calculations, add a field outside the group with formula SUM(line_items[*].quantity * line_items[*].unit_price).
6. Save the form and test in preview.

Storage Pattern

Behind the scenes, rows are stored either as JSON in a single column (simple cases) or as child records in a related table (when you want to query them individually).

Worked Examples

• Quote builder: Min 1, max 100 line items. Auto-calculate subtotal, tax and grand total. Reorder enabled so the salesperson can group related items.
• Conference registration: Min 1, max 5 attendees. Each row captures name, dietary needs, and a select for workshop choice. Reorder disabled (order doesn't matter).
• School trip consent form: Min 1 child, max 4 children. Each row has child name, year group, and a medical-notes textarea.

Note: Calculated totals are recomputed client-side on every change, but always re-validated on the server before save. Don't rely on JS-only totals for billing — verify in the server-side trigger.