Working with Subforms

Introduction

This guide will teach you how to use Subforms to create reusable components in your Forms.

If you're not yet familiar with Forms, please read Introduction and Form structure.

A Subform is identical in structure to a page — it has sections and elements — but it is designed to be reused across your form. Subforms are especially useful when you have repeating structures, such as a list of items with multiple fields, or a shared layout that appears on multiple pages.

You can embed a Subform in a page in two ways:

• Table element — renders the subform as a repeating row in a table
• Subform element — renders the subform inline in the page

Setting up the Ruleset

Creating the Ruleset and inputs

1. Create a new Ruleset named Order Form
2. Add an input named orderLines of type array
3. Each order line should have two fields: product (string) and quantity (number)
4. Add a rule totalItems that calculates the total number of items across all order lines
   • In the Expression editor, enter: orderLines.sum(line => line.quantity)
     This uses the built-in sum() function to loop over each order line and add up all quantity values.
5. Click Save.

Creating the Subform

1. Open the Form (or create a new one via + next to Forms)
2. Go to the Subforms tab
3. Click + to add a new Subform and name it Order Line
4. Open the Subform and add a section named Details
5. Add the following elements to the section:
   • Input > Text — Label: Product, Path: product
   • Input > Number — Label: Quantity, Path: quantity
6. Save the Ruleset

Adding the Subform to a Page

1. Open the first page and add a section named Order Lines
2. Inside the section, click Add element → Table
   1. Under Subform, select Order Line
   2. Set Property binding → Path: orderLines
   3. Click Add Column, add Product and Quantity
   4. Add button label, Add item
   5. Add submit actions, select Execute Ruleset

Add the element for the output:

1. Add a second section named Summary
2. Add an Output > Number element — Label: Total items, Path: totalItems
3. Save the Ruleset

Previewing the Form

1. Click the Preview button in the top right corner

You should now see a table with an + Add item button that allows you to add order lines. Each row uses the Order Line subform. The Total items output updates after executing the ruleset.

Using the Subform element

The Subform element renders a subform inline on a page — as a single, fixed instance. Use this when you want to display or edit one structured object, rather than a repeating list.

In the Order Form example, we used the Table element to display a list of order lines. We can extend the same form to also show a shipping address — a single structured object that fits perfectly as a Subform element.

Extending the Ruleset

1. Open the Order Form ruleset

2. Add the following inputs:

   • shippingStreet (string)
   • shippingCity (string)
   • shippingPostalCode (string)

3. Add a rule named fullShippingAddress that combines the fields:

   shippingPostalCode + " " + shippingCity + ", " + shippingStreet

   ↳ This produces a formatted address string such as "1234 AB Amsterdam, Main Street 1"

4. Click Save

Creating the Address Subform

1. Go to the Subforms tab in your form
2. Click + and name it Shipping Address
3. Open the subform and add a section named Address
4. Add the following elements:
   • Input > Text — Label: Street, Path: shippingStreet
   • Input > Text — Label: City, Path: shippingCity
   • Input > Text — Label: Postal Code, Path: shippingPostalCode, On change actions: Execute Ruleset
   • Output > Text — Label: Full address, Path: fullShippingAddress
5. Click Save

Adding the Subform element to the page

1. Open the first page of the form
2. Add a new section named Shipping
3. Inside the section, click Add element → Subform
4. Under Subform, select Shipping Address
   ↳ The subform renders inline — no property binding or columns needed, unlike the Table element
5. Click Save

Previewing the Form

1. Click the Preview button in the top right corner

Fill in the address fields — the Full address output updates immediately

Tips

• A Subform can be reused on multiple pages in the same form — define it once, embed it anywhere.
• Use the Subform element (instead of Table) when you want to show a single instance of the subform inline, rather than a list.
• Sections inside a Subform support the same conditional visibility and layout width settings as page sections.
• You can nest elements freely inside a Subform, including Alerts, Buttons, and Outputs.