Dynamic Panel with Repeating Group of Fields

If you want to set up a form with a group of repeating fields, for example, to list respondents' qualifications or places of work, use a Dynamic Panel element. It enables respondents to add a fresh copy of the same form fields on the fly.

To add a Dynamic Panel to your survey or form, define an object with the type property set to "paneldynamic" and add it to the elements array. Within this object, specify Dynamic Panel's title and a unique name that identifies the panel. Optionally, you can specify a description to place under the title.

A Dynamic Panel contains inner panels with duplicated content. This content is based on a template that you can configure using the templateElements array. Populate this array with configuration objects of survey questions and panels as shown in this demo.

Inner panels also can display titles and descriptions based on templates. Use the templateTitle and templateDescription properties to specify these templates.

If you need to reference a panel index in dynamic texts (titles, descriptions, etc.), use the {panelIndex} and {visiblePanelIndex} placeholders. They contain zero-based indexes of a panel in the panels and visiblePanels array, respectively.

When you implement an expression or configure dynamic text, you may need to access questions within the same panel. To do this, use the panel prefix: {panel.my-question}. Refer to any expression in this demo for an example.

If you want to access a panel question from outside the panel, use the panel's index: {my-dynamic-panel[0].my-question}.

Respondents can add and delete panels at runtime. If respondents should confirm deletion, enable the confirmDelete property. If you want to disallow respondents to add and delete panels, disable the allowAddPanel and allowRemovePanel properties.

A Dynamic Panel also allows you to add or delete a panel by calling the addPanel() and removePanel() methods. removePanel() accepts a panel index or PanelModel instance as an argument. Before calling these methods, use SurveyModel's getQuestionByName(name) method to access a Dynamic Panel:

import { Model } from "survey-core";

const survey = new Model(json);
const panel = survey.getQuestionByName("my-dynamic-panel");

You can also add one or more identical panels at startup. To do this, assign a number to the panelCount property.

If you want to specify the minimum or maximum number of panels users can add, set the minPanelCount and maxPanelCount properties. On reaching the limit, Dynamic Panel automatically hides buttons that add or delete panels. In this demo, a Dynamic Panel disallows you to add more than 10 panels.