---
title: "Dynamic Panel"
slug: "dynamic-panel"
updated: 2025-09-18T16:05:08Z
published: 2025-09-18T16:05:08Z
canonical: "docs.processmaker.com/dynamic-panel"
---

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

# Dynamic Panel

The **Dynamic Panel** is designed to simplify complex forms by displaying one item from an array at a time within a modular two-panel interface. This layout allows designers to create interactive forms where one side of the screen displays a list, and the other side shows detailed content for the selected item.

By focusing on a single item at a time, the Dynamic Panel reduces clutter, improves clarity, and enables users to confidently evaluate, update, and finalize decisions. Interfaces built with this feature adapt to user actions, reveal only relevant content, and guide users through multi-step workflows in a structured way.

#### Use Cases

The Dynamic Panel is ideal for scenarios such as:

- Reviewing a list of applications or requests with expandable details
- Approving pending items with supporting information
- Performing side-by-side comparisons or structured decision-making

#### How It Works

The Dynamic Panel provides a two-column layout that connects a list of items to a detailed view of one item at a time.

- **Left Panel**: Displays a list of items, such as invoices numbers, dates, or course titles.
- **Right Panel**: Displays detailed information and editable fields for the item selected in the left panel.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Dynamic Panel Use Case.png)

The layout is built in the Screen Builder using standard controls, variables, and scripting. Data flows between the two panels using index variables and custom handlers, ensuring the correct details are displayed whenever a user selects an item from the list.

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

---

### Step 1: Add a Multicolumn Control

To support the two panel layout, first add a Multicolumn control.

1. [Create a new Form-type](/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 **Multicolumn/Table** icon.
3. Drag and drop the control in the screen. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Add Multicolumn Control.png)

---

### Step 2: Complete the Left Panel

Follow these steps to build the list in the left panel of the screen:

1. Add a [Loop control](/v1/docs/loop-control) to act as an array container for all related controls. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Loop for a Dynamic Panel.png)
2. In the Loop **Variable Name**, enter `courses`.
3. Check **Allow additional loops**.
4. Within the loop:
  - Add one or more controls as needed based on your form design.
  - Add **Submit Buttons** for actions like **Edit** or **Remove**, then change their type to **Regular Buttons**.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Regular Button Setting.png)
5. Below the Multicolumn control, add a Line Input to capture the current index of the loop. This Line Input should use the same **Variable Name** as the `index` used in your loop logic, ensuring it reflects the selected item’s position within the array.

---

### Step 3: Add a Dynamic Panel

Follow these steps to add to add a Dynamic Panel control:

1. From the Controls Menu on the left, expand the **Content Fields** category, and then locate the **Dynamic Panel** icon. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Dynamic%20Panel%20Icon.png)
2. Drag and drop the control in the screen.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Dynamic Panel Settings in the Screen.png)
3. Add the necessary controls to display data from the selected item in the loop.
4. Ensure that the **Course** field in the left panel and the **Name** field in the Dynamic Panel share the same variable name. This ensures that when the **Edit** button is clicked, the correct data is displayed and updated.
5. Open the **Configuration** settings from the **Properties Panel** on the right side, and configure the following options:

For more details about these settings, refer to the following expandable sections below.

#### 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. This is a required setting. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Variable Name for a Dynamic Panel.png)

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 Dynamic Panel control's **Variable Name** value. For example, `courses` is the **Variable Name** setting's value, which is an array of objects.
  - 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: `{{ courses }}`.
  - Reference this value in [**Visibility Rule setting expressions**](/v1/docs/dynamic-panel#advanced-panel-settings).

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

#### Index Name

Specify which record from an array will be displayed within a Dynamic Panel. This setting is essential for enabling navigation across different items in a loop. It supports **mustache syntax**, allowing you to reference dynamic values from request data. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Index Name for a Dynamic Panel.png)

For example, use `index` to update the content shown in the right-hand panel based on the selected item from a list on the left. If not using a variable name in brackets, take into account that an array index start from `0` .

By configuring **Index Name**, designers can:

  - Control the record shown in the dynamic panel.
  - Create responsive two-panel interfaces that react to user selections.
  - Dynamically update views without requiring custom routing or additional screens.

#### Empty State Message[](/docs/dynamic-panel#allow-additional-loops)

Defines what is displayed in the dynamic panel when there is no data available to show. This message acts as feedback for users when no record is selected or when the configuration is incomplete—especially when the **Index Name** setting has not been defined. Default message is the following: ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Empty State Message - Dynamic Panel.png)

This field supports:

  - **HTML formatting** for rich presentation. (e.g., `<p style="color:gray;font-size:14px;">No matching data found. Please configure an <strong>Index Name</strong> for this dynamic panel.</p>`)
  - **Mustache syntax** (e.g., `{{variable}}`) for dynamic data placeholders.
  - In the **Variable Name**, enter `courses`.
  - In the **Index Name**, enter `index`.

---

### Step 4: Configure the Click Handler

Add JavaScript code to handle actions in regular buttons. Follow these steps to configure the **Click Handler** for a button control:

1. In the left panel, select the **Edit** and **Remove** button. The **Variable** settings display at the right-side of the Screen designer.
2. Expand the **Configuration** panel. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Click Handler Configuration.png)
3. Enter the following JavaScript code for the **Edit** button:

```javascript
// Get the index of the current course in the loop
const index = data.courses.indexOf(this)

return {
    _root: {
        index
    }
}
```

What this code is for:
  - `data.courses` is a list (an array) of all the courses.
  - `this` refers to the course currently being shown on screen.
  - `indexOf(this)` checks where in the list the current course is located.
  - The result is a number (like 0, 1, 2, etc.) representing that position.
  - This number is saved in a variable called `index`.
  - Finally, it sends that `index` value to the `_root`, which makes it available in the screen and especially useful for a Dynamic Panel that depends on knowing "which item are we showing?"
4. Enter the following JavaScript code for the **Remove** button:

```javascript
const index = data.courses.indexOf(this)
const courses = data.courses;
courses.splice(index, 1);

return {
    _root: {
        courses
    }
}
```

What this code is for:
  - `data.courses` is the full list of courses currently available.
  - `this` refers to the course the user is currently interacting with (maybe the one they clicked on).
  - `indexOf(this)` checks where that course is located in the list and stores that position in the variable `index`.
  - `courses.splice(index, 1)` means:
    - Go to that exact position in the list.
    - Remove **1** item from that spot.
  - The updated list—*without* the removed course—is returned so the screen can refresh and show the new version.

---

### Step 5: Configure Advanced Settings (Optional)

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

#### Visibility Rule[](/docs/dynamic-panel#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/dynamic-panel#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/dynamic-panel#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)