--- title: "Collection Record Control" slug: "collection-record-control" updated: 2025-12-19T22:42:14Z published: 2025-12-19T22:42:14Z canonical: "docs.processmaker.com/collection-record-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. # Collection Record Control The **Collection Record Control** allows you to manage and display [Collection](/v1/docs/collections) records in screens. Collection records are displayed in a nested screen and any changes made are reflected back in the Collection as well. These enhancements streamline screen design by making Collection data easily accessible, editable, and well-organized across screens. > [!NOTE] > This control is only available for the following Screen types: > > - Display screens: Limited to viewing Collection data. > - Form screens: Allows view and edit Collection data. > > See [Screen Types](/v1/docs/screens#screen-types). [Embedded content](https://demos.processmaker.com/embed/cm3so0hdb0pnw5a3tywz29145?embed_v=2) --- ## 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: 1. The **Collection Record View** icon ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Collection Record View Icon.png) for Display screens. 2. The **Collection Record Control** icon ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Collection Record Control Icon.png) for Form screens. 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. 1. **Collection View Control (Display screens)** ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Collection View Control.png) 2. **Collection Record Control (Form screens)** ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Collection Record Control.png) 4. Configure the control. See [Settings](/v1/docs/fall-2024-collection-record-control#settings). 5. Validate that the control is configured correctly. See [Validate Your Screen](/v1/docs/validate-and-publish-a-screen#validate-a-processmaker-screen). --- ## Settings This control has the following configurable settings in the Properties Panel: - [**Variable** panel](/v1/docs/file-download-control#variable-panel-settings) - [**Advanced** panel](/v1/docs/file-download-control#advanced-panel-settings) --- ### Variable Panel Settings Expand the **Variable** panel from the Properties Panel on the right to configure the following properties: #### **Collection** Select an available [Collection](/v1/docs/fall-2024-collections#view-collections) from the list. Empty Collections are not available for selection. - Click **Open Edit Screen** to see the edit screen for this Collection. (available in Form screens only) - Click **Open View Screen** to see the view screen for this Collection. (available for Display screens) ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Collection Setting.png) #### **Record ID** Specify which record from a [Collection](/v1/docs/records-in-a-collection) will be displayed in the screen. This setting supports [mustache](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/mustache.5(7).html) variables, enabling dynamic selection of records based on case data. By configuring the **Record ID**, users can tailor the control to display specific records, ensuring precise data handling in cases and requests. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Record ID Setting.png) If the selected record does not exist, the following message displays: ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Record ID not Available.png) #### **Mode** Configure the control for either viewing or editing Collection data. Select from one of the following options: - In **View Mode**, users can only view the record details without making changes. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Mode Collection Record.png) - In **Edit Mode** (available only in form screens), users can update data if the **Update collection on submit** setting is enabled. When enabled, this option saves changes directly to the Collection. If not enabled, changes are limited to viewing the record within the Edit nested Screen, but the data is saved in the nested screen's variable and can be reviewed in the [Request data](/v1/docs/editable-request-data) after submitting. This flexibility allows the control to accommodate various use cases, from displaying read-only data to enabling record modifications. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Edit Mode - Collection Record Control.png) The Collection record displays as follows: - **View**: The nested screen that corresponds to the View Screen of the selected Collection. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/View - Collection Nested Screen(1).png) - **Edit**: The nested screen that corresponds to the Edit Screen of the selected Collection. Typically, edit screens of collections include a submit button. However, since this is a nested screen, the submit button will not be shown. Participants can use the submit button in the main screen to submit the task. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/Edit - Collection Nested Screen(1).png) --- ### Advanced Panel Settings Expand the **Advanced** panel from the Properties Panel on the right to configure the following properties: #### 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/b499b31f-336c-4ece-ba21-78eb7fb0c023.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 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/b6ab54bd-2d8c-4d7a-9ec7-1750791fcf0e.png) #### 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/8b3e7ca5-09fc-48de-a942-99a8b11d3ad4.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)