---
title: "Perspective - Flex Repeater"
description: "The Flex Repeater component lets you easily create multiple instances of views for display in another view."
---

# Perspective - Flex Repeater

> The Flex Repeater component lets you easily create multiple instances of views for display in another view.

![](image2020-2-24_15-11-13.png)

**Component Palette Icon**:  

![](2019-05-07_10-02-31.png)

## Description

When first dropped on a view, the Flex Repeater looks like any other empty container. Set the **path** to the component that you want to create multiple instances of, and then under **instances** add an object for each instance that you want to create. The **object** will usually contain one or more parameters, including the instance's own **index**, that will be passed into that particular instance. As a side note, overwriting the index parameter is not recommended.

The flex repeater is functionally very similar to the [Flex Container component](appendix/components/perspective-components/perspective-container-palette/perspective-flex-container/perspective-flex-container.md). Both components are based off of the [CSS flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox), and both abide by similar rules in regards to how child objects are positions. However the Flex Repeater differs from the contain in two notable ways:

1. The Flex Repeater can only have embedded views as direct children, where as the Flex Container can have any type of component.
2. The Flex Repeater can create instances of views from the runtime, by adding additional elements to the **instances** array. The flex container does not have anything resembling this functionality.

## Properties

Most Properties have binding options. For more information on Bindings, see [Types of Bindings in Perspective](ignition-modules/perspective/working-with-perspective-components/bindings-in-perspective/bindings-in-perspective.md).
This section only documents the Props Category of properties. The other Categories are described on the [Perspective Component Properties](ignition-modules/perspective/working-with-perspective-components/perspective-component-properties.md) page.

| Name    | Description   | Property Type  |
| ------- | ------------- | -------------- |
| path  | Path to the desired view to display.  If a path is present in the path property field, an Open View ![](image-2023-6-13_6-29-5.png) icon will appear that will navigate directly to the view when clicked.   | value: string  |
| instances | Number of instances of the view that you want to display in the container. Each instance can contain an instanceStyle and instancePosition property. Changing these properties will override any styles and position settings applied by elementStyle and elementPosition.This is where a value property can be added that matches up with a parameter in the view to pass in a value.**instanceStyle**: Sets a style for this instance of a view. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).**instancePosition**: Position properties such as grow, shrink, or basis that would apply to all instances. As of 8.1.4 a dropdown list of parameters is available when the view being displayed has view parameters. This makes it easy to add, delete, or synchronize parameters from that view. | array  |
| direction | Direction of layout of repeated views. Options are row, row-reverse, column and column-reverse.  | value: string  |
| wrap | Whether the container should allow instances to wrap to the next line if space has run out. Options are nowrap, wrap, wrap-reverse.   | value: string  |
| justify   | Adjusts placement of instances along the main axis when there is extra space, which may be used to fill areas before, after, or in-between: flex-start, flex-end, center, space-between, space-around, space-evenly.    | value: string  |
| alignItems | Adjusts placement of instances along the cross axis when there is extra space: flex-start, flex-end, center, baseline, stretch.   | value: string  |
| alignContent | Adjusts alignment of wrapped content when there is free space in the cross axis: flex-start, flex-end, center, space-between, space-around, stretch.   | value: string  |
| useDefaultViewWidth   | Use view's default width instead of adjusting based on the content's width.  | value: boolean |
| useDefaultViewHeight  | Use view's default height instead of adjusting based on the content's height.  | value: boolean |
| elementStyle          | Sets a style for this element. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md). | object         |
| elementPosition| Sets a position for this element. Element position properties that apply to all instances, unless overridden by instancePosition**grow**: **grow** and **shrink** control the way that a component responds to changes in the flex container's width or height. For columns **row** controls what happens when additional space is available. Value is numeric.**shrink**:	**shrink** controls what happens when the component does not have enough space to fulfill its basis. Value is numeric.**basis**:	Controls the default size of a component along the flex repeater's direction. You can enter the value in pixels (e.g. 75px), as a percentage of the total length of the container (e.g. 50%), or you can use auto. All components configured to auto will equally share the available space in the container. Value is numeric.| object|
| loading  | View loading settings.  **order**: Controls when the embedded view loads: alongside the parent view loading (`with-parent`), or after the parent view finishes loading (`after-parent`). Default is with-parent.  Generally speaking, `with-parent` is more efficient for the browser, but in some cases can feel slower overall. Alternatively, `after-parent` is generally less efficient for the browser and can add to the overall load time. However, since it allows the parent view to load first, `after-parent` may feel quicker since the topmost layer of views get started up sooner. Value is boolean.| object         |
| style  | Sets a style for the Flex Repeater. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md). **classes**: Sets a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md) for the Flex Repeater.**overflow**: Options are auto, visible, scroll, or hidden.	Value is string. | object         |

## User Interface
When a Flex Repeater is deep selected,  there is an interface at the top of the Perspective Property Editor that enables you to set the container's properties. Functionality is similar to that of the Flex Container component. See [Perspective - Flex Container](appendix/components/perspective-components/perspective-container-palette/perspective-flex-container/perspective-flex-container.md).

![](2019-07-31_13-32-55.jpg)

## Component Events

The [Perspective Event Types Reference](appendix/reference-pages/perspective-event-types-reference.md) page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The [Component Events and Actions](ignition-modules/perspective/working-with-perspective-components/component-events-and-actions.md) page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

## Example 

![](image2019-4-24_13-27-26.png)

1. In order to use the Flex Repeater, you need a view that will be shown inside the repeater. To do this, we made a new View with a Coordinate layout called "RepeatedView".

    1. In the Project Browser, select the new View
    1. In the Property Editor. Under **PARAMS**, select **Add View Parameter**, select a property type of **Value**.
    1. Rename the parameter from "key" to "labelText".
    1. Select the **root** container for the view, and set the **mode** property to "percent".

2. Add a Label component to the view, and configure a property binding on its **text** property to the **labelText** parameter we just created. We set the component's **alignVertical** property to "center", and we stretched the label to fill the entire view. We also configured some styling on the Label:

    |Style Category| Value|
    |--|--|
    |borderStyle|	solid|
    |fontSize|	30px|
    |textAlign	|center|

3. Now we can configure our Flex Repeater. Drag a Flex Repeater component onto the view, then set the following properties:

    |Style Category| Value|
    |--|--|
    |path	|RepeatedView|
    |direction	|Column|
    |useDefaultViewWidth|	false|
    |useDefaultViewHeight|	false|

4. Finally, create three **object** members in the **instances** array. Add a labelText property to each object of type **value**, and replace the value strings to the desired strings to show. Here's how the property editor looks for our Flex Repeater:

    ![](2019-08-01_16-36-09-b.png)

5. You should now see the Flex repeater populated as shown in the image above.