---
title: "Loop Control"
slug: "loop-control"
updated: 2025-12-11T01:50:58Z
published: 2025-12-11T01:50:58Z
canonical: "docs.processmaker.com/loop-control"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.processmaker.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Loop Control

Use the Loop control to contain one or more [Screen](/v1/docs/screens) controls to duplicate the contained set of controls a specified number of times, thereby minimizing the design work to duplicate that set of controls in a Screen. Use the Loop control when the Request participant must enter multiple instances of the same set of information, each of which contain multiple components.

For example, use a Loop control when a university registrar's office must enter the following information for each new university student enrolling to the university:

| Information | Screen Control |
| --- | --- |
| First Name | [Line Input](/v1/docs/line-input-control) control |
| Last Name | Line Input control |
| Age | Line Input control |
| Sex | [Select List](/v1/docs/select-list-control) control |
| Housing Dormitory | Select List control |

During the in-progress Request, the Loop control displays the set of controls contained in the Loop control a specified number of times so that the university registrar's office may enter the same information for each new student from one Screen page. The [Submit Button](/v1/docs/submit-button-control) control to submit the Screen must be placed outside of the Loop control. Otherwise, a Submit Button control displays in each set of controls placed into the Loop control.

Do not place another Loop control inside the first Loop control.

## Use the `_parent` JSON Key to Reference Request Data from Controls in a Loop Control

The Loop control uses a unique JSON key available to any control placed within the Loop control to reference Request data. Controls that are placed into a Loop control for duplication are within a container and may only access another control's data that is in the same Loop control. Use the `_parent` JSON key in a control's settings placed within a Loop control to reference Request data outside of that Loop control.

> The `_parent` JSON key only applies to controls placed into a Loop control or [Record List](/v1/docs/record-list-control) control.

Consider the following examples:

