Component Palette Icon:

On this page ...


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

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. Both components are based off of the CSS 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 an 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.
This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

NameDescriptionProperty Type
path

Path to the desired view to display.

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.

NameDescriptionProperty Type
instanceStyle

Sets a style for this instance of a view. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.

object
instancePositionPosition properties such as grow, shrink, or basis that would apply to all instances. object

The following feature is new in Ignition version 8.1.4
Click here to check out the other new features
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
directionDirection 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
useDefaultViewHeightUse view's default height instead of adjusting based on the content's height.value: boolean
elementStyleSets a style for this element. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object

elementPosition


Sets a position for this element. Element position properties that apply to all instances, unless overridden by instancePosition. 

NameDescriptionProperty Type
growgrow 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: numeric
shrinkshrink controls what happens when the component does not have enough space to fulfill its basis. value: numeric
basisControls 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: numeric

object


loading

The following feature is new in Ignition version 8.1.5
Click here to check out the other new features
View loading settings.

NameDescriptionProperty Type
order

Controls when the embedded views load: alongside the parent view loading ( with-parent ), or after the parent view finishes loading ( after-parent ). Default is after-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: boolean
object
style

Sets a style for the Flex Repeater. Full menu of  style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.

NameDescriptionProperty Type
classesSets a style class for the Flex Repeater.object
overflowOptions are auto, visible, scroll, or hidden.value: 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.


Component Events

Perspective Component Events
The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions 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

  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
    2. In the Property Editor. Under PARAMS, select Add View Parameter, select a property type of Value.
    3. Rename the parameter from "key" to "labelText".
    4. 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 CategoryValue
    borderStylesolid
    fontSize30px
    textAligncenter

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

    Property NameValue
    pathRepeatedView
    directionColumn
    useDefaultViewWidthfalse
    useDefaultViewHeightfalse

  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:



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


  • No labels