Control Description
The Collection Screen Control allows you to manage and display Collection 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.
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.
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 permissions or ask your Administrator for assistance.
Follow these steps to add this control to the Screen:
Create a new Form-type or Display-type Screen or edit an existing one.
From the Controls Menu on the left, expand the Content Fields category, and then locate:
The Collection Record View icon for Display screens.
The Collection Record Control icon for Form screens.
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.
Collection View Control (Display screens)
Collection Record Control (Form screens)
Configure the control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Settings
This control has the following configurable settings in the Properties Panel:
Variable Panel Settings
Expand the Variable panel from the Properties Panel on the right to configure the following properties:
Collection
Select an available Collection 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)
Record ID
Specify which record from a Collection will be displayed in the screen. This setting supports mustache 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.
If the selected record does not exist, the following message displays:
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.
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, the changes are limited to viewing the record within the Edit nested Screen. This flexibility allows the control to accommodate various use cases, from displaying read-only data to enabling record modifications.
The Collection record displays as follows:
View: The nested screen that corresponds to the View Screen of the selected Collection.
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.
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. If this setting does not have an expression, then this control displays by default.
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.
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.
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.
CSS Selector Name
Enter the value to represent this control in custom CSS syntax when in Custom CSS 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.
Then, use this name in the Custom CSS feature to apply CSS styling to this control as follows:
[selector='Submit Form'] {
color: blueviolet;
}
See the following best practices regarding custom CSS in Screens: