When creating advanced forms, you may need to repeat a set of fields inside another repeating set of fields. This is often referred to as a nested repeat group, repeat group within another repeat group, or simply a nested loop. These structures are especially useful when you're working with data that has a hierarchical structure, such as teams within departments, students within classes, or tasks within projects.

Here is an example of a dynamic form structure with nested repeat groups:

• Project 1
  • Task 1.1
  • Task 1.2
• Project 2
  • Task 2.1
  • Task 2.2
  • Task 2.3

As you can see, a nested repeat group consists of:

• An outer loop (outer repeat group), which repeats based on one criterion.
• An inner loop (inner repeat group), which repeats within each instance of the outer loop.

For example, if you're collecting a departmental employee list, the outer loop represents departments, while the inner loop represents employees within each department.

In Survey Creator, the outer loop can be implemented using a Dynamic Panel, the inner loop can be configured using another Dynamic Panel or a Dynamic Matrix. In this guide, we'll show you how to build a form with nested dynamic panels to capture a departmental employee structure of a company using a nested loop.

The outer loop represents departments and is built upon a Dynamic Panel. Each panel entry displays a Single-Line Input field that collects the department name. The panel's title is dynamically constructed using a Panel title pattern that includes a dynamic value sourced from the department name input and a static value—the word "department".

Before a user enters a department name, the placeholder text [not set] will be displayed in the panel title, resulting in the following title: [not set] department.

After a user types a department name (e.g., "Engineering"), the panel title automatically updates to: Engineering department.

To create an outer repeat group, follow the steps below:

1. Add a Dynamic Panel to your form.

2. Assign it a user-friendly title and a panel name (ID) using the Panel title and Panel name properties.

   

3. Inside the Dynamic Panel, add a Single-Line Input for entering department names. Title it "Department name" and assign it the question ID department-name.

   

4. Select the Dynamic Panel and under the General category locate the Panel title pattern property.

5. Set the property to {panel.department-name} department, where panel is a keyword for accessing the question within its panel, department-name is an ID of the source question, and department is simply a static value.

   

6. Select the Department name question.

7. Under the Data category, locate the Default display value for dynamic texts property.

8. Enter [not set] or any other value you wish to display in the dynamic title before the source question receives a value.

   

This setup will display panel titles like so:

• Before input: [not set] department.
• After a user types a department name (e.g., "Engineering"): Engineering department.

To gather employee data within each department, we'll add an inner loop using a Dynamic Matrix. This matrix will have two columns: Name for the employee's name and Employment date for the date they were hired.

Each row in the matrix represents an individual employee. To make the form more manageable, we'll define a custom title format for each employee entry using the following syntax: Employee: {row.name}. Here, Employee: is a static value, while {row.name} is a path to the dynamic value of the matrix cell with a column ID name. If no name is entered yet, the placeholder [not set] is shown instead. So, until the respondent types a name, the title of the entry will be: Employee: [not set].

Once a respondent enters a name, like "Alice Johnson", the title will become: Employee: Alice Johnson.

To create an inner repeat group, follow the steps below:

1. Add a Dynamic Matrix inside the Dynamic Panel.

2. Assign it a title and a matrix name (ID).

3. Under Columns, configure two columns as follows:

   • First column: Column name: name, Column title: Name.
   • Second column: Column name: date, Column title: Employment date.

4. Click the Edit icon next to the Name column and do the following:

   • Change Cell input type to Single-Line Input.
   • Under Data, locate the Default display value for dynamic texts editor and enter [not set].
   

5. Click the Edit icon next to the Employment date column and perform the following customization:

   • Change Cell input type to Single-Line Input.
   • Set Input type to Date.
   

1. Switch to survey-level settings using the form tree menu.
2. Under the Navigation category, locate the Survey layout property.
3. Set the property to Show single input field per page.

1. Select the Dynamic Matrix.
2. Under General, locate Input field title pattern
3. Enter Employee: {row.name} to the property input field, where row is a keyword for accessing neighboring cells within the dynamic matrix, name is an ID of the source column, and Employee: is simply a static value.

This setup will display inner group titles like so:

• Before input: Employee: [not set].
• After a respondent enters a name, like "Alice Johnson": Employee: Alice Johnson.

To turn the form into a breakable nested repeat group, you can restrict how many entries can be added as follows:

1. Select the Dynamic Panel, and under the General category, locate the Maximum panel count setting.

2. Enter the number of entries you want to allow.

   

3. For the Dynamic Matrix, under General, locate the Maximum row count property.

4. Enter the number of entries you want to allow.

This ensures that once the maximum number of entries is reached, users won't be prompted to add more. Compare:

Before the maximum number of entries reached:

After the maximum number of entries reached:

To further enhance your understanding and implementation of nested dynamic panels in SurveyJS, consider exploring the following demos:

Loop and Merge

Breakable Loop

Nested Loops