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 entries 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.

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

If you need to reference an entry index in dynamic texts (titles, descriptions, etc.), use the {panelIndex} and {visiblePanelIndex} placeholders. They contain zero-based indexes of an entry 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 entry. 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 an entry question from outside the panel entry, use the entry's index: {my-dynamic-panel[0].my-question}.

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

A Dynamic Panel also allows you to add or delete an entry by calling the addPanel() and removePanel() methods. removePanel() accepts an entry 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 entries at startup. To do this, assign a number to the panelCount property.

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