- A Line Input control placed within a Loop control requires a default value to display from another Line Input control used during that Request of which its **Variable Name** setting is `Line_Input_Data`. From the Line Input control placed within the Loop control, enter the following into the [**Default Value** setting](/v1/docs/loop-control#default-loop-count): `{{ _parent.Line_Input_Data }}`.
- A Select List control placed within a Loop control requires its options to display from another Select List control's options used during that Request of which its **Variable Name** setting is `Select_List_Options`. While configuring the Select List control placed within the Loop control to [use Request data as its data source](/v1/docs/select-list-control#reference-request-data), enter the following into the **Options Variable** setting: `_parent.Select_List_Options`.

> This control is only available for the following Screen types:
> 
> - Display type
> - Form type
> 
> See [Screen Types](/v1/docs/screens#screen-types).

Watch the following product tour to learn how to use a Loop control.

[Embedded content](https://app.supademo.com/embed/ptbEXMtHAxeR6q3Gv99wh)

For a documented example of using the Loop control, see [Loop and File Upload Controls to Limit Uploaded Files](/v1/docs/example-loop-and-file-upload-controls-to-limit-uploaded-files).

---

## Add the Control to a Screen

**Permissions**

Your user account or group membership must have the following permissions to design a Screen unless your user account has the **Make this user a Super Admin** setting selected:

- Screens: Edit Screens
- Screens: View Screens

See the [Screens](/v1/docs/permission-descriptions-for-users-and-groups#screens) permissions or ask your Administrator for assistance.

Follow these steps to add this control to the [Screen](/v1/docs/screens):

1. [Create a new Form-type or Display-type Screen](/v1/docs/create-a-new-screen) or [edit an existing one.](/v1/docs/manage-screens#edit-a-screen)
2. From the Controls Menu on the left, expand the **Content Fields** category, and then locate the **Loop** icon![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/28383563-5e3a-4990-8fca-30b82a5b3443.png).
3. Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/84012e6e-dc8f-4327-ac0b-a1684ba0e9a7.png)
4. Configure the Loop control. See [Settings](/v1/docs/page-navigation-control#inspector-settings).
5. Drag and place the Screen control(s) into the Loop control that you intend the Request participant to enter information each time the Loop control repeats. As a best practice, do not do the following:

See [Control Description](/v1/docs/loop-control#control-description) for an example.
  - Do not place a [Submit Button](/v1/docs/submit-button-control) control inside the Loop control.
  - Do not place another Loop control inside the first Loop control.
6. Configure each control placed into the Loop control. If a control placed into the Loop control requires to use Request data, use the` parent` JSON key. See [Use the](/v1/docs/loop-control#use-the-parent-json-key-to-reference-request-data-from-controls-in-a-loop-control) `parent` JSON Key to Reference Request Data from Controls in a Loop Control.
7. Validate that the control is configured correctly. See [Validate Your Screen](/v1/docs/validate-and-publish-a-screen#validate-a-processmaker-screen).

Below is a Loop control containing two controls, repeating twice.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/6a44496b-1b9b-4e1b-a701-5475d9cc5c4e.png)

---

## Settings

The Loop control has the following configurable settings in the Properties Panel:

- [**Configuration** panel](/v1/docs/loop-control#configuration-panel-settings)
- [**Advanced** panel](/v1/docs/loop-control#advanced-panel-settings)

---

### Configuration Panel Settings

Expand the **Configuration** panel from the Properties Panel on the right to configure the following properties:

#### Data Source

*Make note of* [*best practices*](/v1/docs/screen-design-best-practices) *when configuring a Loop control that contains a Select List control. If the Select List control references a* [*JSON array*](/v1/docs/json#json-arrays) *from a data source, configure the Select List control to reference the* [*JSON object*](/v1/docs/json#json-objects) *containing the JSON array and not its values. Then duplicate the JSON array in the Loop control. See* [*Duplicate the JSON Array in a Select List Control Used in a Loop Control*](/v1/docs/screen-design-best-practices#duplicate-the-json-array-in-a-select-list-control-used-in-a-loop-control)*.*

*This setting is not available in Display-type Screens since the content in these Screens is not editable.*

Select whether to create a new array of JSON objects designed from Screen controls within the Loop control or to reference an existing JSON array of objects:

- **New array of JSON objects designed from Screen controls**

Select the **New Array of Objects** option from the **Data Source** setting to place Screen controls into the Loop control while in Design mode.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/6911d09b-53d1-4743-b3b7-3301f990e0ca.png)

When this option is selected, the [**Default Loop Count** setting](/v1/docs/loop-control#default-loop-count) displays to indicate how many times to repeat the control(s) that the Loop control contains. See a [design example](/v1/docs/example-loop-and-file-upload-controls-to-limit-uploaded-files).
- **Existing JSON array of objects**

Select the Existing Array option from the Data Source setting to reference a JSON array from the Request data that the Loop control contains.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/3ef71974-95ac-4493-88ce-77df4ca34206.png)
- When this option is selected the **Default Loop Count** setting does not display since the JSON array specifies how many times to repeat the control(s) that the Loop control contains.

#### Variable Name

Edit the default **Variable Name** setting value for this control if necessary. The **Variable Name** setting value represents data in this control during Requests. Ensure that the **Variable Name** setting value is a unique name from other controls in this [Screen](/v1/docs/screens) and contains at least one letter. This is a required setting.

Use the **Variable Name** setting value in the following ways:

- Reference this control by its **Variable Name** setting's value. The **Data Preview** panel in Preview mode corresponds with the Loop control's **Variable Name** value. In the example below, `LoopControl` is the **Variable Name** setting's value.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/0582c894-4635-4bc4-932b-d88818866a81.png)
- Reference this control's value in a different Screen Builder control. To do so, use [mustache syntax](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/mustache.5(8).html) and reference this control's **Variable Name** value in the target control. Example: `{{ LoopControl }}`.
- Reference this value in [**Visibility Rule** setting expressions](/v1/docs/loop-control#visibility-rule).

See [best practices](/v1/docs/screen-design-best-practices#naming-request-variables-for-processmaker-screen-controls) when editing a Request variable name.

#### Default Loop Count

*This setting is not available in Display-type Screens since the content in these Screens is not editable.*

Enter the number of times to repeat the control(s) that the Loop control contains. **3** is the default value.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/d4144fe2-e676-4ed2-8db7-7eeca6534bff.png)

#### Allow Additional Loops[](/docs/loop-control#allow-additional-loops)

*This setting is not available in Display-type Screens since the content in these Screens is not editable.*

Select to allow additional loops during in-progress Requests if necessary.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/b05608f9-af56-4ce9-bfc1-d7e4104c921a.png)

If this setting is selected, then the **Add Loop** icon![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/d5f78737-cd46-4e77-bc0c-3826b9fe614a.png)displays below the looped container of controls that allows the Request participant to add a new loop for the Task. See a [design example](/v1/docs/example-loop-and-file-upload-controls-to-limit-uploaded-files).

---

### Advanced Panel Settings

Expand the **Advanced** panel from the Properties Panel on the right to configure the following properties:

#### Visibility Rule[](/docs/loop-control#visibility-rule)

Specify an expression that indicates the condition(s) under which this control displays. See [Expression Syntax Components](/v1/docs/feel-expression-syntax#show-or-hide-screen-builder-controls). If this setting does not have an expression, then this control displays by default.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/99de09e4-69b2-47cd-bc4e-c236e462003e.png)

For example, this control displays if the variable value **tip** is **1**. For a detailed example of the Visibility Rule setting, see [Show or Hide Controls Based on Button Selection](/v1/docs/example-show-or-hide-controls-based-on-button-selection).

Note the following regarding how to use visibility rules:

- To make this control hidden until another control contains a value, enter the **Variable Name** setting value of that control to this control's **Visibility Rule** setting.
- [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings).

#### Device Visibility[](/docs/loop-control#device-visibility)

Select on which device types this control displays:

- **Desktop:** The control displays only on desktop devices. Enable the **Show for Desktop** toggle key.
- **Mobile:** The control displays only on mobile devices. Enable the **Show for Mobile** toggle key.
- **Both:** The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/7bf853b0-bdff-40fc-9969-ccdf340e6858.png)

#### CSS Selector Name[](/docs/loop-control#css-selector-name)

Enter the value to represent this control in custom CSS syntax when in [Custom CSS](/v1/docs/custom-css#add-custom-css-to-a-processmaker-screen) mode. As a best practice, use the same **CSS Selector Name** value on different controls of the same type to apply the same custom CSS style to all those controls.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/5f3e741b-e020-4b88-bb5a-9932cf2b2bd1.png)

Then, use this name in the [Custom CSS](/v1/docs/custom-css#apply-css-to-specific-processmaker-screen-controls) feature to apply CSS styling to this control as follows:

```plaintext
[selector='Submit Form'] {
    color: blueviolet;
}
```

See the following best practices regarding custom CSS in Screens:

- [Editing a CSS name to represent this control in custom CSS syntax](/v1/docs/screen-design-best-practices#css-selector-naming-best-practice)
- [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings)