Repeater Control
Overview
A Repeater Control is used to display a collection of data items in a repeated, consistent format, such as a list. It binds to a data source (an array) and renders each item based on the provided data. Unlike lists displayed by the Dataset Views, the Repeater Control is added as part of the layout along with other controls on the page.
Repeater Control example in the Administration application → User Interface → Localization → Localization String Preview
This allows customization of how each item is presented, using a flexible layout rather than a rigid structure.
Unlike the List Control, the Repeater Control has fewer configurable options: no paging, total number of items in the list, restricting the number of items shown on one page, or filtering items in the list by specified text are not available. The Repeater Control displays all available items on one page, suggesting scrolling for navigation instead of paging, and additionally allows ordering the shown items in a predefined way within the control.
Compared to Grid Controls, which typically present data in strict row-column formats, the Repeated Control provides greater layout flexibility. Each repeated item can be structured according to your needs, allowing for more complex and customized item presentations beyond simple table rows.
Supported Layout types
By default, the Repeater Control is available for the following types of Layouts:
- Dialog
- Wizard
- Preview
- Landing Page
Repeater Control Configuration
To configure the Repeater Control in the Layout Designer, open the necessary layout in the Layout Designer and search for the data in the Data Model that is of the array type. Drag & drop the array on the canvas of the edited layout, from the suggested controls select Repeater Control:
Proceed with configuring the following fields:
Model
- Entities: selected array that is used as a source of the data to show in the repeater control
- Order by: allows ordering the items by one of the properties from the array. Possible options:
- not set (default)
- property of the array: click on the field to see a list of properties suggested from the array specified in the Entities field
- Order Direction: direction in which the data will be ordered and displayed in the repeater control. Possible options:
- not set (default)
- ascending
- descending
Common
- Help: help icon and tooltip for information displaying as:
- Not set (default): help icon is not displayed
- Model: displayed data is retrieved from a specified data model field
- Localizable: plain text specified for each available in the system locale. Shows appropriate localized help message according to the currently selected by the user language profile settings
- Static Value: manually entered text displayed in a pop-up window. The text of the prompted message is edited in a standard text editor and can include plain text, headings, links, and lists
- Name*: technical name of the control descriptor added to the layout
Appearance
- Hide item borders: by default, it is not set, and the items are shown in the layout with borders as follows
Item boarders are shown
- Static Value:
- disabled (default): the items are shown in the layout with borders
- enabled: the items are shown in the layout without borders, as follows
Item boarders are hidden
- Model: select from the suggested boolean Data Model properties
- Static Value:
- Direction:
- Vertical (default): the data is shown in rows
- Horizontal: items of the displayed list are shown as columns
- Visibility: defines the conditions when the control is displayed on the layout. Possible configuration options
- Static value: check-box options
- selected (True): displaying on the page layout template is enabled
- disabled (False): the control is not shown on the page layout template
- Model: select the source of the data model
- Static value: check-box options
- Margin: set property creates additional blank space outside of the borders of the element containing the control. Set control's margin offset in CSS format: '10px', '1rem', '1rem 2rem' (top-bottom, right-left) or '1px 2px 3px 4px' (top, right, bottom, left).
- Padding: the property is used to generate additional blank space around the control's content, inside of the borders of the element containing the control. Set control's padding in CSS format: '10px', '1rem', '1rem 2rem' (top-bottom, right-left) or '1px 2px 3px 4px' (top, right, bottom, left).
- Flex option: intended to adjust the width of the control automatically. Possible options:
- Fixed (default): control's width is static
- Flex: control's container width is responsive and adjusts automatically according to the user device's screen resolution
Device Visibility
This property allows improving user experience by managing device visibility options. For instance, the control can be hidden from the preview when it is too large and cannot fit the small screen of a mobile device.
The application checks the user device's screen resolution and displays or hides the control preview based on the selected checkbox options for Desktop, Tablet, and Mobile devices.
By default, the control is shown on all types of devices.
Example
After the Repeater Control configuration is done, add other necessary controls inside the Repeater control and configure them. Repeater Control serves as a template and defines how the data will be shown within a specified area of the page layout:
The Repeater Control is used in the following area of the Subscribe to Report wizard:
See also, Subscribe to Dashboards and Reports: My Subscriptions.