Repeater

Introduction

The Repeater component is a special component that is responsible for displaying an array of repeating components. For example, you have a hotel booking form in which the user must specify the number of guests and specify their full names. At the same time, the number of names entered changes dynamically, depending on the number of residents. The Repeater component is just made for such cases.

When you work with Repeater, the data available to you in actions and computed properties differs from the data in the usual form. In general, you have the following properties (see ActionEventArgs and IFormData):

• data: data of the current form, for example, form data or repeater item data;
• parentData: parent form data, such as the data of the form's parent repeater item, or form data if the form is not in a repeater;
• rootData: the all form data;
• index: index of the current repeater item, if the component is inside the repeater;

Below is a picture explaining the data for the first level repeater:

For a level two repeater:

See this guide for more information on using the Repeater.

Main properties

The following general properties are available within the Main tab:

Name	Type	Description
Item Render When	string	Works like the Render When property, but hides or shows a specific element from the array
Value	array	Data for the component, is an array of objects

At the bottom of the Main properties menu, you can find additional options:

• Render When: Provides conditional rendering for your calendar as described in the corresponding chapter.
• HTML attributes: Allows you to provide custom HTML attributes for your form.

Style properties

These are properties that allow you to customize the placement of components within the Repeater:

• Component > Direction: Defines how components are placed within a single Repeater element (e.g., column, row, etc.).
• Component > Item gap: Defines the gap between components within a single Repeater element.
• Wrapper > Direction: Defines how the elements of the Repeater are arranged (e.g., column, row, etc.).
• Wrapper > Item gap: Defines the gap between the Repeater elements.
• Wrapper > Class Name: Add a class name for your component for the subsequent styling if necessary.