Search

User Manual

Getting Started


Modules and Platform


Appendix


Tutorials & Helpful Tricks


Glossary


Strategic Partner Links

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

Resources

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

All Manual Versions

Ignition 8
Ignition 7.9
Ignition 7.8

Deprecated Pages

Skip to end of metadata
Go to start of metadata



General

Component Palette Icon:





IULocgo


Flex Repeater

Description

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 that will be passed into that particular instance.

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
pathPath 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 will 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.

This feature is new in Ignition version 8.0.3
Click here to check out the other new features

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. See Flex Layouts.object
array
directionDirection of layout of repeated views. Options are row, row-reverse, column and column-reverse.value: string dropdown
wrap

This feature is new in Ignition version 8.0.3
Click here to check out the other new features

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 dropdown
justify

This feature is new in Ignition version 8.0.3
Click here to check out the other new features

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 dropdown
alignItems

This feature is new in Ignition version 8.0.3
Click here to check out the other new features

Adjusts placement of instances along the cross axis when there is extra space: flex-start, flex-end, center, baseline, stretch.

value: string dropdown
alignContent

This feature is new in Ignition version 8.0.3
Click here to check out the other new features

Adjusts alignment of wrapped content when there is free space in the cross axis: flex-start, flex-end, center, space-between, space-around, stretch.


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

This feature is new in Ignition version 8.0.3
Click here to check out the other new features
Sets a position for this element. Element position properties that apply to all instances, unless overridden by instancePosition. See Flex Layouts.

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. See Flex Layouts.value: numeric
shrinkshrink controls what happens when the component does not have enough space to fulfill its basis. See Flex Layouts.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
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 dropdown


object
Property User Interface

This feature is new in Ignition version 8.0.3
Click here to check out the other new features
When a Flex Repeater is deep selected, there is a Graphical User Interface (GUI) at the top of the Perspective Property Editor that enables you to set the container's properties. Functionality is similar to that of the properties in the Props Tree, but you may find the visual interface easier or quicker to use.

Direction

This sets the direction for the child layout. Options are Row or ColumnWhen the Reverse  icon is selected, the contents of this container are displayed in reverse order.

Direction: Row

The following table shows the icons and properties they represent when Direction: Row is selected. The icon that's displayed if Reverse order is selected is also shown.

Left/right/top/bottom notes in the descriptions refer to non-reversed directions. The phrase "when there is extra space" means when no components have are stretching to fill the space (i.e., when no components have "grow" greater than 0).

 Click here to see the Direction: Row icons and properties...


Items
Row IconRow Reversed IconProperty

Description

Flex StartChild items are placed along the start (top) of the container when there is extra space.

CenterChild items are placed along the center of the container when there is extra space.

Flex EndChild items are placed along the end (bottom) of the container when there is extra space.

StretchChild items are stretched from top to bottom of the container.

BaselineChild items are placed so the baseline of the text matches for all of them when there is extra space.
Justify
Row Icon
Row Reversed IconPropertyDescription

Flex startAdjusts placement of children to the start (left) of the container when there is extra space. If reversed, children are placed along the right.

CenterAdjusts placement of children along the center of the container when there is extra space.

Flex EndAdjusts placement of children along the end (right) of the container when there is extra space. If reversed, children are placed along the left.

Space Between

Adjusts placement of children with space in between them reaching to the edges of the container when there is extra space.

Space Around

Adjusts placement of children with even spacing in between them with some space along the edges when there is extra space.


Space EvenlyAdjusts placement of children with even spacing in between them and the edges of the container when there is extra space.
Children
IconPropertyDescription
N/ADon't WrapIf there are more components than the width allows, shrink them.
N/AWrapIf there are more components than the width allows, wrap onto the next line.

Reverse WrapToggle to reverse the direction of wrap from top-down to bottom-up
Content (Only applicable when Children:Wrap is selected.)
Row Icon
Row Reversed IconPropertyDescription

Flex startAdjusts placement of wrapped content to the start (top) of the container when there is free space.

CenterAdjusts placement of wrapped content to the middle of the container when there is free space.

Flex EndAdjusts placement of wrapped content to the end (bottom) of the container when there is free space.

Space BetweenAdjusts placement of wrapped content evenly with space in between each wrapped line, reaching to the edges (top and bottom) of the container when there is extra space.

Space AroundAdjusts placement of wrapped content evenly with space in between each wrapped line and the edges (top and bottom) of the container when there is extra space.

StretchAdjusts placement of wrapped content evenly with space in between each wrapped line and after the last line (bottom) of the container when there is extra space.

Direction: Column

The following table shows the icons and properties they represent when Direction: Column is selected. The icon that's displayed if Reverse order is selected is also shown.

 Click here see the Direction: Column icons and properties


Items
Column IconColumn Reversed IconPropertyDescription

Flex startChild items are placed along the start (left) of the container when there is extra space.

CenterChild items are placed along the center of the container when there is extra space.

Flex EndChild items are placed along the end (right) of the container when there is extra space.

StretchChild items are stretched from left to right of the container.

Baseline

Child items are placed so the baseline of the text matches for all of them when there is extra space.

Justify

Column
Icon

Column Reversed IconPropertyDescription

Flex startAdjusts placement of children to the start (top) of the container when there is extra space. If reversed, children are placed along the bottom.

CenterAdjusts placement of children along the center of the container when there is extra space.

Flex EndAdjusts placement of children along the end (bottom) of the container when there is extra space. If reversed, children are placed along the top.

Space BetweenAdjusts placement of children with space in between them reaching to the edges of the container when there is extra space.

Space AroundAdjusts placement of children with even spacing in between them with some space along the edges when there is extra space.

Space EvenlyAdjusts placement of children with even spacing in between them and the edges of the container when there is extra space.
Children
IconDescription
N/ADon't WrapIf there are more components than the width allows, shrink them.
N/AWrapIf there are more components than the width allows, wrap onto the next line.

Reverse

Toggle to reverse the direction of wrap from top-down to bottom-up

Content (Only applicable when Children:Wrap is selected.)
Column
Icon

Column Reversed IconPropertyDescription

Flex startAdjusts placement of wrapped content to the start (left) of the container when there is free space.

CenterAdjusts placement of wrapped content to the middle of the container when there is free space.

Flex EndAdjusts placement of wrapped content to the end (bottom) of the container when there is free space.

Space BetweenAdjusts placement of wrapped content evenly with space in between each wrapped line, reaching to the edges (left and right) of the container when there is extra space.

Space AroundAdjusts placement of wrapped content evenly with space in between each wrapped line and the edges (left and right) of the container when there is extra space.

StretchAdjusts placement of wrapped content evenly with space in between each wrapped line and after the last line of the container when there is extra space.

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 Perspective 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.

Examples
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