mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 23:02:54 +01:00
656e5fc8d2
* chore: Upgrade Docusaurus from v2 to v3 * chore: Update "Test build" GH workflow * fix: build All markdown is processed as MDX * fix: Broken links
95 lines
8.8 KiB
Markdown
95 lines
8.8 KiB
Markdown
---
|
|
hide_title: true
|
|
hide_table_of_contents: true
|
|
title: Repeater node
|
|
---
|
|
|
|
{/*##head##*/}
|
|
|
|
# Repeater
|
|
|
|
This node is used to dynamically insert visual components based on <span className="ndl-data">array</span> data.
|
|
|
|
<div className="ndl-image-with-background l">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
The <span className="ndl-node">Repeater</span> node takes data from a Noodl <span className="ndl-data">Array</span> and generates an existing visual component for each item in the <span className="ndl-data">Array</span>. The [Object](/nodes/data/object/object-node) or [Record](/nodes/data/cloud-data/record) associated with the visual component can then be used to populate the component with data.
|
|
|
|
<div className="ndl-image-with-background l">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
{/*##head##*/}
|
|
|
|
More details can be found in the [guide](/docs/guides/data/list-basics).
|
|
|
|
## Inputs
|
|
|
|
| Data | Description |
|
|
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| <span className="ndl-data">Template Type</span> | This input is used to enable or disable dynamic templates. The input can be:<br/><br/>`Explicit`: The same _Component_ will be used for all items.<br/>`Dynamic`: Use code to choose what _Component_ to create for each item. In this case you will have to set the **Script** input. |
|
|
| <span className="ndl-data">Script</span> | Available 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). |
|
|
| <span className="ndl-data">Component</span> | Only 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. |
|
|
| <span className="ndl-data">Items</span> | {/*##input:items##*/}An array of [Objects](/nodes/data/object/object-node) or [Records](/nodes/data/cloud-data/record) that will be used to dynamically create components.{/*##input##*/} |
|
|
|
|
| Signal | Description |
|
|
| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
|
|
| <span className="ndl-signal">Refresh</span> | {/*##input:refresh##*/}By sending a signal to this input all items in the **Repeater** will be removed and then recreated.{/*##input##*/} |
|
|
|
|
### 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
|
|
|
|
```javascript
|
|
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.
|
|
|
|
```javascript
|
|
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
|
|
|
|
| Mixed | Description |
|
|
| -------------------- | ------------------------------------------------------------------------- |
|
|
| **Template Outputs** | An output is created for every signal output of the _Template_ component. |
|
|
|
|
| Data | Description |
|
|
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| <span className="ndl-data">Item Id</span> | {/*##output:itemActionItemId##*/}This 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](/nodes/data/object/object-node) or [Record](/nodes/data/cloud-data/record/) that triggered the signal.{/*##output##*/} |
|
|
| <span className="ndl-data">Item Outputs</span> | This 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. |
|
|
|
|
<span className="hidden-props-for-editor">{/*##output:itemOutput-\*##*/}An output value coming from the list item.{/*##output##*/}</span>
|
|
|
|
| Signal | Description |
|
|
| ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| <span className="ndl-signal">Item Signals</span> | This 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**. |
|
|
|
|
<span className="hidden-props-for-editor">{/*##output:itemOutputSignal-\*##*/}An output signal coming from the list item.{/*##output##*/}</span>
|