This control extends the RowRepeater control and allows you to change data representation by switching between different views. Data can be displayed not only as rows but also as tiles that are adjusted to fill the entire horizontal space.

You can substitute the original repeater rendering with any external control defined in the externalRepresentation association by setting the external property to true.

This control provides the Search field that fires the search event when a user chooses Search. Note that no actual search occurs. An application developer can decide how to handle the event and what model manipulation to perform.

Responsive Layout

To set up the responsive layout, perform the following configuration steps:

  1. Set the responsive property to true for the current view in ViewRepeater or for a particular view in RepeaterViewConfiguration.
  2. Define the height of the ViewRepeater either in absolute values (for example, pixels or em) or in percent using the height property. Note that if you define the height of the ViewRepeater in percent, the height of the parent DOM element must be greater than zero. By default, the height property of ViewRepeater is set to 100%.
  3. Define the height of the ViewRepeator tiles in pixels using the itemHeight property for the current view in ViewRepeater or for a particular view in RepeaterViewConfiguration.
  4. Define the width of the ViewRepeator tiles in pixels using the itemMinWidth property for the current view in ViewRepeater or for a particular view in RepeaterViewConfiguration.

Note that if the showMoreSteps property value is greater than zero and the responsive property is set to true, content is displayed in tiles but the number of tiles does not change when the ViewRepeater is resized.

Keyboard Support

Use arrow keys to navigate through the options within the viewing, filtering, and sorting lists.



All examples below use the same data model. To make example code shorter and more readable the model code is externalized into this section.

ViewRepeater Without View Selector

If you do not need to provide an ability to switch between views you can set view parameters directly in the ViewRepeater and hide the view selector.

ViewRepeater with Its Own Rendering

You can define different views for the ViewRepeater by adding the RepeaterViewConfiguration items to the views aggregation.
RepeaterViewConfiguration defines how to render the control. You can specify all or several properties for the view. If needed, you can provide a new template for rows and tiles. If a property is not provided for the view, ViewRepeater uses a value defined in the previous view.
This example shows four views. The first two views have their own templates (small tiles and large tiles). The last two views do not have their own templates and use a template defined before.

Description of the Views

Each view can be represented in the view selector as a title, an icon or both. If neither an icon nor a title is provided, the default name "View #" appears.
In this example, the first view has neither a name nor an icon. The view is represented by a default name. The second view is represented by an icon. The third and fourth views are set to display both an icon and a title.

ViewRepeater with External Rendering

You can turn off rendering of the ViewRepeater and place another control instead. To do this, set the external property to true and define the replacement control using the externalRepresentation aggregation. You can use a table, a chart, or any other control you need. If the external control does not have a model, the ViewRepeater shares its own model by calling the setModel() method in the external control.

Combined Example

The example below displays the combined approach with two standard views and one view using the table. The sorters and filters are hidden in this example.

ViewRepeater API documentation
RepeaterViewConfiguration API documentation