durbok/noodl-docs
1
0
Fork 0
mirror of https://github.com/noodlapp/noodl-docs.git synced 2026-01-12 07:12:53 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: SEO-1 (#29)

Browse Source
This commit is contained in:
Eric Tuvesson
2023-09-22 12:35:24 +02:00
committed by GitHub
parent d392dd0407
commit f3b8bb4d3b
111 changed files with 222 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
nodes/ui-controls/repeater/README.md Normal file
View File

@@ -0,0 +1,94 @@
---
hide_title: true
hide_table_of_contents: true
title: Repeater
---
<##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">
![](/nodes/ui-controls/repeater/repeater_visual.png)
</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">
![](/nodes/ui-controls/repeater/repeater_node.png)
</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>