Skip to main content

Repeater

This node is used to dynamically insert visual components based on array data.

The Repeater node takes data from a Noodl Array and generates an existing visual component for each item in the Array. The Object or Record associated with the visual component can then be used to populate the component with data.

More details can be found in the guide.

Inputs

DataDescription
Template TypeThis input is used to enable or disable dynamic templates. The input can be:

Explicit: The same Component will be used for all items.
Dynamic: Use code to choose what Component to create for each item. In this case you will have to set the Script input.
ScriptAvailable when Template Type is set to Dynamic or after chosing a Component for a Explicit template type . Write a script to map input or choose what Component to create for every item (see below).
ComponentOnly available when Template Type is set to Explicit. Choose a component from your project that will be used as template to dynamically create component instances for each object in the Items array.
ItemsAn array of Objects or Records that will be used to dynamically create components.
SignalDescription
RefreshBy sending a signal to this input all items in the Repeater will be removed and then recreated.

Script

Here you can put an script that will do one of two things. Either the script a) Maps the properties of the objects in the Items array to component inputs of the template component instances created by the Repeater node. This is only available if Template Type is set to Explicit. (see Mapping Inputs below), or b) Chooses which template component to use for each item in the item array provided to the Repeater node. This is only available (and mandatory) if the Template Type is set to Dynamic. (see Dynamic Template Types below).

Mapping Inputs

map({
Label: 'Full Name',
State: () => object.get('Married') === 'Yes',
})

By default the mapping is simply directly from object properties to component inputs. But you can use the script to change that mapping, in the example above the Full Name property of the incoming object is mapped to the Label component input. You can also use the script to do conversions of types by providing a function. This could for example be useful when having a generic list item, that's used with various types of data arrays with different data models and properties.

Dynamic Template Types

By setting Template type to Dynamic you can use a script to determine which component that should be used for each item in the object Array. This could for example be useful if different items should have different visual representation and functionality tied to them. You have to provide a script that determines which template to be used. The script will be called once for each object in the item array provided to the Repeater node. The script has has one input variable item which is the current item. This can be used to get properties from the object. The script should set the variable component to the path to the component to use as a template for the item. Note, this is a string containing the path, beginning with a "/", to the component in the Noodl project.

let basePath = '/#My Sheet/ListItems'
if (item.type === 'header') {
component = basePath + '/HeaderItem'
} else {
component = basePath + '/StandardItem'
}

In the example above the script looks at the property "type" of each object, and either choses to component "#My Sheet/ListItems/HeaderItem" or "#My Sheet/ListItems/StandardItem" depending on the value.

Outputs

MixedDescription
Template OutputsAn output is created for every signal output of the Template component.
DataDescription
Item IdThis output will be updated every time a signal is sent on any of the component output signals to reflect the Id of the related Object or Record that triggered the signal.
Item OutputsThis group contains component outputs other than signals for the component template of the Repeater node. When a signal is triggered by one of the component instances the outputs will be replayed along with the Item Id of the corresponding item. This can be used to store component specific outputs in e.g. objects and variables.
An output value coming from the list item.
SignalDescription
Item SignalsThis group contains component output signals from the component template of the Repeater node. When any of the component instances triggers an output signal, these will be relayed by the Repeater node along with the corresponding Item Id.
An output signal coming from the list item.