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

chore: Upgrade Docusaurus from v2 to v3 (#52)

Browse Source 
* chore: Upgrade Docusaurus from v2 to v3

* chore: Update "Test build" GH workflow

* fix: build

All markdown is processed as MDX

* fix: Broken links
This commit is contained in:
Eric Tuvesson
2024-01-12 16:53:22 +01:00
committed by GitHub
parent 65b0cf0417
commit 656e5fc8d2
156 changed files with 4854 additions and 10445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
nodes/basic-elements/circle/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Circle node
---
<##head##>
{/*##head##*/}
# Circle
@@ -16,7 +16,7 @@ This node places a circle (or a circle segment) in the visual tree. It features
</div>
<##head##>
{/*##head##*/}
## Inputs

4
nodes/basic-elements/columns/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Columns node
---
<##head##>
{/*##head##*/}
# Columns
@@ -28,7 +28,7 @@ A layout string is simply a string of numbers with spaces between them. Every nu
</div>
<##head##>
{/*##head##*/}
## Responsive layouts

4
nodes/basic-elements/group/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Group node
---
<##head##>
{/*##head##*/}
# Group
@@ -24,7 +24,7 @@ The <span className="ndl-node">Group</span> is the most essential node when it c
</div>
<##head##>
{/*##head##*/}
**Group** nodes are typically used to layout children by stacking (the default), but can also be used to simply provide margins and padding to a group of visual nodes. To learn more about **Group** nodes check out the [Layouting guide](/docs/guides/user-interfaces/layout).

4
nodes/basic-elements/icon/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Icon node
---
<##head##>
{/*##head##*/}
# Icon
@@ -17,7 +17,7 @@ This node places an icon in the visual tree.
</div>
You can use an icon from the built in library, or provide your own image source.
<##head##>
{/*##head##*/}
## Dynamic icons

4
nodes/basic-elements/image/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Image node
---
<##head##>
{/*##head##*/}
# Image
@@ -12,7 +12,7 @@ This node places an image in the visual tree. It features a wide range of design
The <span className="ndl-data">source</span> can be set from a URL or a file. You can drag images from your computer and drop them into Noodl to add them to the project folder. This will make them selectable as the <span className="ndl-data">source</span> in the <span className="ndl-node">Image</span> nodes Property Panel.
<##head##>
{/*##head##*/}
## Inputs

4
nodes/basic-elements/text/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Text node
---
<##head##>
{/*##head##*/}
# Text
@@ -24,7 +24,7 @@ The <span className="ndl-node">Text</span> node can be styled with font family,
</div>
<##head##>
{/*##head##*/}
## Inputs

4
nodes/basic-elements/video/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Video node
---
<##head##>
{/*##head##*/}
# Video
@@ -12,7 +12,7 @@ This node places a video surface in the visual tree. It features a wide range of
The <span className="ndl-data">source</span> can be set from a URL or a file. You can drag videos from your computer and drop them into Noodl to add them to the project folder. This will make them selectable as the <span className="ndl-data">source</span> in the <span className="ndl-node">Video</span> node Property Panel.
<##head##>
{/*##head##*/}
## Inputs

16
nodes/cloud-functions/cloud-data/aggregate-records/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Aggregate Records node
---
<##head##>
{/*##head##*/}
# Aggregate Records
@@ -32,7 +32,7 @@ Then for each aggregate name you created you choose the property to aggregate ov
</div>
<##head##>
{/*##head##*/}
You can also specify filters to limit the aggretate to a select set of recrods. This is done in the same way as with the [Query Records](/nodes/data/cloud-data/query-records) node, please see those reference docs for more details.
@@ -52,8 +52,8 @@ You can do aggregates over two types of properties **String** and **Number**, th
| --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Class</span> | Select the **Class** for the types of records this node should do aggregate over. When the **Class** is selected you can create filters and aggregates of the **Class**. |
| <span className="ndl-data">Filter</span> | This specifies the type of filter, you can choose from:<br/><br/>`Visual`: Specify your filter using the visual filter editor.<br/>`JavaScript`: Specify your filter using JavaScript (this is more flexible and you can create more dynamic queyries but it's also more complex) |
| <span className="ndl-data">Query Parameters</span> | <##input:qp-\*##>The input for specifying the value of a query parameter.<##input##> Each paramteter used in your query will get an input where you can provide a value through a connection.<##input##> |
| <span className="ndl-data">Aggregates</span> | <##input:aggregates##>This a list of the aggregates you want to perform. You must provide the names of the outputs that will contain the aggregates here.<##input##> |
| <span className="ndl-data">Query Parameters</span> | {/*##input:qp-\*##*/}The input for specifying the value of a query parameter.{/*##input##*/} Each paramteter used in your query will get an input where you can provide a value through a connection.{/*##input##*/} |
| <span className="ndl-data">Aggregates</span> | {/*##input:aggregates##*/}This a list of the aggregates you want to perform. You must provide the names of the outputs that will contain the aggregates here.{/*##input##*/} |
### Aggregate property and operation
@@ -67,16 +67,16 @@ For each aggregate you create you also need to provide the property if should ag
| Signal | Description |
| -------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Do</span> | <##input:do##>Send a signal here to perform the aggregate.<##input##> |
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}Send a signal here to perform the aggregate.{/*##input##*/} |
## Outputs
| Data | Description |
| ------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Error</span> | <##output:error##>This output contains the error message incase something when wrong when executing the aggregate.<##output##> |
| <span className="ndl-data">Error</span> | {/*##output:error##*/}This output contains the error message incase something when wrong when executing the aggregate.{/*##output##*/} |
| Signal | Description |
| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-signal">Success</span> | <##output:success##>A signal is sent here if the aggregate was successful and the result is ready.<##output##> |
| <span className="ndl-signal">Failure</span> | <##output:failure##>A signal is sent here if something went wrong with the aggregate. You can find the error message via the **Error** output.<##output##> |
| <span className="ndl-signal">Success</span> | {/*##output:success##*/}A signal is sent here if the aggregate was successful and the result is ready.{/*##output##*/} |
| <span className="ndl-signal">Failure</span> | {/*##output:failure##*/}A signal is sent here if something went wrong with the aggregate. You can find the error message via the **Error** output.{/*##output##*/} |

4
nodes/cloud-functions/request/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Request node
---
<##head##>
{/*##head##*/}
# Request
@@ -26,7 +26,7 @@ You specify what parameters the cloud function accepts in the properties of the
</div>
<##head##>
{/*##head##*/}
By default the user must be logged in on the client, and if thats not the case the cloud function call will automatically fail with an error indication an invalid session.

4
nodes/cloud-functions/response/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Response node
---
<##head##>
{/*##head##*/}
# Response
@@ -24,7 +24,7 @@ The response is sent when a signal is received on the **Send** input. You can sp
</div>
<##head##>
{/*##head##*/}
If the status is **Failure** you can provide an error message that will be returned to the calling [Cloud Function](/nodes/data/cloud-data/cloud-function) node.

20
nodes/component-stack/component-stack-node/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Component Stack node
---
<##head##>
{/*##head##*/}
# Component Stack
@@ -32,25 +32,25 @@ With the **clip** property set to <span className="ndl-data">false</span>, the *
If you want to control the size of the **Component Stack** beyond that, you should put it as a child in a [Group](/nodes/basic-elements/group/README.md) node.
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Name</span> | <##input:name##>This is the name of the **Component Stack**. If you have multiple **Component Stacks** in your project you use the name to identify it in the [Push Component To Stack](/nodes/component-stack/push-component) and [Pop Component Stack](/nodes/component-stack/pop-component) nodes. <##input##> |
| <span className="ndl-data">Name</span> | {/*##input:name##*/}This is the name of the **Component Stack**. If you have multiple **Component Stacks** in your project you use the name to identify it in the [Push Component To Stack](/nodes/component-stack/push-component) and [Pop Component Stack](/nodes/component-stack/pop-component) nodes. {/*##input##*/} |
| <span className="ndl-data">Start Page</span> | The Component which will be shown by **Component Stack** at the start. |
| <span className="ndl-data">Clip Content</span> | <##input:clip##>If this property is set to `true` the **Component Stack** will clip any component that is extending beyond its size. If set to `false` the size of the **Component Stack** will grow if needed to fit its component.<##input##> |
| <span className="ndl-data">Background Color</span> | <##input:backgroundColor##>The color that will be shown when there is no component covering the **Component Stack** or when the component is transparent.<##input##> |
| <span className="ndl-data">Mounted</span> | <##input:mounted##>This property is used to completely remove the node from the DOM. If this property is set to false the node is removed from the DOM. It differs from the _Visible_ property where the node is still part of the DOM but invisible.<##input##> |
| <span className="ndl-data">Clip Content</span> | {/*##input:clip##*/}If this property is set to `true` the **Component Stack** will clip any component that is extending beyond its size. If set to `false` the size of the **Component Stack** will grow if needed to fit its component.{/*##input##*/} |
| <span className="ndl-data">Background Color</span> | {/*##input:backgroundColor##*/}The color that will be shown when there is no component covering the **Component Stack** or when the component is transparent.{/*##input##*/} |
| <span className="ndl-data">Mounted</span> | {/*##input:mounted##*/}This property is used to completely remove the node from the DOM. If this property is set to false the node is removed from the DOM. It differs from the _Visible_ property where the node is still part of the DOM but invisible.{/*##input##*/} |
| Signal | Description |
| ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Reset</span> | <##input:reset##>Triggering this action resets the **Component Stack** meaning all components on the stack will be removed and only the **Start Page** will be on the stack.<##input##> |
| <span className="ndl-signal">Reset</span> | {/*##input:reset##*/}Triggering this action resets the **Component Stack** meaning all components on the stack will be removed and only the **Start Page** will be on the stack.{/*##input##*/} |
| Deprecated | Description |
| -------------------------------------------------- | --------------------------------------------------------------------------------------- |
| <span className="ndl-deprecated">Use Routes</span> | <##input:useRoutes##>**This Property is deprecated and should not be used.**<##input##> |
| <span className="ndl-deprecated">Use Routes</span> | {/*##input:useRoutes##*/}**This Property is deprecated and should not be used.**{/*##input##*/} |
### Visual
@@ -62,8 +62,8 @@ This node supports the following [Visual Input Properties](/nodes/shared-props/i
| Data | Description |
| ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Top Component Name</span> | <##output:topPageName##>This property holds the name of the current component that is on the top of the stack.<##output##> |
| <span className="ndl-data">Stack Depth</span> | <##output:stackDepth##>This property equals to the number of components that are currently on the **Component Stack**.<##output##> |
| <span className="ndl-data">Top Component Name</span> | {/*##output:topPageName##*/}This property holds the name of the current component that is on the top of the stack.{/*##output##*/} |
| <span className="ndl-data">Stack Depth</span> | {/*##output:stackDepth##*/}This property equals to the number of components that are currently on the **Component Stack**.{/*##output##*/} |
### Visual

12
nodes/component-stack/pop-component/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Pop Component node
---
<##head##>
{/*##head##*/}
# Pop Component Stack
@@ -16,15 +16,15 @@ The **Pop Component Stack** node is used together with a [Component Stack](/node
</div>
?> Note that you have to use the **Pop Component Stack** node from within a component in the **Component Stack**.
> Note that you have to use the **Pop Component Stack** node from within a component in the **Component Stack**.
<##head##>
{/*##head##*/}
## Inputs
| Signal | Description |
| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Navigate</span> | <##input:navigate##>Triggering this action will pop the topmost component from the stack. If there is a component under the popped component, it will be now be visible.<##input##> |
| <span className="ndl-signal">Navigate</span> | {/*##input:navigate##*/}Triggering this action will pop the topmost component from the stack. If there is a component under the popped component, it will be now be visible.{/*##input##*/} |
### Back Actions and Results
@@ -34,6 +34,6 @@ When popping a component from the stack you can also trigger a **Back Action** a
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Back Actions, Results** | You can add any number of **Back Actions** and **Result** inputs to the **Pop Component Stack** node. These will show up as outputs on any [Push To Component Stack](/nodes/component-stack/push-component) node pointing to the component with this **Pop Component Stack** node. |
<span className="hidden-props-for-editor"><##input:backAction-\*##>A **Back Action** signal. Triggering this will pop from the **Component Stack** and send a signal to the [Push To Component Stack](/nodes/component-stack/push-component) node used to push the component.<##input##></span>
<span className="hidden-props-for-editor">{/*##input:backAction-\*##*/}A **Back Action** signal. Triggering this will pop from the **Component Stack** and send a signal to the [Push To Component Stack](/nodes/component-stack/push-component) node used to push the component.{/*##input##*/}</span>
<span className="hidden-props-for-editor"><##input:result-\*##>A **Result** input. Any data sent to this input will be forwarded to the [Push To Component Stack](/nodes/component-stack/push-component) node when the component is popped.<##input##></span>
<span className="hidden-props-for-editor">{/*##input:result-\*##*/}A **Result** input. Any data sent to this input will be forwarded to the [Push To Component Stack](/nodes/component-stack/push-component) node when the component is popped.{/*##input##*/}</span>

40
nodes/component-stack/push-component/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Push Component node
---
<##head##>
{/*##head##*/}
# Push Component To Stack
@@ -16,39 +16,39 @@ The **Push Component To Stack** node is used together with a [Component Stack](/
</div>
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-data">Stack</span> | <##input:stack##>This property defines which **Component Stack** that the push will act on. The **Component Stack** is referred to by its name. <##input##> |
| <span className="ndl-data">Mode</span> | <##input:mode##>This property selects whether the previous components will be kept in the stack, beneath the new top component, (**Push**) or if all components will be replaced by the new top component (**Replace**), in which case the new component will be the only one on the stack.<##input##> |
| <span className="ndl-data">Target Page</span> | <##input:target##>Here you select the target component to push on the **Component Stack**. The component need to be one of the component entries defined in the **Component Stack** to show up as an option here.<##input##> |
| <span className="ndl-data">Stack</span> | {/*##input:stack##*/}This property defines which **Component Stack** that the push will act on. The **Component Stack** is referred to by its name. {/*##input##*/} |
| <span className="ndl-data">Mode</span> | {/*##input:mode##*/}This property selects whether the previous components will be kept in the stack, beneath the new top component, (**Push**) or if all components will be replaced by the new top component (**Replace**), in which case the new component will be the only one on the stack.{/*##input##*/} |
| <span className="ndl-data">Target Page</span> | {/*##input:target##*/}Here you select the target component to push on the **Component Stack**. The component need to be one of the component entries defined in the **Component Stack** to show up as an option here.{/*##input##*/} |
| Signal | Description |
| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Navigate</span> | <##input:navigate##>Sending a signal to this input will push the **Target Page** on the **Component Stack**.<##input##> |
| <span className="ndl-signal">Navigate</span> | {/*##input:navigate##*/}Sending a signal to this input will push the **Target Page** on the **Component Stack**.{/*##input##*/} |
| Mixed | Description |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| **Component Inputs** | Any **Component Inputs** that the target component have will be available as inputs on the **Push Component To Stack** node. |
<span className="hidden-props-for-editor"><##input:pm-\*##>A parameter input originating from a **Component Input** in the **Target** component. It's value will be forwarded to the component.<##input##></span>
<span className="hidden-props-for-editor">{/*##input:pm-\*##*/}A parameter input originating from a **Component Input** in the **Target** component. It's value will be forwarded to the component.{/*##input##*/}</span>
### Transition
| Data | Description |
| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Transition</span> | The type of transition. Can be any of:<br/><br/>`None`: No transition, the target component is immediately made visible.<br/>`Push`: The current top of the stack is "pushed away" while the new top enters.<br/>`Popup`: The current top is not changed. The new top enters with a transition on top of it.<br/><br/>Not all of the parameters below are available for all types of transitions. |
| <span className="ndl-data">Direction</span> | <##input:tr-direction##>This is the direction the new top component enters from, and also the direction the current top is pushed away in, if the transition is _Push_. It can be any of _Left_, _Right_, _Up_, _Down_ and _In_,_Out_. The latter zooms in vs out.<##input##> |
| <span className="ndl-data">Shift Distance</span> | <##input:tr-shift##>This is the distance of the transition in either _%_ or in _px_, i.e. the distance the component is moved in the specified direction.<##input##> |
| <span className="ndl-data">Zoom</span> | <##input:tr-zoom##>This is available if the _Direction_ is set to _In_ or _Out_ and specifies the amount of zoom the transition should apply.<##input##> |
| <span className="ndl-data">Crossfade</span> | <##input:tr-crossfade##>If enabled the target will fade in and the current top fade out. Only available for _Push_ transitions.<##input##> |
| <span className="ndl-data">Dark Overlay</span> | <##input:tr-darkoverlay##>Adds a overlay to the current top with the color #000000. Only available for _Push_ transitions.<##input##> |
| <span className="ndl-data">Dark Overlay Amount</span> | <##input:tr-darkoverlayamount##>The maximum opacity of the overlay. It starts at `0` and animates to this value. `0` disables it, and `1` makes the overlay animate to 100% opacity. Only available for _Push_ transitions.<##input##> |
| <span className="ndl-data">Fade In</span> | <##input:tr-fadein##>Available for _Popup_ transitions. This indicates if the new top component should fade in ou not during the transition.<##input##> |
| <span className="ndl-data">Timing</span> | <##input:tr-timing##>This is a timing curve that controls the delay, duration and animation ease of the transition.<##input##> |
| <span className="ndl-data">Direction</span> | {/*##input:tr-direction##*/}This is the direction the new top component enters from, and also the direction the current top is pushed away in, if the transition is _Push_. It can be any of _Left_, _Right_, _Up_, _Down_ and _In_,_Out_. The latter zooms in vs out.{/*##input##*/} |
| <span className="ndl-data">Shift Distance</span> | {/*##input:tr-shift##*/}This is the distance of the transition in either _%_ or in _px_, i.e. the distance the component is moved in the specified direction.{/*##input##*/} |
| <span className="ndl-data">Zoom</span> | {/*##input:tr-zoom##*/}This is available if the _Direction_ is set to _In_ or _Out_ and specifies the amount of zoom the transition should apply.{/*##input##*/} |
| <span className="ndl-data">Crossfade</span> | {/*##input:tr-crossfade##*/}If enabled the target will fade in and the current top fade out. Only available for _Push_ transitions.{/*##input##*/} |
| <span className="ndl-data">Dark Overlay</span> | {/*##input:tr-darkoverlay##*/}Adds a overlay to the current top with the color #000000. Only available for _Push_ transitions.{/*##input##*/} |
| <span className="ndl-data">Dark Overlay Amount</span> | {/*##input:tr-darkoverlayamount##*/}The maximum opacity of the overlay. It starts at `0` and animates to this value. `0` disables it, and `1` makes the overlay animate to 100% opacity. Only available for _Push_ transitions.{/*##input##*/} |
| <span className="ndl-data">Fade In</span> | {/*##input:tr-fadein##*/}Available for _Popup_ transitions. This indicates if the new top component should fade in ou not during the transition.{/*##input##*/} |
| <span className="ndl-data">Timing</span> | {/*##input:tr-timing##*/}This is a timing curve that controls the delay, duration and animation ease of the transition.{/*##input##*/} |
<div className="ndl-image-with-background l">
<img src="/guides/navigation/transition-params.png"></img>
@@ -56,13 +56,13 @@ The **Push Component To Stack** node is used together with a [Component Stack](/
<div className="hidden-props-for-editor">
<##input:transition##>The type of transition. Can be any of:
{/*##input:transition##*/}The type of transition. Can be any of:
- _None_ No transition, the target component is immediately made visible.
- _Push_ The current top of the stack is "pushed away" while the new top enters.
- _Popup_ The current top is not changed. The new top enters with a transition on top of it.
Not all of the parameters below are available for all types of transitions.<##input##>
Not all of the parameters below are available for all types of transitions.{/*##input##*/}
</div>
@@ -70,12 +70,12 @@ Not all of the parameters below are available for all types of transitions.<##in
| Signal | Description |
| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-signal">Navigated</span> | <##output:navigated##>This signal is triggered when the **Target Component** has been pushed on the **Component Stack**.<##output##> |
| <span className="ndl-signal">Navigated</span> | {/*##output:navigated##*/}This signal is triggered when the **Target Component** has been pushed on the **Component Stack**.{/*##output##*/} |
| Mixed | Description |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Back Actions, Results** | If the **Target Component** contains a [Pop Component Stack](/nodes/component-stack/pop-component) with **Back Actions** and **Results** they will appear as outputs on the related **Push Component**. |
<span className="hidden-props-for-editor"><##output:backAction-\*##>An output signal originating from the **Back Actions** of the [Pop Component Stack](/nodes/component-stack/pop-component) node of the **Target Component**.<##output##></span>
<span className="hidden-props-for-editor">{/*##output:backAction-\*##*/}An output signal originating from the **Back Actions** of the [Pop Component Stack](/nodes/component-stack/pop-component) node of the **Target Component**.{/*##output##*/}</span>
<span className="hidden-props-for-editor"><##output:backResult-\*##>A result output originating from the **Result** of the [Pop Component Stack](/nodes/component-stack/pop-component) node of the **Target Component**.<##output##></span>
<span className="hidden-props-for-editor">{/*##output:backResult-\*##*/}A result output originating from the **Result** of the [Pop Component Stack](/nodes/component-stack/pop-component) node of the **Target Component**.{/*##output##*/}</span>

4
nodes/component-utilities/component-children/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Component Children node
---
<##head##>
{/*##head##*/}
# Component Children
@@ -20,7 +20,7 @@ the **Component Children** node.
</div>
<##head##>
{/*##head##*/}
To fully understand this concept it's important to understand node hierarchies.
Visual nodes can be placed in a hierarchy which will cause them to be layouted and drawn appropriately.

4
nodes/component-utilities/component-inputs/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Component Inputs node
---
<##head##>
{/*##head##*/}
# Component Inputs
@@ -24,7 +24,7 @@ A <span className="ndl-node">Component Input</span> node can have multiple ports
</div>
<##head##>
{/*##head##*/}
A very powerful feature of Noodl is the ability to create **Components** that act as reusable nodes in your application.

16
nodes/component-utilities/component-object/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Component Object node
---
<##head##>
{/*##head##*/}
# Component Object
@@ -18,7 +18,7 @@ This node is a shared set of properties that can be accessed from a component as
The <span className="ndl-node">Component Object</span> node works much like the <span className="ndl-node">[Object](/nodes/data/object/object-node)</span> node where you add properties that become inputs or outputs to the node.
<##head##>
{/*##head##*/}
<div className="ndl-image-with-background">
@@ -32,20 +32,20 @@ Unlike the <span className="ndl-node">[Object](/nodes/data/object/object-node)</
| Data | Description |
| ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Property name</span> | <##input:value-\*##>The value of a specific property of the Component Object. A Component Object node can have any amount of properties. They must be named in the Property Panel. When this input is changed all other Component Object nodes in the same component are updated.<##input##> Each property will get one input and output to set/get their current value. See below for more details. |
| <span className="ndl-data">Property name</span> | {/*##input:value-\*##*/}The value of a specific property of the Component Object. A Component Object node can have any amount of properties. They must be named in the Property Panel. When this input is changed all other Component Object nodes in the same component are updated.{/*##input##*/} Each property will get one input and output to set/get their current value. See below for more details. |
| Signal | Description |
| ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Fetch</span> | <##input:fetch##>The fetch signal input can be used to explicitly signal when the data of a **Component Object** should be fetched. If a connection is made to this input the node will not automatically receive changes on it's properties, it will only get the new data when the fetch signal is triggered.<##input##> |
| <span className="ndl-signal">Fetch</span> | {/*##input:fetch##*/}The fetch signal input can be used to explicitly signal when the data of a **Component Object** should be fetched. If a connection is made to this input the node will not automatically receive changes on it's properties, it will only get the new data when the fetch signal is triggered.{/*##input##*/} |
## Outputs
| Data | Description |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Custom properties** | <##output:value-\*##>A Component Object node can have any amount of properties. Each property will get one output to get the current value.<##output##> |
| **Custom properties** | {/*##output:value-\*##*/}A Component Object node can have any amount of properties. Each property will get one output to get the current value.{/*##output##*/} |
| Signal | Description |
| ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Changed</span> | <##output:changed##>An event is triggered when any of the properties have changed.<##output##> |
| <span className="ndl-signal">Fetched</span> | <##output:fetched##>An event is triggered on this output when a fetch is completed as a result of a **Fetch** sent on to the node.<##output##> |
| <span className="ndl-signal">Changed Property Signals</span> | <##output:changed-\*##>One changed signal output will be created for every property. They will emit a signal when the property changes value when this or some other **Component Object** or [Parent Component Object](/nodes/component-utilities/parent-component-object) node triggers the _Set_ input.<##output##> |
| <span className="ndl-signal">Changed</span> | {/*##output:changed##*/}An event is triggered when any of the properties have changed.{/*##output##*/} |
| <span className="ndl-signal">Fetched</span> | {/*##output:fetched##*/}An event is triggered on this output when a fetch is completed as a result of a **Fetch** sent on to the node.{/*##output##*/} |
| <span className="ndl-signal">Changed Property Signals</span> | {/*##output:changed-\*##*/}One changed signal output will be created for every property. They will emit a signal when the property changes value when this or some other **Component Object** or [Parent Component Object](/nodes/component-utilities/parent-component-object) node triggers the _Set_ input.{/*##output##*/} |

4
nodes/component-utilities/component-outputs/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Component Outputs node
---
<##head##>
{/*##head##*/}
# Component Outputs
@@ -24,7 +24,7 @@ A <span className="ndl-node">Component Output</span> node can have as many ports
</div>
<##head##>
{/*##head##*/}
A very powerful feature of Noodl is the ability to create **Components** that act as reusable nodes in your application. A core concept of components is that they can have inputs and outputs like any of the built in nodes.

16
nodes/component-utilities/parent-component-object/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Parent Component Object node
---
<##head##>
{/*##head##*/}
# Parent Component Object
@@ -17,7 +17,7 @@ title: Parent Component Object node
</div>
The node is used much like an [Object](/nodes/data/object/object-node) where you can output properties on the node. The node does not have an **Id** instead the data is shared with the parent component. This node is very useful in patterns such as radio groups where child components may need to access the **Component Object** of its parent.
<##head##>
{/*##head##*/}
## Inputs
@@ -25,11 +25,11 @@ The node is used much like an [Object](/nodes/data/object/object-node) where you
| Data | Description |
| -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Properties</span> | <##input:value-\*##>The properties to set on the closest parent [Component Object](/nodes/component-utilities/component-object). When this input is changed via a connection the parent **Component Object** will be updated.<##input##> |
| <span className="ndl-data">Properties</span> | {/*##input:value-\*##*/}The properties to set on the closest parent [Component Object](/nodes/component-utilities/component-object). When this input is changed via a connection the parent **Component Object** will be updated.{/*##input##*/} |
| Signal | Description |
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-signal">Fetch</span> | <##input:fetch##>Normally when a **Parent Component State** is created, the property outputs are immediately updated. If you want to control how the data is updated you can connect to the _Fetch_ signal input. Then you need to explictly send a signal to fetch the data.<##input##><br/><br/>With **Fetch** connected the output data won't change until **Fetch** is explicitly triggered again. |
| <span className="ndl-signal">Fetch</span> | {/*##input:fetch##*/}Normally when a **Parent Component State** is created, the property outputs are immediately updated. If you want to control how the data is updated you can connect to the _Fetch_ signal input. Then you need to explictly send a signal to fetch the data.{/*##input##*/}<br/><br/>With **Fetch** connected the output data won't change until **Fetch** is explicitly triggered again. |
## Outputs
@@ -37,10 +37,10 @@ The node is used much like an [Object](/nodes/data/object/object-node) where you
| Data | Description |
| --------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Parent Properties</span> | <##output:value-\*##>The values of the properties of the closest parent [Component Object](/nodes/component-utilities/component-object).<##output##> |
| <span className="ndl-data">Parent Properties</span> | {/*##output:value-\*##*/}The values of the properties of the closest parent [Component Object](/nodes/component-utilities/component-object).{/*##output##*/} |
| Signal | Description |
| ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Changed</span> | <##output:changed##>This event is triggered when any of the properties have changed.<##output##> |
| <span className="ndl-signal">Fetched</span> | <##output:fetched##>Signal when this node has bound itself to a [Component Object](/nodes/component-utilities/component-object). Triggers immediately if the **Fetch** inputs isn't connected, and will otherwise trigger when the **Fetch** input is signaled.<##output##> |
| <span className="ndl-signal">Changed Property Signals</span> | <##output:changed-\*##>One changed signal output will be created for every property. They will emit a signal when the property changes value.<##output##> |
| <span className="ndl-signal">Changed</span> | {/*##output:changed##*/}This event is triggered when any of the properties have changed.{/*##output##*/} |
| <span className="ndl-signal">Fetched</span> | {/*##output:fetched##*/}Signal when this node has bound itself to a [Component Object](/nodes/component-utilities/component-object). Triggers immediately if the **Fetch** inputs isn't connected, and will otherwise trigger when the **Fetch** input is signaled.{/*##output##*/} |
| <span className="ndl-signal">Changed Property Signals</span> | {/*##output:changed-\*##*/}One changed signal output will be created for every property. They will emit a signal when the property changes value.{/*##output##*/} |

10
nodes/component-utilities/set-component-object-properties/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Set Component Object Properties node
---
<##head##>
{/*##head##*/}
# Set Component Object Properties
@@ -16,20 +16,20 @@ title: Set Component Object Properties node
</div>
<##head##>
{/*##head##*/}
## Inputs
| Signal | Description |
| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Do</span> | <##input:do##>Stores any properties that are typed in the property panel or connected. All **Component Object** nodes in the same component, as well as any [Parent Component Object](/nodes/component-utilities/parent-component-object) nodes, will be updated. <##input##> |
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}Stores any properties that are typed in the property panel or connected. All **Component Object** nodes in the same component, as well as any [Parent Component Object](/nodes/component-utilities/parent-component-object) nodes, will be updated. {/*##input##*/} |
| Data | Description |
| --------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Custom Properties</span> | <##input:prop-\*##>A property to set in the **Component Object**. You can list the properties you want to set in the property panel.<##input##> |
| <span className="ndl-data">Custom Properties</span> | {/*##input:prop-\*##*/}A property to set in the **Component Object**. You can list the properties you want to set in the property panel.{/*##input##*/} |
## Outputs
| Signal | Description |
| ---------------------------------------- | ----------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Done</span> | <##output:done##>An signal is sent on this output when the set action is completed.<##output##> |
| <span className="ndl-signal">Done</span> | {/*##output:done##*/}An signal is sent on this output when the set action is completed.{/*##output##*/} |

10
nodes/component-utilities/set-parent-component-object-properties/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Set Parent Component Object Properties node
---
<##head##>
{/*##head##*/}
# Set Parent Component Object Properties
@@ -16,20 +16,20 @@ With this node you can set properties on the closed parent **Component Object**.
</div>
<##head##>
{/*##head##*/}
## Inputs
| Signal | Description |
| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Do</span> | <##input:do##>Stores any properties that are typed in the property panel or connected. All **Component Object** nodes in the same component, as well as any [Parent Component Object](/nodes/component-utilities/parent-component-object) nodes, will be updated. <##input##> |
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}Stores any properties that are typed in the property panel or connected. All **Component Object** nodes in the same component, as well as any [Parent Component Object](/nodes/component-utilities/parent-component-object) nodes, will be updated. {/*##input##*/} |
| Data | Description |
| --------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Custom Properties</span> | <##input:prop-\*##>A property to set in the **Component Object**. You can list the properties you want to set in the property panel.<##input##> |
| <span className="ndl-data">Custom Properties</span> | {/*##input:prop-\*##*/}A property to set in the **Component Object**. You can list the properties you want to set in the property panel.{/*##input##*/} |
## Outputs
| Signal | Description |
| ---------------------------------------- | ---------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Done</span> | <##output:done##>A signal is sent on this output when the set action is completed.<##output##> |
| <span className="ndl-signal">Done</span> | {/*##output:done##*/}A signal is sent on this output when the set action is completed.{/*##output##*/} |

26
nodes/data/array/array-filter/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Array Filter node
---
<##head##>
{/*##head##*/}
# Array Filter
@@ -16,7 +16,7 @@ This node will take an array of items as input and output a filtered version of
</div>
<##head##>
{/*##head##*/}
## Inputs
@@ -24,15 +24,15 @@ This node will take an array of items as input and output a filtered version of
| Data | Description |
| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Enabled</span> | <##input:enabled##>The filtering is enabled by default, if disabled the array will simply pass through unfiltered.<##input##> |
| <span className="ndl-data">Items</span> | <##input:items##>The array that should be filtered.<##input##> |
| <span className="ndl-data">Use Limit</span> | <##input:filterEnableLimit##>Enables or disables limiting the number of objects in the outputted items array.<##input##> |
| <span className="ndl-data">Limit</span> | <##input:filterLimit##>Specify the maximum number of objects in the filtered output.<##input##> |
| <span className="ndl-data">Skip</span> | <##input:filterSkip##>Specify the number of objects to skip from the beginning of the filtered output.<##input##> |
| <span className="ndl-data">Enabled</span> | {/*##input:enabled##*/}The filtering is enabled by default, if disabled the array will simply pass through unfiltered.{/*##input##*/} |
| <span className="ndl-data">Items</span> | {/*##input:items##*/}The array that should be filtered.{/*##input##*/} |
| <span className="ndl-data">Use Limit</span> | {/*##input:filterEnableLimit##*/}Enables or disables limiting the number of objects in the outputted items array.{/*##input##*/} |
| <span className="ndl-data">Limit</span> | {/*##input:filterLimit##*/}Specify the maximum number of objects in the filtered output.{/*##input##*/} |
| <span className="ndl-data">Skip</span> | {/*##input:filterSkip##*/}Specify the number of objects to skip from the beginning of the filtered output.{/*##input##*/} |
| Signal | Description |
| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Filter</span> | <##input:filter##>By default the node will filter as soon as there is a new array on the _Items_ input or if that array changes. But if there is a connection to the _Filter_ input it will wait until a signal is sent here to perform the filtering.<##input##> |
| <span className="ndl-signal">Filter</span> | {/*##input:filter##*/}By default the node will filter as soon as there is a new array on the _Items_ input or if that array changes. But if there is a connection to the _Filter_ input it will wait until a signal is sent here to perform the filtering.{/*##input##*/} |
### Filter
@@ -63,7 +63,7 @@ The available operations of the filter depend on the type that is set.
?> To perform a free text search on strings, use the _Matches Regexp_ operation and set the _Value_ to the partial string you want to search for.
**Value**
<##input:filterFilterValue-\*##>The value used to test against in the filter operation.<##input##>
{/*##input:filterFilterValue-\*##*/}The value used to test against in the filter operation.{/*##input##*/}
<div className="ndl-image-with-background">
@@ -88,10 +88,10 @@ For each property you can choose the sorting order.
| Data | Description |
| ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Items</span> | <##output:items##>The filtered and sorted array.<##output##> |
| <span className="ndl-data">Count</span> | <##output:count##>The number of objects in the filtered array.<##output##> |
| <span className="ndl-data">First Item Id</span> | <##output:firstItemId##>The _Id_ of the first object in the filtered array, or _undefined_ if there are no items in the filtered array.<##output##> |
| <span className="ndl-data">Items</span> | {/*##output:items##*/}The filtered and sorted array.{/*##output##*/} |
| <span className="ndl-data">Count</span> | {/*##output:count##*/}The number of objects in the filtered array.{/*##output##*/} |
| <span className="ndl-data">First Item Id</span> | {/*##output:firstItemId##*/}The _Id_ of the first object in the filtered array, or _undefined_ if there are no items in the filtered array.{/*##output##*/} |
| Signal | Description |
| -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Filtered</span> | <##output:filtered##>Signal emitted when the array has been filtered, either due to a _Filter_ signal sent or if the array has changed.<##output##> |
| <span className="ndl-signal">Filtered</span> | {/*##output:filtered##*/}Signal emitted when the array has been filtered, either due to a _Filter_ signal sent or if the array has changed.{/*##output##*/} |

12
nodes/data/array/array-map/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Array Map node
---
<##head##>
{/*##head##*/}
# Array Map
@@ -16,13 +16,13 @@ This node takes an input array, runs a small map script on each item, and output
</div>
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| --------------------------------------- | ------------------------------------------------------------ |
| <span className="ndl-data">Items</span> | <##input:items##>The array that should be mapped.<##input##> |
| <span className="ndl-data">Items</span> | {/*##input:items##*/}The array that should be mapped.{/*##input##*/} |
### Script
@@ -54,9 +54,9 @@ Note that the objects that are created when mapping are new objects so they will
| Data | Description |
| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Items</span> | <##output:items##>The mapped array.<##output##> |
| <span className="ndl-data">Count</span> | <##output:count##>The number of items in the mapped array (this will be the same as the input array)<##output##> |
| <span className="ndl-data">Items</span> | {/*##output:items##*/}The mapped array.{/*##output##*/} |
| <span className="ndl-data">Count</span> | {/*##output:count##*/}The number of items in the mapped array (this will be the same as the input array){/*##output##*/} |
| Signal | Description |
| ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Changed</span> | <##output:changed##>A signal is emitted here when the input array has been modified which will trigger the _Array Map_ node to remap the input and produce a new output _Items_.<##output##> |
| <span className="ndl-signal">Changed</span> | {/*##output:changed##*/}A signal is emitted here when the input array has been modified which will trigger the _Array Map_ node to remap the input and produce a new output _Items_.{/*##output##*/} |

20
nodes/data/array/array-node/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Array node
---
<##head##>
{/*##head##*/}
# Array
@@ -17,7 +17,7 @@ Arrays are ordered lists of [Object](/nodes/data/object/object-node)s. See the g
</div>
You can create and modify the array using the [Create new Array](/nodes/data/array/create-new-array), [Insert Object Into Array](/nodes/data/array/insert-into-array) and [Remove Object From Array](/nodes/data/array/remove-from-array).
<##head##>
{/*##head##*/}
## Inputs
@@ -25,22 +25,22 @@ You can create and modify the array using the [Create new Array](/nodes/data/arr
| Data | Description |
| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Items</span> | <##input:items##>This input sets the source of the array.<##input##> You can for instance forward the content of a [Static Array](/nodes/data/array/static-array) node using this input. The content of the source array will be copied to this array by default and any changes to the source array will also be copied automatically. You can control this by making a signal connection to _Set_, in that case the items, i.e. content of the source array, will only be copied when a signal is received on _Set_. |
| <span className="ndl-data">Id</span> | <##input:id##>This is the _Id_ of the array, it works similair to objects and variables. It specifies the array that this node will act on via it's _Id_. All **Array** nodes with the same _Id_ will refer to the same array of objects.<##input##> |
| <span className="ndl-data">Items</span> | {/*##input:items##*/}This input sets the source of the array.{/*##input##*/} You can for instance forward the content of a [Static Array](/nodes/data/array/static-array) node using this input. The content of the source array will be copied to this array by default and any changes to the source array will also be copied automatically. You can control this by making a signal connection to _Set_, in that case the items, i.e. content of the source array, will only be copied when a signal is received on _Set_. |
| <span className="ndl-data">Id</span> | {/*##input:id##*/}This is the _Id_ of the array, it works similair to objects and variables. It specifies the array that this node will act on via it's _Id_. All **Array** nodes with the same _Id_ will refer to the same array of objects.{/*##input##*/} |
| Signal | Description |
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-signal">Fetch</span> | <##input:fetch##>Normally when _Id_ is set, the items and count outputs are immediately updated with the content of the array referenced by the _Id_. If you want to control how the data is updated you can connect to the _Fetch_ signal input. Then you need to explictly send a signal here for the **Array** node to fetch the data. Before an array have been fetched none of the modify and set operations or source items will have any affect.<##input##> |
| <span className="ndl-signal">Fetch</span> | {/*##input:fetch##*/}Normally when _Id_ is set, the items and count outputs are immediately updated with the content of the array referenced by the _Id_. If you want to control how the data is updated you can connect to the _Fetch_ signal input. Then you need to explictly send a signal here for the **Array** node to fetch the data. Before an array have been fetched none of the modify and set operations or source items will have any affect.{/*##input##*/} |
## Outputs
| Data | Description |
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Id</span> | <##output:id##>The _Id_ for this **Array**.<##output##> |
| <span className="ndl-data">Items</span> | <##output:items##>This is an output that can be connected to others that can take **Array** inputs, such as the [Repeater](/nodes/ui-controls/repeater) node. It will hold an `Noodl.Array` type.<##output##> |
| <span className="ndl-data">Count</span> | <##output:count##>The number of items in the **Array**.<##output##> |
| <span className="ndl-data">Id</span> | {/*##output:id##*/}The _Id_ for this **Array**.{/*##output##*/} |
| <span className="ndl-data">Items</span> | {/*##output:items##*/}This is an output that can be connected to others that can take **Array** inputs, such as the [Repeater](/nodes/ui-controls/repeater) node. It will hold an `Noodl.Array` type.{/*##output##*/} |
| <span className="ndl-data">Count</span> | {/*##output:count##*/}The number of items in the **Array**.{/*##output##*/} |
| Signal | Description |
| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Changed</span> | <##output:changed##>This signal is triggered when the content of the array is changed, either by an action on this node or by some other node in the graph that operates on the same array Id.<##output##> |
| <span className="ndl-signal">Fetched</span> | <##output:fetched##>Triggered when a _Fetch_ action has been performed and the data is ready.<##output##> |
| <span className="ndl-signal">Changed</span> | {/*##output:changed##*/}This signal is triggered when the content of the array is changed, either by an action on this node or by some other node in the graph that operates on the same array Id.{/*##output##*/} |
| <span className="ndl-signal">Fetched</span> | {/*##output:fetched##*/}Triggered when a _Fetch_ action has been performed and the data is ready.{/*##output##*/} |

10
nodes/data/array/clear-array/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Clear Array node
---
<##head##>
{/*##head##*/}
# Clear Array
@@ -16,20 +16,20 @@ This node is used to remove all _Objects_ from an _Array_. The Array is referred
</div>
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| ------------------------------------------ | ------------------------------------------------------------------------------ |
| <span className="ndl-data">Array Id</span> | <##input:collectionId##>The _Id_ of the Array that will be cleared.<##input##> |
| <span className="ndl-data">Array Id</span> | {/*##input:collectionId##*/}The _Id_ of the Array that will be cleared.{/*##input##*/} |
| Signal | Description |
| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Do</span> | <##input:do##>This actions removes all the Objects from the Array with the _Id_ set on the input _Array Id_.<##input##> |
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}This actions removes all the Objects from the Array with the _Id_ set on the input _Array Id_.{/*##input##*/} |
## Outputs
| Signal | Description |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Done</span> | <##output:done##>This event is sent when the removal is done, and the Array is empty.<##output##> |
| <span className="ndl-signal">Done</span> | {/*##output:done##*/}This event is sent when the removal is done, and the Array is empty.{/*##output##*/} |

12
nodes/data/array/create-new-array/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Create New Array node
---
<##head##>
{/*##head##*/}
# Create New Array
@@ -16,24 +16,24 @@ Creates a new Array. The outgoing property _Id_ is the id of the newly created a
</div>
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Items</span> | <##input:items##>An array containing initial items of the new array. It will be read when the _Do_ signal is triggered. In other words, the new Array will be a copy of the provided Array, containing the same Objects.<##input##> |
| <span className="ndl-data">Items</span> | {/*##input:items##*/}An array containing initial items of the new array. It will be read when the _Do_ signal is triggered. In other words, the new Array will be a copy of the provided Array, containing the same Objects.{/*##input##*/} |
| Signal | Description |
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Do</span> | <##input:do##>Sending a signal to this input creates the new Array. The _Id_ of the newly created array will be set on the _Id_ output. Each triggering will create a new Array, hence changing the _Id_ output.<##input##> |
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}Sending a signal to this input creates the new Array. The _Id_ of the newly created array will be set on the _Id_ output. Each triggering will create a new Array, hence changing the _Id_ output.{/*##input##*/} |
## Outputs
| Data | Description |
| ------------------------------------ | ---------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Id</span> | <##output:id##>The Id of the newly created Array. You use this Id to refer to the Array.<##output##> |
| <span className="ndl-data">Id</span> | {/*##output:id##*/}The Id of the newly created Array. You use this Id to refer to the Array.{/*##output##*/} |
| Signal | Description |
| ---------------------------------------- | ------------------------------------------------------------------------------------------ |
| <span className="ndl-signal">Done</span> | <##output:done##>This signal will be sent when the new Array has been created.<##output##> |
| <span className="ndl-signal">Done</span> | {/*##output:done##*/}This signal will be sent when the new Array has been created.{/*##output##*/} |

12
nodes/data/array/insert-into-array/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Insert Into Array node
---
<##head##>
{/*##head##*/}
# Insert Object Into Array
@@ -16,21 +16,21 @@ This node is used to insert an _Object_ into an _Array_. Both the Array and the
</div>
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| ------------------------------------------- | ----------------------------------------------------------------------------------- |
| <span className="ndl-data">Array Id</span> | <##input:collectionId##>The _Id_ of the Array to insert the Object into.<##input##> |
| <span className="ndl-data">Object Id</span> | <##input:modifyId##>The _Id_ of the Object to insert into the Array.<##input##> |
| <span className="ndl-data">Array Id</span> | {/*##input:collectionId##*/}The _Id_ of the Array to insert the Object into.{/*##input##*/} |
| <span className="ndl-data">Object Id</span> | {/*##input:modifyId##*/}The _Id_ of the Object to insert into the Array.{/*##input##*/} |
| Signal | Description |
| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Do</span> | <##input:do##>Sending a signal to this input inserts the Object with the _Id_ set on the input _Object Id_ into the Array with the _Id_ set on the input _Array Id_.<##input##> |
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}Sending a signal to this input inserts the Object with the _Id_ set on the input _Object Id_ into the Array with the _Id_ set on the input _Array Id_.{/*##input##*/} |
## Outputs
| Signal | Description |
| ---------------------------------------- | ----------------------------------------------------------------------------- |
| <span className="ndl-signal">Done</span> | <##output:done##>This signal is sent when the insertion is ready.<##output##> |
| <span className="ndl-signal">Done</span> | {/*##output:done##*/}This signal is sent when the insertion is ready.{/*##output##*/} |

12
nodes/data/array/remove-from-array/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Remove From Array node
---
<##head##>
{/*##head##*/}
# Remove Object From Array
@@ -17,21 +17,21 @@ If the _Object_ to be removed is not in the array, nothing will happen.
</div>
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| ------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Array Id</span> | <##input:collectionId##>The _Id_ of the Array from which the Object will be removed.<##input##> |
| <span className="ndl-data">Object Id</span> | <##input:modifyId##>The _Id_ of the Object to remove from the Array.<##input##> |
| <span className="ndl-data">Array Id</span> | {/*##input:collectionId##*/}The _Id_ of the Array from which the Object will be removed.{/*##input##*/} |
| <span className="ndl-data">Object Id</span> | {/*##input:modifyId##*/}The _Id_ of the Object to remove from the Array.{/*##input##*/} |
| Signal | Description |
| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Do</span> | <##input:do##>This actions removes the Object with the _Id_ set on the input _Object Id_ from the Array with the _Id_ set on the input _Array Id_.<##input##> |
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}This actions removes the Object with the _Id_ set on the input _Object Id_ from the Array with the _Id_ set on the input _Array Id_.{/*##input##*/} |
## Outputs
| Signal | Description |
| ---------------------------------------- | -------------------------------------------------------------------------- |
| <span className="ndl-signal">Done</span> | <##output:done##>This signal is sent when the removal is done.<##output##> |
| <span className="ndl-signal">Done</span> | {/*##output:done##*/}This signal is sent when the removal is done.{/*##output##*/} |

50
nodes/data/array/static-array/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Static Array node
---
<##head##>
{/*##head##*/}
# Static Array
@@ -16,8 +16,10 @@ Store static data to populate an [Array](/nodes/data/array/array-node) with item
</div>
You can provide the data in either **CSV** format or, **JSON** format. The **items** output is of **Noodl.Array** format. The content of the array is reset whenever the application is refreshed.
<##head##>
You can provide the data in either **CSV** format or, **JSON** format. The **items** output is of **Noodl.Array** format.
The content of the array is reset whenever the application is refreshed.
{/*##head##*/}
## Inputs
@@ -30,33 +32,37 @@ You can provide the data in either **CSV** format or, **JSON** format. The **ite
The first row defines the name of all properties. Subsequent rows defines the data values.
Example:
lamp,topic
Kitchen Lamp,/lamps/1
Office Lamp,/lamps/2
Office Lamp 2,/lamps/4
```
lamp,topic
Kitchen Lamp,/lamps/1
Office Lamp,/lamps/2
Office Lamp 2,/lamps/4
```
### JSON
Define the name of the properties, and the data, using a JSON array.
Example:
[
{
"lamp": "Kitchen Lamp",
"topic": "/lamps/1"
},
{
"lamp": "Office Lamp",
"topic": "/lamps/2"
},
{
"lamp": "Office Lamp 2",
"topic": "/lamps/4"
}
]
```json
[
{
"lamp": "Kitchen Lamp",
"topic": "/lamps/1"
},
{
"lamp": "Office Lamp",
"topic": "/lamps/2"
},
{
"lamp": "Office Lamp 2",
"topic": "/lamps/4"
}
]
```
## Outputs
| Data | Description |
| --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Items</span> | <##output:items##>A `Noodl.Array` object that can be connected to e.g. an [Array](/nodes/data/array/array-node), [JavaScript](/docs/guides/business-logic/javascript) or [Repeater](/nodes/ui-controls/repeater).<##output##> |
| <span className="ndl-data">Items</span> | {/*##output:items##*/}A `Noodl.Array` object that can be connected to e.g. an [Array](/nodes/data/array/array-node), [JavaScript](/docs/guides/business-logic/javascript) or [Repeater](/nodes/ui-controls/repeater).{/*##output##*/} |

4
nodes/data/boolean/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Boolean node
---
<##head##>
{/*##head##*/}
# Boolean
@@ -24,7 +24,7 @@ You can connect the <span className="ndl-node">Boolean</span> node to a <span cl
</div>
<##head##>
{/*##head##*/}
## Inputs

18
nodes/data/cloud-data/add-record-relation/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Add Record Relation node
---
<##head##>
{/*##head##*/}
# Add Record Relation
@@ -22,31 +22,31 @@ You need to provide the <span className="ndl-data">Id</span> of the owning recor
Finally, send a <span className="ndl-signal">signal</span> to <span className="ndl-signal">Do</span> to perform the action.
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Class</span> | The **Class** of the owning record where you want to add the related object to. |
| <span className="ndl-data">Id</span> | <##input:id##>Specify the **Id** of the record that you want to use as the owning record to add a relation to.<##input##> This input is only valid if **Id Source** is set to **Specify explicitly**. |
| <span className="ndl-data">Id</span> | {/*##input:id##*/}Specify the **Id** of the record that you want to use as the owning record to add a relation to.{/*##input##*/} This input is only valid if **Id Source** is set to **Specify explicitly**. |
| <span className="ndl-data">Relation</span> | You need to choose the **Relation** property of the owning class to use when creating the relation. |
| <span className="ndl-data">Target Record Id</span> | <##input:target record id##>This input should be connected to the **Id** of the target record of the new relation.<##input##> |
| <span className="ndl-data">Target Record Id</span> | {/*##input:target record id##*/}This input should be connected to the **Id** of the target record of the new relation.{/*##input##*/} |
@include "../_id-source.md"
| Signal | Description |
| -------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Do</span> | <##input:do##>When a signal is received on this input the relation will be created in the backend.<##input##> |
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}When a signal is received on this input the relation will be created in the backend.{/*##input##*/} |
## Outputs
| Data | Description |
| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Id</span> | <##output:id##>This is the **Id** of the owning record that have / will receive the new relation. It is simply a mirror of the **Id** input.<##output##> |
| <span className="ndl-data">Error</span> | <##output:error##>The error message in case something went wrong when attempting to add the relation in the backend.<##output##> |
| <span className="ndl-data">Id</span> | {/*##output:id##*/}This is the **Id** of the owning record that have / will receive the new relation. It is simply a mirror of the **Id** input.{/*##output##*/} |
| <span className="ndl-data">Error</span> | {/*##output:error##*/}The error message in case something went wrong when attempting to add the relation in the backend.{/*##output##*/} |
| Signal | Description |
| ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Success</span> | <##output:success##>A signal is sent on this output when the relation has been added successfully in the backend.<##output##> |
| <span className="ndl-signal">Failure</span> | <##output:failure##>A signal is sent on this output if something went wrong when adding the relation in the backend. The error message will be outputed on the **Error** output.<##output##> |
| <span className="ndl-signal">Success</span> | {/*##output:success##*/}A signal is sent on this output when the relation has been added successfully in the backend.{/*##output##*/} |
| <span className="ndl-signal">Failure</span> | {/*##output:failure##*/}A signal is sent on this output if something went wrong when adding the relation in the backend. The error message will be outputed on the **Error** output.{/*##output##*/} |

10
nodes/data/cloud-data/cloud-file/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Cloud File node
---
<##head##>
{/*##head##*/}
# Cloud File
@@ -23,17 +23,17 @@ Represents a file that has been uploaded to the Noodl Cloud Services and stored
![](/nodes/data/cloud-data/upload-file/upload-file.png)
</div>
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Cloud File</span> | <##input:cloud file##>A file that has been stored in the Noodl Cloud Services. Often used in combination with a **Record** to retrieve the **Name** and **URL** of a file.<##input##> |
| <span className="ndl-data">Cloud File</span> | {/*##input:cloud file##*/}A file that has been stored in the Noodl Cloud Services. Often used in combination with a **Record** to retrieve the **Name** and **URL** of a file.{/*##input##*/} |
## Outputs
| Data | Description |
| -------------------------------------- | -------------------------------------------------- |
| <span className="ndl-data">URL</span> | <##output:url##>The URL of the file.<##output##> |
| <span className="ndl-data">Name</span> | <##output:name##>The Name of the file.<##output##> |
| <span className="ndl-data">URL</span> | {/*##output:url##*/}The URL of the file.{/*##output##*/} |
| <span className="ndl-data">Name</span> | {/*##output:name##*/}The Name of the file.{/*##output##*/} |

14
nodes/data/cloud-data/cloud-function/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Cloud Function node
---
<##head##>
{/*##head##*/}
# Cloud Function
@@ -38,7 +38,7 @@ If a **Failure** signal is emitted you can also use the **Error** output that wi
If a **Success** signal is sent the result parameters will be available as outputs on the **Cloud Function** node.
<##head##>
{/*##head##*/}
:::note
@@ -53,25 +53,25 @@ This does not happen when running Cloud Functions locally where there is no time
| Data | Description |
| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-data">Function</span> | <##input:functionName##>The cloud function component that this node will call.<##input##> |
| <span className="ndl-data">Function</span> | {/*##input:functionName##*/}The cloud function component that this node will call.{/*##input##*/} |
### Parameters
The **Cloud Function** node will receive all parameters specified in the [Request](/nodes/cloud-functions/request) node in the cloud function component as inputs. When the <span className="ndl-signal">Call</span> signal is received the values on the inputs will be sent to the cloud funciton.
| Signal | Description |
| ---------------------------------------- | ------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Call</span> | <##input:call##>Send a signal on this input to issue the request to the cloud function.<##input##> |
| <span className="ndl-signal">Call</span> | {/*##input:call##*/}Send a signal on this input to issue the request to the cloud function.{/*##input##*/} |
## Outputs
| Data | Description |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-data">Error</span> | <##output:error##>If the cloud function results in an error status, this output will contain the error message. <##output##> |
| <span className="ndl-data">Error</span> | {/*##output:error##*/}If the cloud function results in an error status, this output will contain the error message. {/*##output##*/} |
### Result
The **Cloud Function** node will receive all result parameters specified in any [Response](/nodes/cloud-functions/response) node in the cloud function component that is called. When the cloud function completes and retuns a **Sucess** status, any result parameters sent back will be available on these outputs.
| Signal | Description |
| ------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Success</span> | <##output:success##>This is sent if the cloud function returns a **Success** status.<##output##> |
| <span className="ndl-signal">Failure</span> | <##output:failure##>This is sent if the cloud function returns a **Failure** status.<##output##> |
| <span className="ndl-signal">Success</span> | {/*##output:success##*/}This is sent if the cloud function returns a **Success** status.{/*##output##*/} |
| <span className="ndl-signal">Failure</span> | {/*##output:failure##*/}This is sent if the cloud function returns a **Failure** status.{/*##output##*/} |

12
nodes/data/cloud-data/config/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Config node
---
<##head##>
{/*##head##*/}
# Config
@@ -24,7 +24,7 @@ You pick a **Parameter** in the properties of the node. First you must specify t
</div>
<##head##>
{/*##head##*/}
When creating a parameter you can specify if it requires the **Master Key** or not. Requiring the master key means that you can only access these parameters in cloud functions, which is important for config parameters that needs to be kept secure.
@@ -58,20 +58,20 @@ For the node above we want a special config parameter for when running locally s
| Data | Description |
| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-data">Parameter</span> | <##input:configKey##>The config parameter to use for this node.<##input##> |
| <span className="ndl-data">Parameter</span> | {/*##input:configKey##*/}The config parameter to use for this node.{/*##input##*/} |
## Local Override
| Data | Description |
| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-data">Enable</span> | <##input:useDevValue##>Checking this will provide a special value for this node when running in the editor or from ```localhost```<##input##> |
| <span className="ndl-data">Value</span> | <##input:devValue##>The value to return from this node when running in the editor or on ```localhost```<##input##> |
| <span className="ndl-data">Enable</span> | {/*##input:useDevValue##*/}Checking this will provide a special value for this node when running in the editor or from ```localhost```{/*##input##*/} |
| <span className="ndl-data">Value</span> | {/*##input:devValue##*/}The value to return from this node when running in the editor or on ```localhost```{/*##input##*/} |
## Outputs
| Data | Description |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-data">Value</span> | <##output:value##>The value for this config parameter for the current active cloud service, or the local override. <##output##> |
| <span className="ndl-data">Value</span> | {/*##output:value##*/}The value for this config parameter for the current active cloud service, or the local override. {/*##output##*/} |

18
nodes/data/cloud-data/create-new-record/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Create New Record node
---
<##head##>
{/*##head##*/}
# Create New Record
@@ -18,19 +18,19 @@ This node is used to create a new record of a given class. You specify the class
You can also provide values for the properties of the record either via connections or by typing the values in the property panel.
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Class</span> | Choose a class for the record that you want to create. |
| <span className="ndl-data">Source Object Id</span> | <##input:source object id##>This input can be used to provide an object whose properties will be used as the initial values of the newly created record. <##input##> |
| <span className="ndl-data">Property Inputs</span> | When the class of the record to be created is choosen, all properties of that class will be available as inputs. When the **Do** signal is received a new record will be created with the values of the properties either specified in the property panel or via connections. <##input:prop-\*##>The value of these inputs will become the properties of the newly created record.<##input##> |
| <span className="ndl-data">Source Object Id</span> | {/*##input:source object id##*/}This input can be used to provide an object whose properties will be used as the initial values of the newly created record. {/*##input##*/} |
| <span className="ndl-data">Property Inputs</span> | When the class of the record to be created is choosen, all properties of that class will be available as inputs. When the **Do** signal is received a new record will be created with the values of the properties either specified in the property panel or via connections. {/*##input:prop-\*##*/}The value of these inputs will become the properties of the newly created record.{/*##input##*/} |
| Signal | Description |
| -------------------------------------- | ---------------------------------------------------------------------------- |
| <span className="ndl-signal">Do</span> | <##input:do##>Send a signal on this input to create a new record.<##input##> |
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}Send a signal on this input to create a new record.{/*##input##*/} |
@include "../_acl.md"
@@ -38,10 +38,10 @@ You can also provide values for the properties of the record either via connecti
| Data | Description |
| --------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Id</span> | <##output:id##>The **Id** of the new record that was created if the action was successful.<##output##> |
| <span className="ndl-data">Error</span> | <##output:error##>The specific error message in case something went wrong when creating the record.<##output##> |
| <span className="ndl-data">Id</span> | {/*##output:id##*/}The **Id** of the new record that was created if the action was successful.{/*##output##*/} |
| <span className="ndl-data">Error</span> | {/*##output:error##*/}The specific error message in case something went wrong when creating the record.{/*##output##*/} |
| Signal | Description |
| ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Success</span> | <##output:success##>A signal is sent here when the new record have been created successfully.<##output##> |
| <span className="ndl-signal">Failure</span> | <##output:failure##>A signal is sent on this output if something went wrong when creating the record.<##output##> You can find the specific error in the **Error** output. |
| <span className="ndl-signal">Success</span> | {/*##output:success##*/}A signal is sent here when the new record have been created successfully.{/*##output##*/} |
| <span className="ndl-signal">Failure</span> | {/*##output:failure##*/}A signal is sent on this output if something went wrong when creating the record.{/*##output##*/} You can find the specific error in the **Error** output. |

16
nodes/data/cloud-data/delete-record/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Delete Record node
---
<##head##>
{/*##head##*/}
# Delete Record
@@ -20,29 +20,29 @@ You will need to provide the **Id** of the record to be deleted, there are multi
Then send a signal on the **Do** input to perform the action.
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Class</span> | You need to select the **Class** of records that this node will act on. |
| <span className="ndl-data">Id</span> | <##input:id##>Specify the **Id** of the record that you want to delete.<##input##> This input is only valid if **Id Source** is set to **Specify explicitly**. |
| <span className="ndl-data">Id</span> | {/*##input:id##*/}Specify the **Id** of the record that you want to delete.{/*##input##*/} This input is only valid if **Id Source** is set to **Specify explicitly**. |
@include "../_id-source.md"
| Signal | Description |
| -------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Do</span> | <##input:do##>When a signal is received on this input the record will be deleted on the backend.<##input##> |
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}When a signal is received on this input the record will be deleted on the backend.{/*##input##*/} |
## Outputs
| Data | Description |
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-data">Id</span> | <##output:id##>The **Id** of the record that will be / was deleted by this node. Simply reflecting the **Id** input.<##output##> |
| <span className="ndl-data">Error</span> | <##output:error##>If something went wrong when deleting the record in the backend, this output will contain the error message.<##output##> |
| <span className="ndl-data">Id</span> | {/*##output:id##*/}The **Id** of the record that will be / was deleted by this node. Simply reflecting the **Id** input.{/*##output##*/} |
| <span className="ndl-data">Error</span> | {/*##output:error##*/}If something went wrong when deleting the record in the backend, this output will contain the error message.{/*##output##*/} |
| Signal | Description |
| ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Success</span> | <##output:success##>A signal is sent on this output when the record have been successfully deleted in the backend.<##output##> |
| <span className="ndl-signal">Failure</span> | <##output:failure##>A signal is sent on this output if something went wrong when attempting to delete the record in the backend.<##output##> |
| <span className="ndl-signal">Success</span> | {/*##output:success##*/}A signal is sent on this output when the record have been successfully deleted in the backend.{/*##output##*/} |
| <span className="ndl-signal">Failure</span> | {/*##output:failure##*/}A signal is sent on this output if something went wrong when attempting to delete the record in the backend.{/*##output##*/} |

26
nodes/data/cloud-data/filter-records/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Filter Record node
---
<##head##>
{/*##head##*/}
# Filter Record
@@ -23,32 +23,32 @@ You can specify both filter and sorting visually.
![](/nodes/data/cloud-data/filter-records/filter-records-visual.png)
</div>
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Enabled</span> | <##input:enabled##>If disabled the node will simply pass the input array through without change, if enabled the input array will be filtered and sorted.<##input##> |
| <span className="ndl-data">Enabled</span> | {/*##input:enabled##*/}If disabled the node will simply pass the input array through without change, if enabled the input array will be filtered and sorted.{/*##input##*/} |
| <span className="ndl-data">Class</span> | The **Class** of records that the input array is assumed to contain. |
| <span className="ndl-data">Use Limit</span> | <##input:use limit##>Enabled or disable limiting of the input array to a specific number of maximum records.<##input##> |
| <span className="ndl-data">Limit</span> | <##input:limit##>The number of maximum records to limit the output filtered array to contain.<##input##> |
| <span className="ndl-data">Skip</span> | <##input:skip##>The number of records in the beginning of the output filtered array to skip.<##input##> |
| <span className="ndl-data">Items</span> | <##input:items##>The input array of records that should be filtered by this node.<##input##> |
| <span className="ndl-data">Filter Parameter Inputs</span> | <##input:fp-\*##>Each filter parameter get an input where a connection can be made to provide the value for the paramter.<##input##> |
| <span className="ndl-data">Use Limit</span> | {/*##input:use limit##*/}Enabled or disable limiting of the input array to a specific number of maximum records.{/*##input##*/} |
| <span className="ndl-data">Limit</span> | {/*##input:limit##*/}The number of maximum records to limit the output filtered array to contain.{/*##input##*/} |
| <span className="ndl-data">Skip</span> | {/*##input:skip##*/}The number of records in the beginning of the output filtered array to skip.{/*##input##*/} |
| <span className="ndl-data">Items</span> | {/*##input:items##*/}The input array of records that should be filtered by this node.{/*##input##*/} |
| <span className="ndl-data">Filter Parameter Inputs</span> | {/*##input:fp-\*##*/}Each filter parameter get an input where a connection can be made to provide the value for the paramter.{/*##input##*/} |
| Signal | Description |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Filter</span> | <##input:filter##>Send a signal on this input to perform the filtering, this will produce a new filtered array on the **Items** output. If this input does not have a connection, the input array will be filtered every time it is updated.<##input##> |
| <span className="ndl-signal">Filter</span> | {/*##input:filter##*/}Send a signal on this input to perform the filtering, this will produce a new filtered array on the **Items** output. If this input does not have a connection, the input array will be filtered every time it is updated.{/*##input##*/} |
## Outputs
| Data | Description |
| ------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Items</span> | <##output:items##>This output will contain the filtered array of records.<##output##> |
| <span className="ndl-data">Count</span> | <##output:count##>The number of records in the filtered output array.<##output##> |
| <span className="ndl-data">First Record Id</span> | <##output:first record id##>The **Id** of the first record in the filtered output array.<##output##> |
| <span className="ndl-data">Items</span> | {/*##output:items##*/}This output will contain the filtered array of records.{/*##output##*/} |
| <span className="ndl-data">Count</span> | {/*##output:count##*/}The number of records in the filtered output array.{/*##output##*/} |
| <span className="ndl-data">First Record Id</span> | {/*##output:first record id##*/}The **Id** of the first record in the filtered output array.{/*##output##*/} |
| Signal | Description |
| -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Filtered</span> | <##output:filtered##>A signal will be sent on this output when the input array have been successfully filtered.<##output##> |
| <span className="ndl-signal">Filtered</span> | {/*##output:filtered##*/}A signal will be sent on this output when the input array have been successfully filtered.{/*##output##*/} |

30
nodes/data/cloud-data/query-records/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Query Records node
---
<##head##>
{/*##head##*/}
# Query Records
@@ -24,7 +24,7 @@ You can specify the query using filter, sorting and limit in the Property Panel.
</div>
<##head##>
{/*##head##*/}
## Filters
@@ -320,27 +320,27 @@ sort(["-Age", "createdAt"]);
| --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Class</span> | Select the **Class** for the types of records this node should query. When the **Class** is selected you can create filters and sorting based on the properties of the **Class**. |
| <span className="ndl-data">Filter</span> | This specifies the type of filter, you can choose from:<br/><br/>`Visual`: Specify your filter using the visual filter editor.<br/>`JavaScript`: Specify your filter using JavaScript (this is more flexible and you can create more dynamic queyries but it's also more complex) |
| <span className="ndl-data">Use Limit</span> | <##input:use limit##>Enable or disable the use of limit, i.e. that you can specify how many records are returned as a maximum and if a number of record should be skipped.<##input##> |
| <span className="ndl-data">Limit</span> | <##input:limit##>The maximum number of records to be returned by the backend.<##input##> |
| <span className="ndl-data">Skip</span> | <##input:skip##>This property allows you to skip a number of records from being returned by the backend. Using **Skip** and **Limit** allows you to do paging, e.g. return records from 10-20.<##input##> |
| <span className="ndl-data">Fetch Total Count</span> | <##input:storageEnableCount##>Enable this to also query for the total count of records matching the filters. Even if you limit the returned result. <##input##> |
| <span className="ndl-data">Query Parameters</span> | <##input:qp-\*##>The input for specifying the value of a query parameter.<##input##> Each paramteter used in your query will get an input where you can provide a value through a connection.<##input##> |
| <span className="ndl-data">Use Limit</span> | {/*##input:use limit##*/}Enable or disable the use of limit, i.e. that you can specify how many records are returned as a maximum and if a number of record should be skipped.{/*##input##*/} |
| <span className="ndl-data">Limit</span> | {/*##input:limit##*/}The maximum number of records to be returned by the backend.{/*##input##*/} |
| <span className="ndl-data">Skip</span> | {/*##input:skip##*/}This property allows you to skip a number of records from being returned by the backend. Using **Skip** and **Limit** allows you to do paging, e.g. return records from 10-20.{/*##input##*/} |
| <span className="ndl-data">Fetch Total Count</span> | {/*##input:storageEnableCount##*/}Enable this to also query for the total count of records matching the filters. Even if you limit the returned result. {/*##input##*/} |
| <span className="ndl-data">Query Parameters</span> | {/*##input:qp-\*##*/}The input for specifying the value of a query parameter.{/*##input##*/} Each paramteter used in your query will get an input where you can provide a value through a connection.{/*##input##*/} |
| Signal | Description |
| -------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Do</span> | <##input:do##>Send a signal here to perform the query and fetch matching records from the backend.<##input##> |
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}Send a signal here to perform the query and fetch matching records from the backend.{/*##input##*/} |
## Outputs
| Data | Description |
| ------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Items</span> | <##output:items##>The result of the query as an array of **Records**.<##output##> |
| <span className="ndl-data">Count</span> | <##output:count##>The number of records in the result.<##output##> |
| <span className="ndl-data">First Record Id</span> | <##output:first record id##>The Id of the first Record in the result array.<##output##> |
| <span className="ndl-data">Error</span> | <##output:error##>This output contains the error message incase something when wrong when executing the query.<##output##> |
| <span className="ndl-data">Total Count</span> | <##output:storageTotalCount##>If **Fetch Total Count** is enabled then this output will contain the total number of records that match the query. Even if you limit the returned result.<##output##> |
| <span className="ndl-data">Items</span> | {/*##output:items##*/}The result of the query as an array of **Records**.{/*##output##*/} |
| <span className="ndl-data">Count</span> | {/*##output:count##*/}The number of records in the result.{/*##output##*/} |
| <span className="ndl-data">First Record Id</span> | {/*##output:first record id##*/}The Id of the first Record in the result array.{/*##output##*/} |
| <span className="ndl-data">Error</span> | {/*##output:error##*/}This output contains the error message incase something when wrong when executing the query.{/*##output##*/} |
| <span className="ndl-data">Total Count</span> | {/*##output:storageTotalCount##*/}If **Fetch Total Count** is enabled then this output will contain the total number of records that match the query. Even if you limit the returned result.{/*##output##*/} |
| Signal | Description |
| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-signal">Success</span> | <##output:success##>A signal is sent here if the query was successful and the result is ready.<##output##> |
| <span className="ndl-signal">Failure</span> | <##output:failure##>A signal is sent here if something went wrong with the query. You can find the error message via the **Error** output.<##output##> |
| <span className="ndl-signal">Success</span> | {/*##output:success##*/}A signal is sent here if the query was successful and the result is ready.{/*##output##*/} |
| <span className="ndl-signal">Failure</span> | {/*##output:failure##*/}A signal is sent here if something went wrong with the query. You can find the error message via the **Error** output.{/*##output##*/} |

22
nodes/data/cloud-data/record/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Record node
---
<##head##>
{/*##head##*/}
# Record
@@ -19,32 +19,32 @@ This node is used to read data from a **Record**. A **Record** is an **Object**
You have to choose the class for the **Record** node in the property panel and you must make sure that the node has the Id of the record it should access (there are multiple ways to do this, see full docs for details).
Then you can access the properties of the specific **Record** through the property outputs.
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Class</span> | Select the **Class** for this Records that this node will get data from. Choosing the **Class** will make the node get all properties of the class as outputs. |
| <span className="ndl-data">Id</span> | <##input:id##>The Id of the **Record** that this node should read data from.<##input##> |
| <span className="ndl-data">Id</span> | {/*##input:id##*/}The Id of the **Record** that this node should read data from.{/*##input##*/} |
@include "../_id-source.md"
| Signal | Description |
| ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Fetch</span> | <##input:fetch##>Send a signal on this input to fetch the data for this **Record** from the backend. All **Record** nodes that share the **Id** with this node (i.e. are reading data from the same record) will be updated.<##input##> |
| <span className="ndl-signal">Fetch</span> | {/*##input:fetch##*/}Send a signal on this input to fetch the data for this **Record** from the backend. All **Record** nodes that share the **Id** with this node (i.e. are reading data from the same record) will be updated.{/*##input##*/} |
## Outputs
| Data | Description |
| -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Id</span> | <##output:id##>The Id of the **Record** this node is accessing the properties for.<##output##> |
| <span className="ndl-data">Error</span> | <##output:error##>This will contain the error message if a fetch action failed and the **Failure** signal was emitted.<##output##> |
| <span className="ndl-data">Class Properties</span> | <##output:prop-\*##>The value of this property in the record that the node reads from.<##output##> This node will have an output for each property in the **Class** that have been selected on the node. |
| <span className="ndl-data">Id</span> | {/*##output:id##*/}The Id of the **Record** this node is accessing the properties for.{/*##output##*/} |
| <span className="ndl-data">Error</span> | {/*##output:error##*/}This will contain the error message if a fetch action failed and the **Failure** signal was emitted.{/*##output##*/} |
| <span className="ndl-data">Class Properties</span> | {/*##output:prop-\*##*/}The value of this property in the record that the node reads from.{/*##output##*/} This node will have an output for each property in the **Class** that have been selected on the node. |
| Signal | Description |
| ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Fetched</span> | <##output:fetched##>A signal is sent on this output when a **Fetch** has been completed successfully. This is as a result of triggering a fetch by sending a signal to the **Fetch** input.<##output##> |
| <span className="ndl-signal">Failure</span> | <##output:failure##>A signal is sent on this output if a fetch action has failed. This is a potential result of triggering a fetch by sending a signal to the **Fetch** input.<##output##> |
| <span className="ndl-signal">Changed</span> | <##output:changed##>A signal is sent on this output if the record that this node is reading data from has changed locally.<##output##> |
| <span className="ndl-signal">Property Changed Signal</span> | <##output:changed-\*##>A signal is sent here if the value of the property on the record this node is reading data from has changed locally.<##output##> |
| <span className="ndl-signal">Fetched</span> | {/*##output:fetched##*/}A signal is sent on this output when a **Fetch** has been completed successfully. This is as a result of triggering a fetch by sending a signal to the **Fetch** input.{/*##output##*/} |
| <span className="ndl-signal">Failure</span> | {/*##output:failure##*/}A signal is sent on this output if a fetch action has failed. This is a potential result of triggering a fetch by sending a signal to the **Fetch** input.{/*##output##*/} |
| <span className="ndl-signal">Changed</span> | {/*##output:changed##*/}A signal is sent on this output if the record that this node is reading data from has changed locally.{/*##output##*/} |
| <span className="ndl-signal">Property Changed Signal</span> | {/*##output:changed-\*##*/}A signal is sent here if the value of the property on the record this node is reading data from has changed locally.{/*##output##*/} |

18
nodes/data/cloud-data/remove-record-relation/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Remove Record Relation node
---
<##head##>
{/*##head##*/}
# Remove Record Relation
@@ -22,31 +22,31 @@ You need to provide the <span className="ndl-data">Id</span> of the owning recor
Finally, send a <span className="ndl-signal">signal</span> to <span className="ndl-signal">Do</span> to perform the action.
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Class</span> | The **Class** of the owning record where you want to remove the relation from. |
| <span className="ndl-data">Id</span> | <##input:id##>Specify the **Id** of the record that you want to use as the owning record to remove an existing relation from.<##input##> This input is only valid if **Id Source** is set to **Specify explicitly**. |
| <span className="ndl-data">Id</span> | {/*##input:id##*/}Specify the **Id** of the record that you want to use as the owning record to remove an existing relation from.{/*##input##*/} This input is only valid if **Id Source** is set to **Specify explicitly**. |
| <span className="ndl-data">Relation</span> | You need to choose the **Relation** property of the owning class to use when removing the relation. |
| <span className="ndl-data">Target Record Id</span> | <##input:target record id##>This input should be connected to the **Id** of the target record that have an existing relation to the owning record via the **Relation** property that should be removed.<##input##> |
| <span className="ndl-data">Target Record Id</span> | {/*##input:target record id##*/}This input should be connected to the **Id** of the target record that have an existing relation to the owning record via the **Relation** property that should be removed.{/*##input##*/} |
@include "../_id-source.md"
| Signal | Description |
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Do</span> | <##input:do##>When a signal is received on this input the relation will be removed in the backend, if it exists.<##input##> |
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}When a signal is received on this input the relation will be removed in the backend, if it exists.{/*##input##*/} |
## Outputs
| Data | Description |
| --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Id</span> | <##output:id##>This is the **Id** of the owning record. It is simply a mirror of the **Id** input.<##output##> |
| <span className="ndl-data">Error</span> | <##output:error##>The error message in case something went wrong when attempting to remove the relation in the backend.<##output##> |
| <span className="ndl-data">Id</span> | {/*##output:id##*/}This is the **Id** of the owning record. It is simply a mirror of the **Id** input.{/*##output##*/} |
| <span className="ndl-data">Error</span> | {/*##output:error##*/}The error message in case something went wrong when attempting to remove the relation in the backend.{/*##output##*/} |
| Signal | Description |
| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Success</span> | <##output:success##>A signal is sent on this output when the relation has been removed successfully in the backend.<##output##> |
| <span className="ndl-signal">Failure</span> | <##output:failure##>A signal is sent on this output if something went wrong when removing the relation in the backend. The error message will be outputed on the **Error** output.<##output##> |
| <span className="ndl-signal">Success</span> | {/*##output:success##*/}A signal is sent on this output when the relation has been removed successfully in the backend.{/*##output##*/} |
| <span className="ndl-signal">Failure</span> | {/*##output:failure##*/}A signal is sent on this output if something went wrong when removing the relation in the backend. The error message will be outputed on the **Error** output.{/*##output##*/} |

22
nodes/data/cloud-data/set-record-properties/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Set Record Properties node
---
<##head##>
{/*##head##*/}
# Set Record Properties
@@ -19,23 +19,23 @@ This action node will set property values of a record.
You need specify the class of the record in the property panel. Then you can either specify the values of the properties to set in the property panel or by providing them as an input connection.
Send a <span className="ndl-signal">signal</span> to <span className="ndl-signal">Do</span> to perform the action.
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| ------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Class</span> | The class of record for this node. Choosing the class will determine which property inputs that become available on the node. |
| <span className="ndl-data">Store to</span> | <##input:store to##>Specifies if this node should store both to the cloud and locally, or only locally.<##input##> |
| <span className="ndl-data">Properties to store</span> | <##input:properties to store##>Specifies if only the explicitly specified properties should be save, **only specified**, this means that only the properties that have a value either in the property panel or via an input connection will be written to the cloud record. If **All** is selected that means that all properties will always be written, if there is no explicit value provided on this node the value of the object with the corresponding **Id** will be used.<##input##> |
| <span className="ndl-data">Id</span> | <##input:id##>Specify the **Id** of the record that you want to set the properties on.<##input##> This input is only valid if **Id Source** is set to **Specify explicitly**. |
| <span className="ndl-data">Property Inputs</span> | <##input:prop-\*##>The value to set this property to when the action is triggered.<##input##> For each property in the specified class there will be an input of the correct type. You can provide the values for the inputs either through connections or by specifying them in the property panel. |
| <span className="ndl-data">Store to</span> | {/*##input:store to##*/}Specifies if this node should store both to the cloud and locally, or only locally.{/*##input##*/} |
| <span className="ndl-data">Properties to store</span> | {/*##input:properties to store##*/}Specifies if only the explicitly specified properties should be save, **only specified**, this means that only the properties that have a value either in the property panel or via an input connection will be written to the cloud record. If **All** is selected that means that all properties will always be written, if there is no explicit value provided on this node the value of the object with the corresponding **Id** will be used.{/*##input##*/} |
| <span className="ndl-data">Id</span> | {/*##input:id##*/}Specify the **Id** of the record that you want to set the properties on.{/*##input##*/} This input is only valid if **Id Source** is set to **Specify explicitly**. |
| <span className="ndl-data">Property Inputs</span> | {/*##input:prop-\*##*/}The value to set this property to when the action is triggered.{/*##input##*/} For each property in the specified class there will be an input of the correct type. You can provide the values for the inputs either through connections or by specifying them in the property panel. |
@include "../_id-source.md"
| Signal | Description |
| -------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Do</span> | <##input:do##>When a signal is received on this input the properties will be set on the record.<##input##> |
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}When a signal is received on this input the properties will be set on the record.{/*##input##*/} |
@include "../_acl.md"
@@ -43,10 +43,10 @@ Send a <span className="ndl-signal">signal</span> to <span className="ndl-signal
| Data | Description |
| --------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Id</span> | <##output:id##>The **Id** of the record where the properties will be updated by this node.<##output##> |
| <span className="ndl-data">Error</span> | <##output:error##>The specific error message in case something went wrong when updating the record.<##output##> |
| <span className="ndl-data">Id</span> | {/*##output:id##*/}The **Id** of the record where the properties will be updated by this node.{/*##output##*/} |
| <span className="ndl-data">Error</span> | {/*##output:error##*/}The specific error message in case something went wrong when updating the record.{/*##output##*/} |
| Signal | Description |
| ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Success</span> | <##output:success##>A signal is sent here when the record have been updated successfully.<##output##> |
| <span className="ndl-signal">Failure</span> | <##output:failure##>A signal is sent on this output if something went wrong when updating the record.<##output##> You can find the specific error in the **Error** output. |
| <span className="ndl-signal">Success</span> | {/*##output:success##*/}A signal is sent here when the record have been updated successfully.{/*##output##*/} |
| <span className="ndl-signal">Failure</span> | {/*##output:failure##*/}A signal is sent on this output if something went wrong when updating the record.{/*##output##*/} You can find the specific error in the **Error** output. |

26
nodes/data/cloud-data/upload-file/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Upload File node
---
<##head##>
{/*##head##*/}
# Upload File
@@ -15,31 +15,31 @@ This node uploads a file to the Noodl Cloud Services. Can be used in combination
![](/nodes/data/cloud-data/upload-file/upload-file.png)
</div>
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">File</span> | <##input:file##>An HTML5 [File](https://developer.mozilla.org/en-US/docs/Web/API/File). The [File Picker](/nodes/utilities/open-file-picker) can be used to open a file dialog picker and generate the **File** from a local file. It's also possible to retrieve the File from external sources, or generate it by code. <##input##> |
| <span className="ndl-data">File</span> | {/*##input:file##*/}An HTML5 [File](https://developer.mozilla.org/en-US/docs/Web/API/File). The [File Picker](/nodes/utilities/open-file-picker) can be used to open a file dialog picker and generate the **File** from a local file. It's also possible to retrieve the File from external sources, or generate it by code. {/*##input##*/} |
| Signal | Description |
| ------------------------------------------ | ---------------------------------------------------------- |
| <span className="ndl-signal">Upload</span> | <##input:upload##>Triggers the upload to start.<##input##> |
| <span className="ndl-signal">Upload</span> | {/*##input:upload##*/}Triggers the upload to start.{/*##input##*/} |
## Outputs
| Data | Description |
| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Cloud File</span> | <##output:cloudFile##>A [Cloud File](/nodes/data/cloud-data/cloud-file), which consists of an URL and a file name. Can be connected to a property of a [Record](/nodes/data/cloud-data/record) if the property type is specified as 'File'.<##output##> |
| <span className="ndl-data">Total Bytes</span> | <##output:progressTotalBytes##>The total size of the file in bytes that is being uploaded.<##output##> |
| <span className="ndl-data">Uploaded Bytes</span> | <##output:progressLoadedBytes##>Contains the number of bytes have been uploaded so far. Starts at 0, and moves towards **Total Bytes** after the **Upload** input signal has been triggered. The value is updated each time the **Progress Changed** event is sent.<##output##> |
| <span className="ndl-data">Uploaded Percent</span> | <##output:progressLoadedPercent##>The current percentage of the file that have been uploaded. Starts at 0, and moves towards 100 after the **Upload** input signal has been triggered. The value is updated each time the **Progress Changed** event is sent.<##output##> |
| <span className="ndl-data">Error</span> | <##output:error##>The error message as a string, if the upload fails.<##output##> |
| <span className="ndl-data">Error Status Code</span> | <##output:errorStatus##>An [HTTP error code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status). For example, `413` if the file is too large.<##output##> |
| <span className="ndl-data">Cloud File</span> | {/*##output:cloudFile##*/}A [Cloud File](/nodes/data/cloud-data/cloud-file), which consists of an URL and a file name. Can be connected to a property of a [Record](/nodes/data/cloud-data/record) if the property type is specified as 'File'.{/*##output##*/} |
| <span className="ndl-data">Total Bytes</span> | {/*##output:progressTotalBytes##*/}The total size of the file in bytes that is being uploaded.{/*##output##*/} |
| <span className="ndl-data">Uploaded Bytes</span> | {/*##output:progressLoadedBytes##*/}Contains the number of bytes have been uploaded so far. Starts at 0, and moves towards **Total Bytes** after the **Upload** input signal has been triggered. The value is updated each time the **Progress Changed** event is sent.{/*##output##*/} |
| <span className="ndl-data">Uploaded Percent</span> | {/*##output:progressLoadedPercent##*/}The current percentage of the file that have been uploaded. Starts at 0, and moves towards 100 after the **Upload** input signal has been triggered. The value is updated each time the **Progress Changed** event is sent.{/*##output##*/} |
| <span className="ndl-data">Error</span> | {/*##output:error##*/}The error message as a string, if the upload fails.{/*##output##*/} |
| <span className="ndl-data">Error Status Code</span> | {/*##output:errorStatus##*/}An [HTTP error code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status). For example, `413` if the file is too large.{/*##output##*/} |
| Signal | Description |
| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-signal">Progress Changed</span> | <##output:progressChanged##>This event is used to track the upload progress. It is triggered multiple times during an upload when **Uploaded Bytes** and **Uploaded Percent** are updated.<##output##> |
| <span className="ndl-signal">Success</span> | <##output:success##>This event triggers when the file was uploaded successfully.<##output##> |
| <span className="ndl-signal">Failure</span> | <##output:failure##>This event triggers if there was en error uploading the file.<##output##> |
| <span className="ndl-signal">Progress Changed</span> | {/*##output:progressChanged##*/}This event is used to track the upload progress. It is triggered multiple times during an upload when **Uploaded Bytes** and **Uploaded Percent** are updated.{/*##output##*/} |
| <span className="ndl-signal">Success</span> | {/*##output:success##*/}This event triggers when the file was uploaded successfully.{/*##output##*/} |
| <span className="ndl-signal">Failure</span> | {/*##output:failure##*/}This event triggers if there was en error uploading the file.{/*##output##*/} |

4
nodes/data/color/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Color node
---
<##head##>
{/*##head##*/}
# Color
@@ -18,7 +18,7 @@ This node holds a <span className="ndl-data">color</span> value.
The <span className="ndl-data">color</span> value can either be static or dynamic using the <span className="ndl-data">Value</span> and <span className="ndl-signal">Set</span> inputs.
<##head##>
{/*##head##*/}
## Inputs

4
nodes/data/number/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Number node
---
<##head##>
{/*##head##*/}
# Number
@@ -24,7 +24,7 @@ You can also use the <span className="ndl-node">Number</span> node connected to
</div>
<##head##>
{/*##head##*/}
## Inputs

2
nodes/data/object/_properties.md
View File

@@ -2,4 +2,4 @@
| --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Properties To Set</span> | You can specify which properties to set by adding them to this list. Object don't have a schema with predefined properties like Records so you can choose any property name you want. |
| <span className="ndl-data">Property Types</span> | Each property that you want to set will give you the option of setting the type of the value that you want to set to that property. |
| <span className="ndl-data">Property Values</span> | <##input:prop-\*##>The value to set on the Object property when the action is performed. (Signal is receieved on the **Do** input)<##input##> Each property that you want to set (that was added to the **Properties to set** section above) will get it's own input both in the property panel and as a connection input. |
| <span className="ndl-data">Property Values</span> | {/*##input:prop-\*##*/}The value to set on the Object property when the action is performed. (Signal is receieved on the **Do** input){/*##input##*/} Each property that you want to set (that was added to the **Properties to set** section above) will get it's own input both in the property panel and as a connection input. |

10
nodes/data/object/create-new-object/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Create New Object node
---
<##head##>
{/*##head##*/}
# Create New Object
@@ -18,7 +18,7 @@ The node can be used to create a fresh new [Object](/nodes/data/object/object-no
You can provide any number of properties with values for your new Object. When the **Done** signal is sent the Object is created and you can perform other actions using the Object.
<##head##>
{/*##head##*/}
## Inputs
@@ -26,14 +26,14 @@ You can provide any number of properties with values for your new Object. When t
| Signal | Description |
| -------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Do</span> | <##input:do##>Send a signal in this input to create the new Object with the provided properties.<##input##> |
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}Send a signal in this input to create the new Object with the provided properties.{/*##input##*/} |
## Outputs
| Data | Description |
| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-data">Id</span> | <##output:id##>The **Id** of the newly created object, this output is valid only when the **Done** signal has been sent.<##output##> |
| <span className="ndl-data">Id</span> | {/*##output:id##*/}The **Id** of the newly created object, this output is valid only when the **Done** signal has been sent.{/*##output##*/} |
| Signal | Description |
| ---------------------------------------- | ----------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Done</span> | <##output:done##>A signal is sent on this output when the Object have been created.<##output##> |
| <span className="ndl-signal">Done</span> | {/*##output:done##*/}A signal is sent on this output when the Object have been created.{/*##output##*/} |

20
nodes/data/object/object-node/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Object node
---
<##head##>
{/*##head##*/}
# Object
@@ -24,7 +24,7 @@ The **Object** node is typically used together with the [Create New Object](/nod
</div>
<##head##>
{/*##head##*/}
You can also create and refer to an object statically (i.e. not using a [Create New Object](/nodes/data/object/create-new-object) by settings its **Id**. Generally, the **Id** is a global identifyer of the **Object** meaning that any **Object** nodes with the same idea will refer to the same data. If you change the properties in one **Object** node the values of all **Object** nodes with the same **Id** will be changed immediately, unless if you connect the **Fetch** signal.
@@ -42,11 +42,11 @@ Generally you use **Objects** as data holder for data that does not need to be s
| Data | Description |
| --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Custom Properties</span> | An **Object** node can have any amount of properties. Each property will get one input and output to set/get their current value. |
| <span className="ndl-data">Id</span> | <##input:id##>Set the _Id_ for this **Object**. All **Object** nodes with the same _Id_ will refer to the same data and have the same properties.<##input##> Changing a value of any property will immediately update the property in all other **Object** nodes with the same **Id** (unless if you connect the **Fetch** signal to a specific _Object_ node, see below). |
| <span className="ndl-data">Id</span> | {/*##input:id##*/}Set the _Id_ for this **Object**. All **Object** nodes with the same _Id_ will refer to the same data and have the same properties.{/*##input##*/} Changing a value of any property will immediately update the property in all other **Object** nodes with the same **Id** (unless if you connect the **Fetch** signal to a specific _Object_ node, see below). |
| Signal | Description |
| ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Fetch</span> | <##output:fetch##>Normally when an **Object** _Id_ is set, the property outputs are immediately updated. If you want to control how the data is updated you can connect to the _Fetch_ signal input. Then you need to explictly send a signal here for the **Object** node to fetch the data.<##output##> |
| <span className="ndl-signal">Fetch</span> | {/*##output:fetch##*/}Normally when an **Object** _Id_ is set, the property outputs are immediately updated. If you want to control how the data is updated you can connect to the _Fetch_ signal input. Then you need to explictly send a signal here for the **Object** node to fetch the data.{/*##output##*/} |
## Outputs
@@ -54,17 +54,17 @@ Generally you use **Objects** as data holder for data that does not need to be s
| Data | Description |
| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-data">Id</span> | <##output:id##>The _Id_ for this **Object** node.<##output##> |
| <span className="ndl-data">Id</span> | {/*##output:id##*/}The _Id_ for this **Object** node.{/*##output##*/} |
| <span className="ndl-data">Custom Properties</span> | An **Object** can have any amount of properties. Each property will get one output to get the current value. |
| Signal | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-signal">Changed</span> | <##output:changed##>Signal when any of the properties of this **Object** have changed.<##output##> |
| <span className="ndl-signal">Fetched</span> | <##output:fetched##>Signal when the **Object** has fetched and updated it's outputs. Note that the event is triggered no matter if the properties have changed or not.<##output##> |
| <span className="ndl-signal">Changed</span> | {/*##output:changed##*/}Signal when any of the properties of this **Object** have changed.{/*##output##*/} |
| <span className="ndl-signal">Fetched</span> | {/*##output:fetched##*/}Signal when the **Object** has fetched and updated it's outputs. Note that the event is triggered no matter if the properties have changed or not.{/*##output##*/} |
| <span className="ndl-signal">Changed Property Signals</span> | An **Object** will also get changed signal outputs for each of it's properties. They will emit a signal when the property changes value when this or some other **Object** node with the same _Id_ triggers a set. |
<span className="hidden-props-for-editor"><##output:changed-\*##>Triggered when this user defined property is changed.<##output##></span>
<span className="hidden-props-for-editor">{/*##output:changed-\*##*/}Triggered when this user defined property is changed.{/*##output##*/}</span>
<span className="hidden-props-for-editor"><##input:prop-\*##>User defined property.<##input##></span>
<span className="hidden-props-for-editor">{/*##input:prop-\*##*/}User defined property.{/*##input##*/}</span>
<span className="hidden-props-for-editor"><##output:prop-\*##>User defined property.<##output##></span>
<span className="hidden-props-for-editor">{/*##output:prop-\*##*/}User defined property.{/*##output##*/}</span>

12
nodes/data/object/set-object-properties/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Set Object Properties node
---
<##head##>
{/*##head##*/}
# Set Object Properties
@@ -26,7 +26,7 @@ You can then specify which properties you want to set on the Object in the prope
Finally, send a signal to **Do** to perform the action.
<##head##>
{/*##head##*/}
## Inputs
@@ -35,18 +35,18 @@ Finally, send a signal to **Do** to perform the action.
| Data | Description |
| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-data">Id Source</span> | An Id of a record is needed to perform the action of this node. The **Id Source** property specifies how this Id is retrieved, the options are:<br/><br/>`Specify explicitly`: This means you need to specify the Id of the record explicitly through e.g. a connection to the **Id** input.<br/>`From repeater`: This means that the Id for the record will be derived from a repeater. This option is only valid if the component this node is placed in is created by a repeater. Then this node will act on the repeater object that this component was created for. |
| <span className="ndl-data">Id</span> | <##input:id##>On this input you provide the **Id** of the object where you will set the properties.<##input##> |
| <span className="ndl-data">Id</span> | {/*##input:id##*/}On this input you provide the **Id** of the object where you will set the properties.{/*##input##*/} |
| Signal | Description |
| -------------------------------------- | -------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Do</span> | <##input:do##>Send a signal on this input to perform the action and set the properties.<##input##> |
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}Send a signal on this input to perform the action and set the properties.{/*##input##*/} |
## Outputs
| Data | Description |
| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-data">Id</span> | <##output:id##>The **Id** of the Object where you will / have set the properties. This is simply a mirror of the **Id** input.<##output##> |
| <span className="ndl-data">Id</span> | {/*##output:id##*/}The **Id** of the Object where you will / have set the properties. This is simply a mirror of the **Id** input.{/*##output##*/} |
| Signal | Description |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-signal">Done</span> | <##output:done##>A signal is sent on this output when the action is performed. You can use this to trigger other actions that needs to run after the properties have been set.<##output##> |
| <span className="ndl-signal">Done</span> | {/*##output:done##*/}A signal is sent on this output when the action is performed. You can use this to trigger other actions that needs to run after the properties have been set.{/*##output##*/} |

4
nodes/data/rest/README.md
View File

@@ -3,7 +3,7 @@ hide_title: true
title: REST node
---
<##head##>
{/*##head##*/}
# REST
@@ -17,7 +17,7 @@ This node is used to connect to external [REST](https://en.wikipedia.org/wiki/Re
You initiate the request by sending a <span className="ndl-signal">signal</span> to the <span className="ndl-signal">Fetch</span> input. Any inputs and outputs to the node are specified in the `request` and `response` scripts.
<##head##>
{/*##head##*/}
## Request and response script

4
nodes/data/run-tasks/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Run Tasks node
---
<##head##>
{/*##head##*/}
# Run Tasks
@@ -24,7 +24,7 @@ The <span className="ndl-node">Run Tasks</span> node needs a task component that
</div>
<##head##>
{/*##head##*/}
You can control the behaviour of how the tasks are run with the properties.

4
nodes/data/string/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: String node
---
<##head##>
{/*##head##*/}
# String
@@ -18,7 +18,7 @@ This node contains a <span className="ndl-data">string</span> value (text). It c
You can also use the String node connected to a <span className="ndl-node">Component Inputs</span> node. This will make sure the input shows up as a <span className="ndl-data">string</span> input in the Property Panel for instances of this component.
<##head##>
{/*##head##*/}
You can use it to provide a static value for input to other nodes. It is local to the component and cannot be accessed anywhere else in the graph.

16
nodes/data/user/log-in/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Log In node
---
<##head##>
{/*##head##*/}
# Log In
@@ -24,26 +24,26 @@ Once a user is logged in, their data can be accessed through the <span className
</div>
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| ------------------------------------------ | --------------------------------------------------------------------------------- |
| <span className="ndl-data">Username</span> | <##input:username##>The username of the user that should be logged in.<##input##> |
| <span className="ndl-data">Password</span> | <##input:password##>The password of the user that should be logged in.<##input##> |
| <span className="ndl-data">Username</span> | {/*##input:username##*/}The username of the user that should be logged in.{/*##input##*/} |
| <span className="ndl-data">Password</span> | {/*##input:password##*/}The password of the user that should be logged in.{/*##input##*/} |
| Signal | Description |
| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Do</span> | <##input:do##>Send a signal to this action to log in the user. You need to make sure the **Username** and **Password** is connected, these will be sent to the backend for authentication.<##input##> |
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}Send a signal to this action to log in the user. You need to make sure the **Username** and **Password** is connected, these will be sent to the backend for authentication.{/*##input##*/} |
## Outputs
| Signal | Description |
| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Success</span> | <##output:success##>This event will be triggered if the log in was succesful.<##output##> |
| <span className="ndl-signal">Failure</span> | <##output:failure##>This event will be triggered if something went wrong while trying to log in the user. The error message can be found in the **Error** output.<##output##> |
| <span className="ndl-signal">Success</span> | {/*##output:success##*/}This event will be triggered if the log in was succesful.{/*##output##*/} |
| <span className="ndl-signal">Failure</span> | {/*##output:failure##*/}This event will be triggered if something went wrong while trying to log in the user. The error message can be found in the **Error** output.{/*##output##*/} |
| Data | Description |
| --------------------------------------- | ---------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Error</span> | <##output:error##>This output will contain the error message if the log in failed.<##output##> |
| <span className="ndl-data">Error</span> | {/*##output:error##*/}This output will contain the error message if the log in failed.{/*##output##*/} |

12
nodes/data/user/log-out/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Log Out node
---
<##head##>
{/*##head##*/}
# Log Out
@@ -16,21 +16,21 @@ This node is used to log out a user from the current session. That means that th
</div>
<##head##>
{/*##head##*/}
## Inputs
| Signal | Description |
| -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Do</span> | <##input:do##>Send a signal to this action to logout the user. The user session will be removed from the browser.<##input##> |
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}Send a signal to this action to logout the user. The user session will be removed from the browser.{/*##input##*/} |
## Outputs
| Signal | Description |
| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Success</span> | <##output:success##>This event will be triggered if the logout was succesful.<##output##> |
| <span className="ndl-signal">Failure</span> | <##output:failure##>This event will be triggered if something went wrong while trying to logout the user. The error message can be found in the **Error** output.<##output##> |
| <span className="ndl-signal">Success</span> | {/*##output:success##*/}This event will be triggered if the logout was succesful.{/*##output##*/} |
| <span className="ndl-signal">Failure</span> | {/*##output:failure##*/}This event will be triggered if something went wrong while trying to logout the user. The error message can be found in the **Error** output.{/*##output##*/} |
| Data | Description |
| --------------------------------------- | ----------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Error</span> | <##output:error##>This output will contain the error message if the log out failed.<##output##> |
| <span className="ndl-data">Error</span> | {/*##output:error##*/}This output will contain the error message if the log out failed.{/*##output##*/} |

16
nodes/data/user/set-user-properties/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Set User Properties node
---
<##head##>
{/*##head##*/}
# Set User Properties
@@ -17,26 +17,26 @@ This node is used to set properties on the currently logged in user.
</div>
A user needs to be logged in via either the <span className="ndl-node">Sign Up</span> node or the <span className="ndl-node">Log In</span> node. If you want to read user properties of the currently logged in user you can use the <span className="ndl-node">User</span> node.
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Email</span> | <##input:email##>This input is used to set the **Email** property.<##input##> |
| <span className="ndl-data">Your custom properties</span> | <##input:prop-\*##>A property of the **User** class. You can add additional properties to the **User** class in the Noodl Cloud Services dashboard. <##input##> These will show up as inputs on the **Set User Properties** node. |
| <span className="ndl-data">Email</span> | {/*##input:email##*/}This input is used to set the **Email** property.{/*##input##*/} |
| <span className="ndl-data">Your custom properties</span> | {/*##input:prop-\*##*/}A property of the **User** class. You can add additional properties to the **User** class in the Noodl Cloud Services dashboard. {/*##input##*/} These will show up as inputs on the **Set User Properties** node. |
| Signal | Description |
| -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Do</span> | <##input:do##>Send a signal to this input to store the properties in the user record in the Noodl Cloud Services. Once completed the **Success** or **Failure** action will be triggered.<##input##> |
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}Send a signal to this input to store the properties in the user record in the Noodl Cloud Services. Once completed the **Success** or **Failure** action will be triggered.{/*##input##*/} |
## Outputs
| Signal | Description |
| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Success</span> | <##output:success##>This event will be triggered if the properties was succesfully stored.<##output##> |
| <span className="ndl-signal">Failure</span> | <##output:failure##>This event will be triggered if something went wrong while trying to store the properties on the **User** record in the Noodl Cloud Services. The error message can be found in the **Error** output.<##output##> |
| <span className="ndl-signal">Success</span> | {/*##output:success##*/}This event will be triggered if the properties was succesfully stored.{/*##output##*/} |
| <span className="ndl-signal">Failure</span> | {/*##output:failure##*/}This event will be triggered if something went wrong while trying to store the properties on the **User** record in the Noodl Cloud Services. The error message can be found in the **Error** output.{/*##output##*/} |
| Data | Description |
| --------------------------------------- | ---------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Error</span> | <##output:error##>This output will contain the error message if the action failed.<##output##> |
| <span className="ndl-data">Error</span> | {/*##output:error##*/}This output will contain the error message if the action failed.{/*##output##*/} |

20
nodes/data/user/sign-up/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Sign Up node
---
<##head##>
{/*##head##*/}
# Sign Up
@@ -24,28 +24,28 @@ The <span className="ndl-node">Sign Up</span> node is the easiest way to handle
</div>
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| -------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Username</span> | <##input:username##>This is the username of the new user that is going to sign up. It is required that this input has a value and it must be unique, or the sign up will fail.<##input##> |
| <span className="ndl-data">Password</span> | <##input:password##>This input should contain the password for the new user.<##input##> |
| <span className="ndl-data">Email</span> | <##input:email##>Optionally the new user can be given assigned an email.<##input##> |
| <span className="ndl-data">Your custom properties</span> | <##input:prop-\*##>A property of the **User** class. You can add additional properties to the **User** class in the Noodl Cloud Services dashboard. <##input##> These will show up as inputs on the **Sign Up** node to optionally bhe given a value during sign up. |
| <span className="ndl-data">Username</span> | {/*##input:username##*/}This is the username of the new user that is going to sign up. It is required that this input has a value and it must be unique, or the sign up will fail.{/*##input##*/} |
| <span className="ndl-data">Password</span> | {/*##input:password##*/}This input should contain the password for the new user.{/*##input##*/} |
| <span className="ndl-data">Email</span> | {/*##input:email##*/}Optionally the new user can be given assigned an email.{/*##input##*/} |
| <span className="ndl-data">Your custom properties</span> | {/*##input:prop-\*##*/}A property of the **User** class. You can add additional properties to the **User** class in the Noodl Cloud Services dashboard. {/*##input##*/} These will show up as inputs on the **Sign Up** node to optionally bhe given a value during sign up. |
| Signal | Description |
| -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Do</span> | <##input:do##>Send a signal to this action to trigger the sign up. Once completed the **Success** or **Failure** event will be triggered.<##input##> |
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}Send a signal to this action to trigger the sign up. Once completed the **Success** or **Failure** event will be triggered.{/*##input##*/} |
## Outputs
| Signal | Description |
| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Success</span> | <##output:success##>This action will be triggered if the sign up was succesful. The user is now logged in and information about the user can be accessed via the **User** node.<##output##> |
| <span className="ndl-signal">Failure</span> | <##output:failure##>This action will be triggered if something went wrong while trying to sign up the user. The error message can be found in the **Error** output.<##output##> |
| <span className="ndl-signal">Success</span> | {/*##output:success##*/}This action will be triggered if the sign up was succesful. The user is now logged in and information about the user can be accessed via the **User** node.{/*##output##*/} |
| <span className="ndl-signal">Failure</span> | {/*##output:failure##*/}This action will be triggered if something went wrong while trying to sign up the user. The error message can be found in the **Error** output.{/*##output##*/} |
| Data | Description |
| --------------------------------------- | ----------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Error</span> | <##output:error##>This output will contain the error message if the sign up failed.<##output##> |
| <span className="ndl-data">Error</span> | {/*##output:error##*/}This output will contain the error message if the sign up failed.{/*##output##*/} |

32
nodes/data/user/user-node/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: User node
---
<##head##>
{/*##head##*/}
# User
@@ -24,31 +24,31 @@ The <span className="ndl-node">User</span> node only works if the user is create
</div>
<##head##>
{/*##head##*/}
## Inputs
| Signal | Description |
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Fetch</span> | <##input:fetch##>Send a signal to this input to fetch the user properties for the current logged in user from the Noodl Cloud Services. There must be a valid user session for this to work.<##input##> |
| <span className="ndl-signal">Fetch</span> | {/*##input:fetch##*/}Send a signal to this input to fetch the user properties for the current logged in user from the Noodl Cloud Services. There must be a valid user session for this to work.{/*##input##*/} |
## Outputs
| Data | Description |
| -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Id</span> | <##output:id##>The **Id** of the User record for the current logged in user.<##output##> |
| <span className="ndl-data">Username</span> | <##output:username##>The **Username** of the current logged in user.<##output##> |
| <span className="ndl-data">Email</span> | <##output:email##>The **Email** of the current logged in user, if the user has an email stored.<##output##> |
| <span className="ndl-data">Authenticated</span> | <##output:authenticated##>This output will be true if a valid user session exists in the browser, i.e. there is a logged in user.<##output##> |
| <span className="ndl-data">Error</span> | <##output:error##>If a **Fetch** action failed to retrieve the user information from the Noodl Cloud Services this output will contain the error message.<##output##> |
| <span className="ndl-data">Your custom properties</span> | <##output:prop-\*##>The value of extra properties of the **User** class specified in the Noodl Cloud Services.<##output##> The node will contain the latest value of all user properties. |
| <span className="ndl-data">Id</span> | {/*##output:id##*/}The **Id** of the User record for the current logged in user.{/*##output##*/} |
| <span className="ndl-data">Username</span> | {/*##output:username##*/}The **Username** of the current logged in user.{/*##output##*/} |
| <span className="ndl-data">Email</span> | {/*##output:email##*/}The **Email** of the current logged in user, if the user has an email stored.{/*##output##*/} |
| <span className="ndl-data">Authenticated</span> | {/*##output:authenticated##*/}This output will be true if a valid user session exists in the browser, i.e. there is a logged in user.{/*##output##*/} |
| <span className="ndl-data">Error</span> | {/*##output:error##*/}If a **Fetch** action failed to retrieve the user information from the Noodl Cloud Services this output will contain the error message.{/*##output##*/} |
| <span className="ndl-data">Your custom properties</span> | {/*##output:prop-\*##*/}The value of extra properties of the **User** class specified in the Noodl Cloud Services.{/*##output##*/} The node will contain the latest value of all user properties. |
| Signal | Description |
| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Fetched</span> | <##output:fetched##>This signal is triggered after a **Fetch** has been successfully performed. That is the **Fetch** action is triggered by a signal and the user data is return from the Noodl Cloud Services.<##output##> |
| <span className="ndl-signal">Changed</span> | <##output:changed##>This signal is triggered when the User is changed locally by a **Set User Properties** node or a **Fetch** action of a **User** node.<##output##> |
| <span className="ndl-signal">Failure</span> | <##output:failure##>This signal is triggered when a **Fetch** action failed to retrieve the latest user data from the Noodl Cloud Services. This could be due to an invalid session.<##output##> |
| <span className="ndl-signal">Logged In</span> | <##output:logged in##>This signal is triggered when a user has been successfully logged in.<##output##> |
| <span className="ndl-signal">Logged Out</span> | <##output:logged out##>This signal is triggered when a user has been successfully logged out.<##output##> |
| <span className="ndl-signal">Session Lost</span> | <##output:session lost##>This signal is triggered when the current user session becomes invalid, e.g. if it has timed out.<##output##> |
| <span className="ndl-signal">Changed events</span> | <##output:changed-\*##>This signal will be triggered when the property is changed using the **Set User Property** node or when the latest user data is retrieved from the Noodl Cloud Services with the **Fetch** action.<##output##> |
| <span className="ndl-signal">Fetched</span> | {/*##output:fetched##*/}This signal is triggered after a **Fetch** has been successfully performed. That is the **Fetch** action is triggered by a signal and the user data is return from the Noodl Cloud Services.{/*##output##*/} |
| <span className="ndl-signal">Changed</span> | {/*##output:changed##*/}This signal is triggered when the User is changed locally by a **Set User Properties** node or a **Fetch** action of a **User** node.{/*##output##*/} |
| <span className="ndl-signal">Failure</span> | {/*##output:failure##*/}This signal is triggered when a **Fetch** action failed to retrieve the latest user data from the Noodl Cloud Services. This could be due to an invalid session.{/*##output##*/} |
| <span className="ndl-signal">Logged In</span> | {/*##output:logged in##*/}This signal is triggered when a user has been successfully logged in.{/*##output##*/} |
| <span className="ndl-signal">Logged Out</span> | {/*##output:logged out##*/}This signal is triggered when a user has been successfully logged out.{/*##output##*/} |
| <span className="ndl-signal">Session Lost</span> | {/*##output:session lost##*/}This signal is triggered when the current user session becomes invalid, e.g. if it has timed out.{/*##output##*/} |
| <span className="ndl-signal">Changed events</span> | {/*##output:changed-\*##*/}This signal will be triggered when the property is changed using the **Set User Property** node or when the latest user data is retrieved from the Noodl Cloud Services with the **Fetch** action.{/*##output##*/} |

12
nodes/data/variable/set-variable/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Set Variable node
---
<##head##>
{/*##head##*/}
# Set Variable
@@ -16,21 +16,21 @@ This node sets the **Value** of a [Variable](/nodes/data/variable/variable-node)
</div>
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Name</span> | <##input:name##>The name of the **Variable** to set. Note: All **Variable** nodes with the same name will share the same data.<##input##> |
| <span className="ndl-data">Value</span> | <##input:value##>The value that you want the **Variable** to get when you trigger the <span className="ndl-signal">Do</span> action.<##input##> |
| <span className="ndl-data">Name</span> | {/*##input:name##*/}The name of the **Variable** to set. Note: All **Variable** nodes with the same name will share the same data.{/*##input##*/} |
| <span className="ndl-data">Value</span> | {/*##input:value##*/}The value that you want the **Variable** to get when you trigger the <span className="ndl-signal">Do</span> action.{/*##input##*/} |
| Signal | Description |
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Do</span> | <##input:do##>Updates the value of the **Variable** to what is currently set on the input **Value**.<##input##> |
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}Updates the value of the **Variable** to what is currently set on the input **Value**.{/*##input##*/} |
## Outputs
| Signal | Description |
| ---------------------------------------- | ----------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Done</span> | <##output:done##>This event is triggered when the **Variable** have been set.<##output##> |
| <span className="ndl-signal">Done</span> | {/*##output:done##*/}This event is triggered when the **Variable** have been set.{/*##output##*/} |

18
nodes/data/variable/variable-node/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Variable node
---
<##head##>
{/*##head##*/}
# Variable
@@ -18,7 +18,7 @@ Use this node to store a single data variable that will be globally accessible t
The value can be dynamically stored, either by passing it a new value or by sending <span className="ndl-signal">signals</span> to the <span className="ndl-node">[Set Variable](/nodes/data/variable/set-variable)</span> node.
<##head##>
{/*##head##*/}
## Storing a value
@@ -32,21 +32,21 @@ When a value is stored in a variable you can use it somewhere else in your appli
| Data | Description |
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-data">Name</span> | <##input:name##>The name of the **Variable**. All **Variable** nodes with the same name will share the same data.<##input##> |
| <span className="ndl-data">Value</span> | <##input:value##>The value that you want the **Variable** to get. You will connect your data to this input. The value of the **Variable** will change when the data changes. If you want to control more precisely when the value should be updated, you should use the [Set Variable](/nodes/data/variable/set-variable) node.<##input##> |
| <span className="ndl-data">Name</span> | {/*##input:name##*/}The name of the **Variable**. All **Variable** nodes with the same name will share the same data.{/*##input##*/} |
| <span className="ndl-data">Value</span> | {/*##input:value##*/}The value that you want the **Variable** to get. You will connect your data to this input. The value of the **Variable** will change when the data changes. If you want to control more precisely when the value should be updated, you should use the [Set Variable](/nodes/data/variable/set-variable) node.{/*##input##*/} |
| Signal | Description |
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-signal">Fetch</span> | <##input:fetch##>Normally the value output of the node is updated once the **Name** input is set and if there is a change in the data from somewhere in the graph. However, if this signal has a connection it will wait until it gets a signal on **Fetch** before it updates.<##input##> |
| <span className="ndl-signal">Fetch</span> | {/*##input:fetch##*/}Normally the value output of the node is updated once the **Name** input is set and if there is a change in the data from somewhere in the graph. However, if this signal has a connection it will wait until it gets a signal on **Fetch** before it updates.{/*##input##*/} |
## Outputs
| Data | Description |
| --------------------------------------- | -------------------------------------------------------------------------- |
| <span className="ndl-data">Value</span> | <##output:value##>The current value of this **Variable** node.<##output##> |
| <span className="ndl-data">Name</span> | <##output:name##>The name of the **Variable**.<##output##> |
| <span className="ndl-data">Value</span> | {/*##output:value##*/}The current value of this **Variable** node.{/*##output##*/} |
| <span className="ndl-data">Name</span> | {/*##output:name##*/}The name of the **Variable**.{/*##output##*/} |
| Signal | Description |
| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Changed</span> | <##output:changed##>This signal is sent when the **Value** of this **Variable** has changed. Note: The signal triggers when any **Variable** with the same **Name** is changed, i.e. it triggers when the underlying data has changed.<##output##> |
| <span className="ndl-signal">Fetched</span> | <##output:fetched##>Signal when the data of this **Variable** node has been fetched and updated, either as a response to the **Fetch** input signal (when it has completed and the output **Value** is updated), or when the **Name** of the variable have changed.<##output##> |
| <span className="ndl-signal">Changed</span> | {/*##output:changed##*/}This signal is sent when the **Value** of this **Variable** has changed. Note: The signal triggers when any **Variable** with the same **Name** is changed, i.e. it triggers when the underlying data has changed.{/*##output##*/} |
| <span className="ndl-signal">Fetched</span> | {/*##output:fetched##*/}Signal when the data of this **Variable** node has been fetched and updated, either as a response to the **Fetch** input signal (when it has completed and the output **Value** is updated), or when the **Name** of the variable have changed.{/*##output##*/} |

12
nodes/events/receive-event/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Receive Event node
---
<##head##>
{/*##head##*/}
# Receive Event
@@ -17,15 +17,15 @@ This node is used to receive a signal triggered by a <span className="ndl-node">
</div>
The <span className="ndl-node">Send Event</span> node lets you specify a channel to broadcast to. All <span className="ndl-node">Receive Event</span> nodes set to that channel will be triggered simultaneously.
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Enabled</span> | <##input:enabled##>This port is used to disable/enable this node.<##input##> If disabled the receiver node will not be activated when the corresponding [Send Event](/nodes/events/send-event) node is triggered. |
| <span className="ndl-data">Consume</span> | <##input:consume##>This property specified if and how the event is consumed when captured by this receive event node.<##input##> |
| <span className="ndl-data">Channel</span> | <##input:channelName##>Each **Receive Event** node must listen to a specific channel.<##input##> This means that when a [Send Event][/nodes/events/send-event] node of that channel is triggered all **Receive Event** nodes with the same channel will be triggered as well (depending on the propagation, please review the [Events guide](/docs/guides/business-logic/events) for more details). |
| <span className="ndl-data">Enabled</span> | {/*##input:enabled##*/}This port is used to disable/enable this node.{/*##input##*/} If disabled the receiver node will not be activated when the corresponding [Send Event](/nodes/events/send-event) node is triggered. |
| <span className="ndl-data">Consume</span> | {/*##input:consume##*/}This property specified if and how the event is consumed when captured by this receive event node.{/*##input##*/} |
| <span className="ndl-data">Channel</span> | {/*##input:channelName##*/}Each **Receive Event** node must listen to a specific channel.{/*##input##*/} This means that when a [Send Event][/nodes/events/send-event] node of that channel is triggered all **Receive Event** nodes with the same channel will be triggered as well (depending on the propagation, please review the [Events guide](/docs/guides/business-logic/events) for more details). |
## Outputs
@@ -35,4 +35,4 @@ The <span className="ndl-node">Send Event</span> node lets you specify a channel
| Signal | Description |
| -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Received</span> | <##output:eventReceived##>This is a signal port, it is triggered when a signal is triggered in any **Send Event** node with the same channel as this **Receive Event** node.<##output##> |
| <span className="ndl-signal">Received</span> | {/*##output:eventReceived##*/}This is a signal port, it is triggered when a signal is triggered in any **Send Event** node with the same channel as this **Receive Event** node.{/*##output##*/} |

8
nodes/events/send-event/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Send Event node
---
<##head##>
{/*##head##*/}
# Send Event
@@ -17,7 +17,7 @@ This node sends a <span className="ndl-signal">signal</span> to another place in
</div>
The <span className="ndl-node">Send Event</span> node lets you specify a channel to broadcast to. When this node is triggered with a <span className="ndl-signal">Send signal</span> all <span className="ndl-node">Receive Event</span> nodes set to that channel will be triggered.
<##head##>
{/*##head##*/}
## Inputs
@@ -28,8 +28,8 @@ The <span className="ndl-node">Send Event</span> node lets you specify a channel
| Data | Description |
| ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Channel Name</span> | The channel name can be any identifier and is used on the [Receive Event](/nodes/events/receive-event) nodes to connect a sender and receiver node.<br/><br/>There may be multiple **Send Event** nodes with the same channel. In that case the receiving nodes listening to the channel will get a merged set of ports from all **Send Event** nodes. |
| <span className="ndl-data">Send To</span> | <##input:propagation##>Controls what components the event will be sent to.<##input##><br/><br/>`Global`: Send to all components<br/>`Parent`: Send the event up the visual hierarchy to parent components.<br/>`Children`: Send the events to all children of this component, and their descendants.<br/>`Siblings`: Send the event to all siblings of this component in the visual hierarchy. |
| <span className="ndl-data">Send To</span> | {/*##input:propagation##*/}Controls what components the event will be sent to.{/*##input##*/}<br/><br/>`Global`: Send to all components<br/>`Parent`: Send the event up the visual hierarchy to parent components.<br/>`Children`: Send the events to all children of this component, and their descendants.<br/>`Siblings`: Send the event to all siblings of this component in the visual hierarchy. |
| Signal | Description |
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Send Event</span> | <##input:sendEvent##>Send a signal to this input to send the event.<##input##> This is a signal port and when triggered the corresponding [Receive Event](/nodes/events/receive-event) nodes will be triggered as well. |
| <span className="ndl-signal">Send Event</span> | {/*##input:sendEvent##*/}Send a signal to this input to send the event.{/*##input##*/} This is a signal port and when triggered the corresponding [Receive Event](/nodes/events/receive-event) nodes will be triggered as well. |

4
nodes/javascript/function/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Function node
---
<##head##>
{/*##head##*/}
# Function
@@ -24,7 +24,7 @@ Runs the Javascript:
The code runs from top to bottom.
For more complex custom JavaScript with multiple executon paths and extended control you should use the <span className="ndl-node">Script</span> node.
<##head##>
{/*##head##*/}
The most basic way to use the node is as an expression,
any time the inputs are changed the script is run and the outputs are updated.

4
nodes/javascript/script/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Script node
---
<##head##>
{/*##head##*/}
# Script
@@ -78,7 +78,7 @@ Script.OnDestroy = function () {
}
```
<##head##>
{/*##head##*/}
## Inputs

4
nodes/logic/and/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: And node
---
<##head##>
{/*##head##*/}
# And
@@ -18,7 +18,7 @@ This node performs a logic AND operation on its inputs. If all inputs are <span
Any number of inputs can be used. When an input is connected a new one will be created automatically.
<##head##>
{/*##head##*/}
## Inputs

4
nodes/logic/animate-to-value/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Animate To Value node
---
<##head##>
{/*##head##*/}
# Animate To Value
@@ -16,7 +16,7 @@ This node takes a target value and will automatically animate towards it. The an
</div>
<##head##>
{/*##head##*/}
## Inputs

4
nodes/logic/inverter/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Inverter node
---
<##head##>
{/*##head##*/}
# Inverter
@@ -18,7 +18,7 @@ This node changes <span className="ndl-data">true</span> values to be <span clas
The <span className="ndl-node">Inverter</span> node runs JavaScript in the background and interprets truthy and falsy values in the same fashion. It is equal to creating an <span className="ndl-node">Expression</span> node with the expression `!value`.
<##head##>
{/*##head##*/}
## Inputs

4
nodes/logic/or/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Or node
---
<##head##>
{/*##head##*/}
# Or
@@ -18,7 +18,7 @@ This node performs a logic OR operation on its inputs. If any input is <span cla
Any number of inputs can be used. When an input is connected a new one will be created automatically.
<##head##>
{/*##head##*/}
## Inputs

16
nodes/logic/switch/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Switch node
---
<##head##>
{/*##head##*/}
# Switch
@@ -16,7 +16,7 @@ This node holds a <span className="ndl-data">boolean</span> state. It is either
</div>
<##head##>
{/*##head##*/}
## Inputs
@@ -24,9 +24,9 @@ This node holds a <span className="ndl-data">boolean</span> state. It is either
| Signal | Description |
| ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">On</span> | <##input:on##>Sending a signal to this input sets the state of the **Switch** to _On_.<##input##> |
| <span className="ndl-signal">Off</span> | <##input:on##>Sending a signal to this input sets the state of the **Switch** to _Off_.<##input##> |
| <span className="ndl-signal">Flip</span> | <##input:flip##>Sending a signal to this input sets the **Switch** to the opposite of its current state. If it is _On_ flip will set it to _Off_ and vice versa.<##input##> |
| <span className="ndl-signal">On</span> | {/*##input:on##*/}Sending a signal to this input sets the state of the **Switch** to _On_.{/*##input##*/} |
| <span className="ndl-signal">Off</span> | {/*##input:on##*/}Sending a signal to this input sets the state of the **Switch** to _Off_.{/*##input##*/} |
| <span className="ndl-signal">Flip</span> | {/*##input:flip##*/}Sending a signal to this input sets the **Switch** to the opposite of its current state. If it is _On_ flip will set it to _Off_ and vice versa.{/*##input##*/} |
| Data | Description |
| --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -36,9 +36,9 @@ This node holds a <span className="ndl-data">boolean</span> state. It is either
| Data | Description |
| ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Current State</span> | <##output:state##>This output is either _True_ or _False_ depending on if the **Switch** is _On_ or _Off_.<##output##> |
| <span className="ndl-data">Current State</span> | {/*##output:state##*/}This output is either _True_ or _False_ depending on if the **Switch** is _On_ or _Off_.{/*##output##*/} |
| Signal | Description |
| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| <span className="ndl-signal">Switched To On</span> | <##output:switchedToOn##>This signal is sent when the **Switch** goes from _Off_ to _On_.<##output##> |
| <span className="ndl-signal">Switched To Off</span> | <##output:switchedToOff##>This signal is sent when the **Switch** goes from _On_ to _Off_.<##output##> |
| <span className="ndl-signal">Switched To On</span> | {/*##output:switchedToOn##*/}This signal is sent when the **Switch** goes from _Off_ to _On_.{/*##output##*/} |
| <span className="ndl-signal">Switched To Off</span> | {/*##output:switchedToOff##*/}This signal is sent when the **Switch** goes from _On_ to _Off_.{/*##output##*/} |

8
nodes/logic/value-changed/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Value Changed node
---
<##head##>
{/*##head##*/}
# Value Changed
@@ -18,16 +18,16 @@ This node sends a <span className="ndl-signal">signal</span> when the input valu
The <span className="ndl-node">Value Changed</span> node is useful to trigger actions in your web app based on changes in your data.
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Input</span> | <##input:input##>The value that this node should observe. When this value changes the **Value Changed** signal will be triggered.<##input##> |
| <span className="ndl-data">Input</span> | {/*##input:input##*/}The value that this node should observe. When this value changes the **Value Changed** signal will be triggered.{/*##input##*/} |
## Outputs
| Signal | Description |
| ------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Value Changed</span> | <##output:valueChanged##>This signal is sent when the input value is changed.<##output##> |
| <span className="ndl-signal">Value Changed</span> | {/*##output:valueChanged##*/}This signal is sent when the input value is changed.{/*##output##*/} |

22
nodes/math/counter/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Counter node
---
<##head##>
{/*##head##*/}
# Counter
@@ -18,7 +18,7 @@ This node holds a <span className="ndl-data">number</span> that can be increased
The Counter node can be limited to a `min` and a `max` value, and the limit can be turned on and off.
<##head##>
{/*##head##*/}
<div className="ndl-image-with-background l">
@@ -30,23 +30,23 @@ The Counter node can be limited to a `min` and a `max` value, and the limit can
| Signal | Description |
| -------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Increase Count</span> | <##input:increase##>Triggering this action will increases the count by one.<##input##> |
| <span className="ndl-signal">Decrease Count</span> | <##input:decrease##>Triggering this action will decrease the count by one.<##input##> |
| <span className="ndl-signal">Reset To Start</span> | <##input:reset##>Triggering this action will reset the counter to its _Start Value_.<##input##> |
| <span className="ndl-signal">Start Value</span> | <##input:startValue##>The start value of the count. Defaults to zero.<##input##> |
| <span className="ndl-signal">Increase Count</span> | {/*##input:increase##*/}Triggering this action will increases the count by one.{/*##input##*/} |
| <span className="ndl-signal">Decrease Count</span> | {/*##input:decrease##*/}Triggering this action will decrease the count by one.{/*##input##*/} |
| <span className="ndl-signal">Reset To Start</span> | {/*##input:reset##*/}Triggering this action will reset the counter to its _Start Value_.{/*##input##*/} |
| <span className="ndl-signal">Start Value</span> | {/*##input:startValue##*/}The start value of the count. Defaults to zero.{/*##input##*/} |
| Data | Description |
| ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Min Value</span> | <##input:limitsMin##>The minimum value of the counter. The counter will never decrease below this value. Note that **Limits Enabled** need to be set to `true` for this to be in effect.<##input##> |
| <span className="ndl-data">Max Value</span> | <##input:limitsMax##>The maximum value of the counter. The counter will never increase above this value. Note that **Limits Enabled** need to be set to `true` for this to be in effect.<##input##> |
| <span className="ndl-data">Limits Enabled</span> | <##input:limitsEnabled##>This input controls if the limits (**Min Value** and **Max Value**) are active or disabled.<##input##> |
| <span className="ndl-data">Min Value</span> | {/*##input:limitsMin##*/}The minimum value of the counter. The counter will never decrease below this value. Note that **Limits Enabled** need to be set to `true` for this to be in effect.{/*##input##*/} |
| <span className="ndl-data">Max Value</span> | {/*##input:limitsMax##*/}The maximum value of the counter. The counter will never increase above this value. Note that **Limits Enabled** need to be set to `true` for this to be in effect.{/*##input##*/} |
| <span className="ndl-data">Limits Enabled</span> | {/*##input:limitsEnabled##*/}This input controls if the limits (**Min Value** and **Max Value**) are active or disabled.{/*##input##*/} |
## Outputs
| Data | Description |
| ----------------------------------------------- | ---------------------------------------------------------------------------- |
| <span className="ndl-data">Current Count</span> | <##output:currentCount##>This output contains the current count.<##output##> |
| <span className="ndl-data">Current Count</span> | {/*##output:currentCount##*/}This output contains the current count.{/*##output##*/} |
| Signal | Description |
| ------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Count Changed</span> | <##output:countChanged##>This signal will be triggered whenever the **Current Count** changes.<##output##> |
| <span className="ndl-signal">Count Changed</span> | {/*##output:countChanged##*/}This signal will be triggered whenever the **Current Count** changes.{/*##output##*/} |

14
nodes/math/expression/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Expression node
---
<##head##>
{/*##head##*/}
# Expression
@@ -18,7 +18,7 @@ This node enables you to do your own calculations using simple expressons. Input
The <span className="ndl-node">Expression</span> node runs JavaScript under the hood and supports a range of mathematical expressions.
<##head##>
{/*##head##*/}
## Built in math functions
@@ -70,10 +70,10 @@ Inputs are automatically derived from the expression. An expression set to `a +
| Data | Description |
| ---------------------------------------- | --------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Result</span> | <##output:result##>This output contains the result when evaluating the expression<##output##> |
| <span className="ndl-data">Is true</span> | <##output:isTrue##>This output will be true if the result of the expression is "truthy", that is considered true in Javascript.<##output##> |
| <span className="ndl-data">Is false</span> | <##output:isFalse##>This output will be true if the result of the expression is "falsy", that is considered false in Javascript.<##output##> |
| <span className="ndl-signal">On True</span> | <##output:isTrueEv##>A signal will be sent on this output when the expression is calculated and the result is "truthy".<##output##> |
| <span className="ndl-signal">On False</span> | <##output:isFalseEv##>A signal will be sent on this output when the expression is calculated and the result is "falsy".<##output##> |
| <span className="ndl-data">Result</span> | {/*##output:result##*/}This output contains the result when evaluating the expression{/*##output##*/} |
| <span className="ndl-data">Is true</span> | {/*##output:isTrue##*/}This output will be true if the result of the expression is "truthy", that is considered true in Javascript.{/*##output##*/} |
| <span className="ndl-data">Is false</span> | {/*##output:isFalse##*/}This output will be true if the result of the expression is "falsy", that is considered false in Javascript.{/*##output##*/} |
| <span className="ndl-signal">On True</span> | {/*##output:isTrueEv##*/}A signal will be sent on this output when the expression is calculated and the result is "truthy".{/*##output##*/} |
| <span className="ndl-signal">On False</span> | {/*##output:isFalseEv##*/}A signal will be sent on this output when the expression is calculated and the result is "falsy".{/*##output##*/} |

4
nodes/math/number-remapper/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Number Remapper node
---
<##head##>
{/*##head##*/}
# Number Remapper
@@ -18,7 +18,7 @@ This node maps a range of input <span className="ndl-data">numbers</span> to a r
If the input range is `0 to 360`, the output range is `0 to 1` and the input <span className="ndl-data">number</span> is `180` the output <span className="ndl-data">number</span> will be `0.5`.
<##head##>
{/*##head##*/}
## Inputs

10
nodes/navigation/external-link/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: External Link node
---
<##head##>
{/*##head##*/}
# External Link
@@ -20,15 +20,15 @@ It also supports common URL schemes, like `mailto:` and `tel:`.
Note that **External Link** does not work in the Noodl Viewer. You need to run the app in a browser for it to work.
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Link</span> | <##input:link##>The URL that should be opened when the **Do** signal is triggered. The URL should include the full scheme, e.g. `http://`, `mailto:`, etc. <##input##> |
| <span className="ndl-data">Open in New Tab</span> | <##input:openInNewTab##>If this property is set to <span className="ndl-data">true</span> the link will be opened in a new browser tab. Otherwise it will open (and replace) the current Noodl app in the browser.<##input##> |
| <span className="ndl-data">Link</span> | {/*##input:link##*/}The URL that should be opened when the **Do** signal is triggered. The URL should include the full scheme, e.g. `http://`, `mailto:`, etc. {/*##input##*/} |
| <span className="ndl-data">Open in New Tab</span> | {/*##input:openInNewTab##*/}If this property is set to <span className="ndl-data">true</span> the link will be opened in a new browser tab. Otherwise it will open (and replace) the current Noodl app in the browser.{/*##input##*/} |
| Signal | Description |
| -------------------------------------- | --------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Do</span> | <##input:do##>Recieving a signal to this input will navigate to the external link.<##input##> |
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}Recieving a signal to this input will navigate to the external link.{/*##input##*/} |

12
nodes/navigation/navigate-to-path/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Navigate To Path node
---
<##head##>
{/*##head##*/}
# Navigate To Path
@@ -18,7 +18,7 @@ This node lets you navigate to a specific <span className="ndl-node">[Page](/nod
In most cases you will want to use the <span className="ndl-node">[Navigate](/nodes/navigation/navigate)</span> or <span className="ndl-node">[External Link](/nodes/navigation/external-link)</span> nodes for your navigation. The <span className="ndl-node">Navigate To Path</span> node is a low level implementation suitable for more advanced and specific use cases.
<##head##>
{/*##head##*/}
## Usage
@@ -32,16 +32,16 @@ In a way, **Navigate To Path** is very much like writing a URL directly into the
| Data | Description |
| -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Path</span> | <##input:path##>Use this property to set the path to navigate to. Note that the **Path** should not include the domain but only the route within the Noodl project. The **Path** may include a **Path Parameter** as the final part, that will be forwarded to the receiving **Page**. You can also use `{}` to make part of the **Path** dynamic and expose the part as an input. For example the path `/{a}/{b}/` will expose two new inputs _a_ and _b_.<##input##> |
| <span className="ndl-data">Path</span> | {/*##input:path##*/}Use this property to set the path to navigate to. Note that the **Path** should not include the domain but only the route within the Noodl project. The **Path** may include a **Path Parameter** as the final part, that will be forwarded to the receiving **Page**. You can also use `{}` to make part of the **Path** dynamic and expose the part as an input. For example the path `/{a}/{b}/` will expose two new inputs _a_ and _b_.{/*##input##*/} |
| <span className="ndl-data">Query Parameters</span> | You can add any number of **Query Parameters** that will be forwarded to the receiving [Page](/nodes/navigation/page/) through their [Page](/nodes/navigation/page-inputs/) node. |
| <span className="ndl-data">Open in new tab</span> | Open the new page in a new browser tab. |
| Signal | Description |
| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Navigate</span> | <##input:navigate##>Sending a signal to this input will perform the navigation according to the provided **Path**.<##input##> |
| <span className="ndl-signal">Navigate</span> | {/*##input:navigate##*/}Sending a signal to this input will perform the navigation according to the provided **Path**.{/*##input##*/} |
<span className="hidden-props-for-editor"><##input:q-\*##>A **Query Parameter** that will be forwarded to the receiving **Page** node through their **Page Inputs** node.<##input##></span>
<span className="hidden-props-for-editor">{/*##input:q-\*##*/}A **Query Parameter** that will be forwarded to the receiving **Page** node through their **Page Inputs** node.{/*##input##*/}</span>
<span className="hidden-props-for-editor"><##input:p-\*##>A **Path Parameter** that will be part of the **Path**.<##input##></span>
<span className="hidden-props-for-editor">{/*##input:p-\*##*/}A **Path Parameter** that will be part of the **Path**.{/*##input##*/}</span>
</div>

10
nodes/navigation/navigate/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Navigate node
---
<##head##>
{/*##head##*/}
# Navigate
@@ -18,7 +18,7 @@ This node is used to navigate between <span className="ndl-node">[Page](/nodes/n
You can use a [Page Inputs](/nodes/navigation/page-inputs) node to pass parameters to the <span className="ndl-node">Page</span> you are navigating to. Any <span className="ndl-data">Path Parameters</span> or <span className="ndl-data">Query Parameters</span> you add will show up as inputs to the <span className="ndl-node">Navigate</span> node if you select that <span className="ndl-node">Page</span> as the <span className="ndl-data">Target Page</span>.
<##head##>
{/*##head##*/}
## Inputs
@@ -32,13 +32,13 @@ You can use a [Page Inputs](/nodes/navigation/page-inputs) node to pass paramete
| Signal | Description |
| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Navigate</span> | <##input:navigate##>Sending a signal to this input will perform the navigation to the **Target Page**.<##input##> |
| <span className="ndl-signal">Navigate</span> | {/*##input:navigate##*/}Sending a signal to this input will perform the navigation to the **Target Page**.{/*##input##*/} |
| Mixed | Description |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Page Parameters** | Any page parameters set in the [Pages Inputs](/nodes/navigation/page-inputs) used by the **Page** will be available as inputs on the **Navigate** node. |
<span className="hidden-props-for-editor"><##input:pm-\*##> An input parameter originating from the **Page Inputs** node of the **Target Page**.<##input##></span>
<span className="hidden-props-for-editor">{/*##input:pm-\*##*/} An input parameter originating from the **Page Inputs** node of the **Target Page**.{/*##input##*/}</span>
</div>
@@ -48,6 +48,6 @@ You can use a [Page Inputs](/nodes/navigation/page-inputs) node to pass paramete
| Signal | Description |
| --------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Navigated</span> | <##output:navigated##>This event is triggered when a navigation as been performed.<##output##> |
| <span className="ndl-signal">Navigated</span> | {/*##output:navigated##*/}This event is triggered when a navigation as been performed.{/*##output##*/} |
</div>

6
nodes/navigation/page-inputs/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Page Inputs node
---
<##head##>
{/*##head##*/}
# Page Inputs
@@ -18,8 +18,8 @@ This node is used to pass parameters in the URL when navigating between pages in
One common use for this is when you want certain input parameters to be available in sharable links.
<##head##>
{/*##head##*/}
@include "../_common-navigation.md"
<span className="hidden-props-for-editor"><##output:pm-\*##>A page parameter that will be available as an input on any **Navigate** node that navigates to its associated **Page**.<##output##></span>
<span className="hidden-props-for-editor">{/*##output:pm-\*##*/}A page parameter that will be available as an input on any **Navigate** node that navigates to its associated **Page**.{/*##output##*/}</span>

18
nodes/navigation/page-router/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Page Router node
---
<##head##>
{/*##head##*/}
# Page Router
@@ -20,7 +20,7 @@ Unlike the somewhat similar [Component Stack](/nodes/component-stack/component-s
Every <span className="ndl-node">Page Router</span> has a <span className="ndl-data">Start Page</span>. The pages are rendered inside of the <span className="ndl-node">Page Router</span>. You can use the <span className="ndl-data">Clip Behavior</span> option to decide how the <span className="ndl-node">Page Router</span> should wrap its content.
<##head##>
{/*##head##*/}
## Implementation
@@ -86,15 +86,15 @@ The **Page Router** is a visual node. It will automatically expand to take all s
| Data | Description |
| -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Name</span> | <##input:name##>The name of the **Page Router**. If you have multiple **Page Routers** the name will be used to identify them.<##input##> |
| <span className="ndl-data">URL path</span> | <##input:urlPath##>An optional path of the **Page Router** when routing a URL towards it.<##input##> |
| <span className="ndl-data">Clip Behavior</span> | <##input:clip##>This property controls the size and clipping behavior of the **Page Router**. It has three possible values: **Expand To Content Size**, **Scroll** or **Clip Content**.<##input##><br/><br/>`Expand To Content Size`: Changes the size of the **Page Router** to fit the size of the **Page** it's currently showing.<br/>`Scroll`: Makes the **Page Router** take as much space as it can. Any **Page** inside it will be scrollable if it cannot fit inside the **Page Router**. |
| <span className="ndl-data">Background Color</span> | <##input:backgroundColor##>The color that will be shown when there is no **Page** covering the **Page Router** or when the **Page** is transparent.<##input##> |
| <span className="ndl-data">Mounted</span> | <##input:mounted##>This property is used to completely remove the node from the DOM. If this property is set to false the node is removed from the DOM. It differs from the _Visible_ property where the node is still part of the DOM but invisible.<##input##> |
| <span className="ndl-data">Name</span> | {/*##input:name##*/}The name of the **Page Router**. If you have multiple **Page Routers** the name will be used to identify them.{/*##input##*/} |
| <span className="ndl-data">URL path</span> | {/*##input:urlPath##*/}An optional path of the **Page Router** when routing a URL towards it.{/*##input##*/} |
| <span className="ndl-data">Clip Behavior</span> | {/*##input:clip##*/}This property controls the size and clipping behavior of the **Page Router**. It has three possible values: **Expand To Content Size**, **Scroll** or **Clip Content**.{/*##input##*/}<br/><br/>`Expand To Content Size`: Changes the size of the **Page Router** to fit the size of the **Page** it's currently showing.<br/>`Scroll`: Makes the **Page Router** take as much space as it can. Any **Page** inside it will be scrollable if it cannot fit inside the **Page Router**. |
| <span className="ndl-data">Background Color</span> | {/*##input:backgroundColor##*/}The color that will be shown when there is no **Page** covering the **Page Router** or when the **Page** is transparent.{/*##input##*/} |
| <span className="ndl-data">Mounted</span> | {/*##input:mounted##*/}This property is used to completely remove the node from the DOM. If this property is set to false the node is removed from the DOM. It differs from the _Visible_ property where the node is still part of the DOM but invisible.{/*##input##*/} |
| Signal | Description |
| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Reset</span> | <##input:reset##>Triggering this action will reset the **Page Router** making it show the start page.<##input##> |
| <span className="ndl-signal">Reset</span> | {/*##input:reset##*/}Triggering this action will reset the **Page Router** making it show the start page.{/*##input##*/} |
### Visual
@@ -104,7 +104,7 @@ This node also supports the [Advanced HTML](/nodes/shared-props/inputs/visual-in
| Data | Description |
| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Current Page Title</span> | <##output:current page title##>The title of the page that is currently showing in this **Page Router**.<##output##> |
| <span className="ndl-data">Current Page Title</span> | {/*##output:current page title##*/}The title of the page that is currently showing in this **Page Router**.{/*##output##*/} |
### Visual

8
nodes/navigation/page/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Page node
---
<##head##>
{/*##head##*/}
# Page
@@ -24,14 +24,14 @@ The **Page** node is a basic building block when creating web type navigation us
</div>
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-data">Title</span> | <##input:title##>This property controls the title of the **Page** i.e. what the title of the browser window will be say when the **Page** is active.<##input##> |
| <span className="ndl-data">URL path</span> | <##input:urlPath##>This property controls the URL route to this **Page** in relation to its [Page Router](/nodes/navigation/page-router).<##input##> See the documentation for [Page Router](/nodes/navigation/page-router) for more details on how routing works. |
| <span className="ndl-data">Title</span> | {/*##input:title##*/}This property controls the title of the **Page** i.e. what the title of the browser window will be say when the **Page** is active.{/*##input##*/} |
| <span className="ndl-data">URL path</span> | {/*##input:urlPath##*/}This property controls the URL route to this **Page** in relation to its [Page Router](/nodes/navigation/page-router).{/*##input##*/} See the documentation for [Page Router](/nodes/navigation/page-router) for more details on how routing works. |
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties/):

10
nodes/popups/close-popup/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Close Popup node
---
<##head##>
{/*##head##*/}
# Close Popup
@@ -18,7 +18,7 @@ This node is used to close a popup that have previously been shown with the <spa
You can also pass data back to the component that triggered the popup by adding <span className="ndl-data">Result</span> values and <span className="ndl-signal">Close Action</span> signals. This is typically used for popups that propmt the user for some kind of input or action, like **Name**, **Confirm** or **Cancel**.
<##head##>
{/*##head##*/}
### Results and close actions
@@ -56,13 +56,13 @@ These **Result** values and **Close Actions** will also become available as outp
| Signal | Description |
| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Close</span> | <##input:close##>Send a signal here to close the popup. If no close actions are specified this should be used.<##input##> |
| <span className="ndl-signal">Close</span> | {/*##input:close##*/}Send a signal here to close the popup. If no close actions are specified this should be used.{/*##input##*/} |
| <span className="ndl-signal">Close Actions</span> | All close actions specified on this node will become available as signal inputs. See above for more details. |
<span className="hidden-props-for-editor"><##input:closeAction-\*##>When the **Popup** is closed using this custom **Close Action**, the same signal be triggered on the **Show Popup** node that was used to open the **Popup**.<##input##></span>
<span className="hidden-props-for-editor">{/*##input:closeAction-\*##*/}When the **Popup** is closed using this custom **Close Action**, the same signal be triggered on the **Show Popup** node that was used to open the **Popup**.{/*##input##*/}</span>
| Data | Description |
| ----------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Result Values</span> | All result values specified on this node will become available as inputs. See above for more details. |
<span className="hidden-props-for-editor"><##input:result-\*##>When the **Popup** is closed, this result parameter will be forwarded as an output on the **Show Popup** node that was used to open the **Popup**.<##input##></span>
<span className="hidden-props-for-editor">{/*##input:result-\*##*/}When the **Popup** is closed, this result parameter will be forwarded as an output on the **Show Popup** node that was used to open the **Popup**.{/*##input##*/}</span>

16
nodes/popups/show-popup/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Show Popup node
---
<##head##>
{/*##head##*/}
# Show Popup
@@ -24,7 +24,7 @@ The <span className="ndl-node">Show Popup</span> node lets you specify which com
</div>
<##head##>
{/*##head##*/}
When a popup is closed with the [Close Popup](/nodes/popups/close-popup) node it is possible to send back signals and values via **Results** and **Close Actions**. These will become available as outputs for the **Show Popup** node if the target popup component contains **Close Popup** nodes.
@@ -38,29 +38,29 @@ When a popup is closed with the [Close Popup](/nodes/popups/close-popup) node it
| Data | Description |
| ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Target</span> | <##input:target##>A component that will be cloned and put on top of the entire window when the **Show** signals is received.<##input##> |
| <span className="ndl-data">Target</span> | {/*##input:target##*/}A component that will be cloned and put on top of the entire window when the **Show** signals is received.{/*##input##*/} |
| Signal | Description |
| ---------------------------------------- | ---------------------------------------------------------------- |
| <span className="ndl-signal">Show</span> | <##input:show##>Send a signal here to show the popup.<##input##> |
| <span className="ndl-signal">Show</span> | {/*##input:show##*/}Send a signal here to show the popup.{/*##input##*/} |
| Mixed | Description |
| -------------------- | ----------------------------------------------------------------------------------- |
| **Component Inputs** | Any **Component Inputs** that the popup component have will be available as inputs. |
<span className="hidden-props-for-editor"><##input:popupParam-\*##>A parameter input originating from a **Component Input** in the **Target** component. It's value will be forwarded to the component.<##input##></span>
<span className="hidden-props-for-editor">{/*##input:popupParam-\*##*/}A parameter input originating from a **Component Input** in the **Target** component. It's value will be forwarded to the component.{/*##input##*/}</span>
## Outputs
| Signal | Description |
| ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Closed</span> | <##output:closed##>This output sends a signal when the popup is closed with a **Close Popup** node.<##output##> See [Close Popup](/nodes/popups/close-popup/) for more information. |
| <span className="ndl-signal">Closed</span> | {/*##output:closed##*/}This output sends a signal when the popup is closed with a **Close Popup** node.{/*##output##*/} See [Close Popup](/nodes/popups/close-popup/) for more information. |
| <span className="ndl-signal">Close Actions</span> | Any close action signals provided via the [Close Popup](/nodes/popups/close-popup/) node from the target popup component will become available here. |
<span className="hidden-props-for-editor"><##output:closeAction-\*##>A result signal originating from the **Target** components **Close Popup** node.<##output##></span>
<span className="hidden-props-for-editor">{/*##output:closeAction-\*##*/}A result signal originating from the **Target** components **Close Popup** node.{/*##output##*/}</span>
| Data | Description |
| ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Close Results</span> | Any result values provided via the [Close Popup](/nodes/popups/close-popup/) node from the target popup component will become available here. |
<span className="hidden-props-for-editor"><##output:closeResult-\*##>A result output originating from the **Target** components **Close Popup** node.<##output##></span>
<span className="hidden-props-for-editor">{/*##output:closeResult-\*##*/}A result output originating from the **Target** components **Close Popup** node.{/*##output##*/}</span>

2
nodes/shared-props/inputs/_enabled.md
View File

@@ -1,3 +1,3 @@
| Data | Description |
| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Enabled</span> | <##input:enabled##>Specifies if the control is **Enabled** (`true`) or **Disabled** (`false`). A disabled control will not respond to any user interaction.<##input##> |
| <span className="ndl-data">Enabled</span> | {/*##input:enabled##*/}Specifies if the control is **Enabled** (`true`) or **Disabled** (`false`). A disabled control will not respond to any user interaction.{/*##input##*/} |

2
nodes/shared-props/inputs/_visual-input-properties.md
View File

@@ -365,5 +365,5 @@ The Dimension Constraints Gadget allows you to clamp the values of the [Dimensio
| Data | Description |
| ------------------------------------------- | --------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Tag</span> | The tag used when this node renders in the app. Only available on the **Group** and **Text** nodes. |
| <span className="ndl-data">CSS Class</span> | <##input:cssClass##>Specify a CSS class this node will have.<##input##> |
| <span className="ndl-data">CSS Class</span> | {/*##input:cssClass##*/}Specify a CSS class this node will have.{/*##input##*/} |
| <span className="ndl-data">CSS Style</span> | Use this property to specify your custom CSS. |

12
nodes/shared-props/outputs/_control-events.md
View File

@@ -1,9 +1,9 @@
| Signal | Description |
| ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Changed</span> | A signal is sent on this output when the value of the control is changed by user interaction. |
| <span className="ndl-signal">Focused</span> | <##output:onFocus##>A signal is sent on this output when the control is focused.<##output##> |
| <span className="ndl-signal">Blurred</span> | <##output:onBlur##>A signal is sent on this output when the control is blurred, i.e. it has lost the input focus.<##output##> |
| <span className="ndl-signal">Pointer Down</span> | <##output:pointerDown##>Emitted when the mouse is pressed or finger is down on the node.<##output##> |
| <span className="ndl-signal">Pointer Up</span> | <##output:pointerUp##>Emitted when the mouse is released or finger is lifted on the node.<##output##> |
| <span className="ndl-signal">Hover Start</span> | <##output:hoverStart##>Emitted when the mouse enters the node.<##output##> |
| <span className="ndl-signal">Hover End</span> | <##output:hoverEnd##>Emitted when the mouse leaves the node.<##output##> |
| <span className="ndl-signal">Focused</span> | {/*##output:onFocus##*/}A signal is sent on this output when the control is focused.{/*##output##*/} |
| <span className="ndl-signal">Blurred</span> | {/*##output:onBlur##*/}A signal is sent on this output when the control is blurred, i.e. it has lost the input focus.{/*##output##*/} |
| <span className="ndl-signal">Pointer Down</span> | {/*##output:pointerDown##*/}Emitted when the mouse is pressed or finger is down on the node.{/*##output##*/} |
| <span className="ndl-signal">Pointer Up</span> | {/*##output:pointerUp##*/}Emitted when the mouse is released or finger is lifted on the node.{/*##output##*/} |
| <span className="ndl-signal">Hover Start</span> | {/*##output:hoverStart##*/}Emitted when the mouse enters the node.{/*##output##*/} |
| <span className="ndl-signal">Hover End</span> | {/*##output:hoverEnd##*/}Emitted when the mouse leaves the node.{/*##output##*/} |

8
nodes/shared-props/outputs/_control-states.md
View File

@@ -1,6 +1,6 @@
| Data | Description |
| ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Enabled</span> | <##output:enabled##>A boolean output that is true if the control is in **Enabled** state and false if it is **Disabled**. This is useful when using this control as a base for your own component that will represent visually that it is enabled or disabled.<##output##> |
| <span className="ndl-data">Focused</span> | <##output:focusState##>This is a boolean type output that will be true if the control is in **Focused** state, and false otherwise. This is useful when using this control as a base for your own component that will represent visually that it is focused. This can be due to the user selecting the control for input or by using the keyboard.<##output##> |
| <span className="ndl-data">Hover</span> | <##output:hoverState##>A boolean type output that is true when the user hovers over this control with the mouse and false otherwise. This is useful when using this control as a base for your own component that will represent visually that it is hovered.<##output##> |
| <span className="ndl-data">Pressed</span> | <##output:pressedState##>A boolean output that is true when the user is currently pressing the control. This is useful when using this control as a base for your own component that will represent visually that it is pressed.<##output##> |
| <span className="ndl-data">Enabled</span> | {/*##output:enabled##*/}A boolean output that is true if the control is in **Enabled** state and false if it is **Disabled**. This is useful when using this control as a base for your own component that will represent visually that it is enabled or disabled.{/*##output##*/} |
| <span className="ndl-data">Focused</span> | {/*##output:focusState##*/}This is a boolean type output that will be true if the control is in **Focused** state, and false otherwise. This is useful when using this control as a base for your own component that will represent visually that it is focused. This can be due to the user selecting the control for input or by using the keyboard.{/*##output##*/} |
| <span className="ndl-data">Hover</span> | {/*##output:hoverState##*/}A boolean type output that is true when the user hovers over this control with the mouse and false otherwise. This is useful when using this control as a base for your own component that will represent visually that it is hovered.{/*##output##*/} |
| <span className="ndl-data">Pressed</span> | {/*##output:pressedState##*/}A boolean output that is true when the user is currently pressing the control. This is useful when using this control as a base for your own component that will represent visually that it is pressed.{/*##output##*/} |

18
nodes/shared-props/outputs/_visual-output-properties.md
View File

@@ -15,17 +15,17 @@
| Data | Description |
| --------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Screen Position X</span> | <##output:screenPositionX##>Where this node is on the screen's X-axis, in `px`.<##output##> |
| <span className="ndl-data">Screen Position Y</span> | <##output:screenPositionY##>Where this node is on the screen's Y-axis, in `px`.<##output##> |
| <span className="ndl-data">Width</span> | <##output:width##>Current width of this node.<##output##> |
| <span className="ndl-data">Height</span> | <##output:height##>Current height of this node.<##output##> |
| <span className="ndl-data">Screen Position X</span> | {/*##output:screenPositionX##*/}Where this node is on the screen's X-axis, in `px`.{/*##output##*/} |
| <span className="ndl-data">Screen Position Y</span> | {/*##output:screenPositionY##*/}Where this node is on the screen's Y-axis, in `px`.{/*##output##*/} |
| <span className="ndl-data">Width</span> | {/*##output:width##*/}Current width of this node.{/*##output##*/} |
| <span className="ndl-data">Height</span> | {/*##output:height##*/}Current height of this node.{/*##output##*/} |
## Mounted
| Signal | Description |
| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Did Mount</span> | <##output:didMount##>Signal sent when this node has been mounted, i.e. has become part of the visual tree and is visible.<##output##> |
| <span className="ndl-signal">Will Unmount</span> | <##output:willUnmount##>Signal sent when this node is about to be removed from the visual tree and become hidden.<##output##> |
| <span className="ndl-signal">Did Mount</span> | {/*##output:didMount##*/}Signal sent when this node has been mounted, i.e. has become part of the visual tree and is visible.{/*##output##*/} |
| <span className="ndl-signal">Will Unmount</span> | {/*##output:willUnmount##*/}Signal sent when this node is about to be removed from the visual tree and become hidden.{/*##output##*/} |
## Pointer Events
@@ -54,6 +54,6 @@
| Data | Description |
| ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Child Index</span> | <##output:childIndex##>The place this node has in relation to its parent. E.g. if a **Group** has three children, then the first child will have _Child Index_ `0`, the second child will have _Child Index_ `1`, and so on.<##output##> |
| <span className="ndl-data">This</span> | <##output:this##>A reference to this node. Used in custom **JavaScript** nodes and more.<##output##> |
| <span className="ndl-data">Children Count</span> | <##output:this##>Outputs the number of children that this node has (if the node supports children).<##output##> |
| <span className="ndl-data">Child Index</span> | {/*##output:childIndex##*/}The place this node has in relation to its parent. E.g. if a **Group** has three children, then the first child will have _Child Index_ `0`, the second child will have _Child Index_ `1`, and so on.{/*##output##*/} |
| <span className="ndl-data">This</span> | {/*##output:this##*/}A reference to this node. Used in custom **JavaScript** nodes and more.{/*##output##*/} |
| <span className="ndl-data">Children Count</span> | {/*##output:this##*/}Outputs the number of children that this node has (if the node supports children).{/*##output##*/} |

8
nodes/string-manipulation/string-format/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: String Format node
---
<##head##>
{/*##head##*/}
# String Format
@@ -24,17 +24,17 @@ The <span className="ndl-node">String Format</span> node needs a format input wh
</div>
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Format</span> | This input contains the format string, that is the template that will be used to generated the output. Any part of the template that is encapsulated in bracets will generate an input port. E.g. setting the string format to _{Hours} hours ago_ will create an input port called _Hours_. |
| <span className="ndl-data">Format</span> | This input contains the format string, that is the template that will be used to generated the output. Any part of the template that is encapsulated in bracets will generate an input port. E.g. setting the string format to `{Hours} hours ago` will create an input port called _Hours_. |
| <span className="ndl-data">Your `{strings}`</span> | The input ports generated from the **Format** input. |
## Outputs
| Data | Description |
| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Formatted</span> | The formatted string, e.g. if the string format is "_{Hours} hours ago_" and the _Hours_ input is connected to a value of _9_, the formatted string will be _9 hours ago_. |
| <span className="ndl-data">Formatted</span> | The formatted string, e.g. if the string format is `"{Hours} hours ago"` and the _Hours_ input is connected to a value of _9_, the formatted string will be _9 hours ago_. |

4
nodes/string-manipulation/string-mapper/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: String Mapper node
---
<##head##>
{/*##head##*/}
# String Mapper
@@ -17,7 +17,7 @@ You define your own string mappings. You can also define a default value to outp
</div>
<##head##>
{/*##head##*/}
## Inputs

4
nodes/string-manipulation/substring/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Substring node
---
<##head##>
{/*##head##*/}
# Substring
@@ -16,7 +16,7 @@ This node lets you extract a part of a <span className="ndl-data">string</span>
</div>
<##head##>
{/*##head##*/}
## Inputs

6
nodes/ui-controls/button/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Button node
---
<##head##>
{/*##head##*/}
# Button
@@ -23,7 +23,7 @@ The button has a <span className="ndl-signal">Click</span> signal that you can u
![](/nodes/ui-controls/button//button_node.png)
</div>
<##head##>
{/*##head##*/}
This control contains all logic such as accessibility etc. It can be styled in via it's properties.
Use variations to create different types of buttons
@@ -79,7 +79,7 @@ The main output for the button is the Click <span className="ndl-signal">signal<
| Signal | Description |
| ----------------------------------------- | ------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Click</span> | <##output:onClick##>A signal is sent on this output when the button is clicked.<##output##> |
| <span className="ndl-signal">Click</span> | {/*##output:onClick##*/}A signal is sent on this output when the button is clicked.{/*##output##*/} |
It also features a set of more in depth <span className="ndl-signal">signals</span>:

10
nodes/ui-controls/checkbox/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Checkbox node
---
<##head##>
{/*##head##*/}
# Checkbox
@@ -24,7 +24,7 @@ The checkbox will flip its state when clicked and its <span className="ndl-data"
</div>
<##head##>
{/*##head##*/}
This control contains all logic such as accessibility etc. It can be styled in via it's properties, or you can use it only for the logic and create your own checkbox component in your own design system.
@@ -42,8 +42,8 @@ The main input of the Checkbox node is the <span className="ndl-data">Checked</s
| Data | Description |
| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-data">Checked</span> | <##input:checked##>A boolean setting the checkbox in "checked" or "unchecked" state. This is the value of the checkbox and can be connected to a data source.<##input##> |
| <span className="ndl-data">Background Color</span> | <##input:backgroundColor##>The background color when the checkbox is "checked"<##input##>. |
| <span className="ndl-data">Checked</span> | {/*##input:checked##*/}A boolean setting the checkbox in "checked" or "unchecked" state. This is the value of the checkbox and can be connected to a data source.{/*##input##*/} |
| <span className="ndl-data">Background Color</span> | {/*##input:backgroundColor##*/}The background color when the checkbox is "checked"{/*##input##*/}. |
</div>
@@ -116,7 +116,7 @@ The main output of the Checkbox node is the <span className="ndl-data">Checked</
| Data | Description |
| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Checked</span> | <##output:checked##>A boolean output that is true when this checkbox control is checked and false if not. This is useful when using this control as a base for your own component that will represent visually that it is checked.<##output##> |
| <span className="ndl-data">Checked</span> | {/*##output:checked##*/}A boolean output that is true when this checkbox control is checked and false if not. This is useful when using this control as a base for your own component that will represent visually that it is checked.{/*##output##*/} |
</div>

12
nodes/ui-controls/dropdown/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Dropdown node
---
<##head##>
{/*##head##*/}
# Dropdown
@@ -51,14 +51,14 @@ The mapping can be achieved through `Value: function (object) { return object.id
</div>
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Items</span> | <##input:item##>This input takes an **Array** of **Objects** that will populate the **Dropdown**. You should make sure that they have the two properties `Label` and `Value` set as they are used to represent the item in the **Dropdown**.<##input##> |
| <span className="ndl-data">Value</span> | <##input:value##>Setting this input will force the **Dropdown** to select the item with the same value set in its `Value` property.<##input##> |
| <span className="ndl-data">Items</span> | {/*##input:item##*/}This input takes an **Array** of **Objects** that will populate the **Dropdown**. You should make sure that they have the two properties `Label` and `Value` set as they are used to represent the item in the **Dropdown**.{/*##input##*/} |
| <span className="ndl-data">Value</span> | {/*##input:value##*/}Setting this input will force the **Dropdown** to select the item with the same value set in its `Value` property.{/*##input##*/} |
| <span className="ndl-data">Placeholder</span> | The placeholder text for when the dropdown is empty. |
| <span className="ndl-data">Placeholder Opacity</span> | The opacity of the placeholder text. `0` is completely transparent and invisible. `1` is completely solid and opaque. |
@@ -89,11 +89,11 @@ The main output is the following:
| Data | Description |
| --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Value</span> | <##output:value##>This output holds the value, i.e. what is in the property `Value` in the currently selected **Object** in the Dropdown.<##output##> |
| <span className="ndl-data">Value</span> | {/*##output:value##*/}This output holds the value, i.e. what is in the property `Value` in the currently selected **Object** in the Dropdown.{/*##output##*/} |
| Signal | Description |
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Changed</span> | <##output:changed##>This signal signal is emitted when the selection of the **Dropdown** changes.<##output##> |
| <span className="ndl-data">Changed</span> | {/*##output:changed##*/}This signal signal is emitted when the selection of the **Dropdown** changes.{/*##output##*/} |
It also features a set of more in depth <span className="ndl-signal">signals</span>:

4
nodes/ui-controls/radio-button-group/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Radio Button Group node
---
<##head##>
{/*##head##*/}
# Radio Button Group
@@ -24,7 +24,7 @@ The output of the <span className="ndl-node">Radio Button Group</span> node is t
</div>
<##head##>
{/*##head##*/}
## Inputs

4
nodes/ui-controls/radio-button/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Radio Button node
---
<##head##>
{/*##head##*/}
# Radio Button
@@ -24,7 +24,7 @@ You must specify a unique <span className="ndl-data">Value</span> for each <span
</div>
<##head##>
{/*##head##*/}
The core radio button has a very simple visual appearance and is most often used in other components as part of a design system. This control contains all logic such as accessibility etc. It can be styled in via it's properties, or you can use it only for the logic and create your own radio button component in your own design system.

4
nodes/ui-controls/repeater-item/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Repeater Item node
---
<##head##>
{/*##head##*/}
# Repeater Item
@@ -16,7 +16,7 @@ This node contains a set of useful utilities for components that have been dynam
</div>
<##head##>
{/*##head##*/}
## Inputs

14
nodes/ui-controls/repeater/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Repeater node
---
<##head##>
{/*##head##*/}
# Repeater
@@ -24,7 +24,7 @@ The <span className="ndl-node">Repeater</span> node takes data from a Noodl <spa
</div>
<##head##>
{/*##head##*/}
More details can be found in the [guide](/docs/guides/data/list-basics).
@@ -35,11 +35,11 @@ More details can be found in the [guide](/docs/guides/data/list-basics).
| <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##> |
| <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##> |
| <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
@@ -82,13 +82,13 @@ In the example above the script looks at the property "type" of each object, and
| 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 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>
<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>
<span className="hidden-props-for-editor">{/*##output:itemOutputSignal-\*##*/}An output signal coming from the list item.{/*##output##*/}</span>

4
nodes/ui-controls/slider/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Slider node
---
<##head##>
{/*##head##*/}
# Slider
@@ -24,7 +24,7 @@ The <span className="ndl-node">Slider</span> node allows you to set a <span clas
</div>
<##head##>
{/*##head##*/}
## Inputs

4
nodes/ui-controls/text-input/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Text Input node
---
<##head##>
{/*##head##*/}
# Text Input
@@ -24,7 +24,7 @@ The captured value can easily be connected to other nodes in a project.
</div>
<##head##>
{/*##head##*/}
## Inputs

14
nodes/utilities/boolean-to-string/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Boolean To String node
---
<##head##>
{/*##head##*/}
# Boolean To String
@@ -16,22 +16,22 @@ This node takes a <span className="ndl-data">boolean</span> input and converts i
</div>
<##head##>
{/*##head##*/}
## Inputs
| Data | Description |
| -------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Selector</span> | <##input:selector##>This is the boolean value that will select which string to output.<##input##> |
| <span className="ndl-data">String for true</span> | <##input:trueString##>The string to output if the selector is true.<##input##> |
| <span className="ndl-data">String for false</span> | <##input:falseString##>The string to output if the selecor is false.<##input##> |
| <span className="ndl-data">Selector</span> | {/*##input:selector##*/}This is the boolean value that will select which string to output.{/*##input##*/} |
| <span className="ndl-data">String for true</span> | {/*##input:trueString##*/}The string to output if the selector is true.{/*##input##*/} |
| <span className="ndl-data">String for false</span> | {/*##input:falseString##*/}The string to output if the selecor is false.{/*##input##*/} |
## Outputs
| Data | Description |
| ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| <span className="ndl-data">Current Value</span> | <##output:currentValue##>The selected string, i.e. either **String for true** or **String for false** depending on the **Selector**.<##output##> |
| <span className="ndl-data">Current Value</span> | {/*##output:currentValue##*/}The selected string, i.e. either **String for true** or **String for false** depending on the **Selector**.{/*##output##*/} |
| Signal | Description |
| ---------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Selector Changed</span> | <##output:inputChanged##>This signal is sent when the **Selector** changes value.<##output##> |
| <span className="ndl-signal">Selector Changed</span> | {/*##output:inputChanged##*/}This signal is sent when the **Selector** changes value.{/*##output##*/} |

4
nodes/utilities/color-blend/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Color Blend node
---
<##head##>
{/*##head##*/}
# Color Blend
@@ -16,7 +16,7 @@ This node lets you blend between color values.
</div>
<##head##>
{/*##head##*/}
## Inputs

4
nodes/utilities/css-definition/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: CSS Definition node
---
<##head##>
{/*##head##*/}
# CSS Definition
@@ -34,4 +34,4 @@ Classes can be attached to the Visual nodes in the Property Panel:
The CSS Definition is best used if a style class will be reused on multiple different Visual nodes. If you're only styling one Visual node you should do it in the CSS Style editor at the bottom of the Property Panel.
<##head##>
{/*##head##*/}

20
nodes/utilities/date-to-string/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Date To String node
---
<##head##>
{/*##head##*/}
# Date To String
@@ -18,15 +18,15 @@ This node translates a <span className="ndl-data">date</span> type input and out
The format is specified as a <span className="ndl-data">string</span> that can include the following special syntax: `{date}`, `{month}`, `{monthShort}`, `{year}`, `{hours}`, `{minutes}` and `{seconds}`.
<##head##>
{/*##head##*/}
- **{date}** The numeric date part.
- **{month}** The numeric month 1 = January, 12 = December.
- **{monthShort}** The numeric month 1 = Jan, 12 = Dec.
- **{year}** The numeric year.
- **{hours}** The numeric hour, between 0..23
- **{minutes}** The numeric minute, between 0..60
- **{seconds}** The numeric second, between 0..60
- `{date}` The numeric date part.
- `{month}` The numeric month 1 = January, 12 = December.
- `{monthShort}` The numeric month 1 = Jan, 12 = Dec.
- `{year}` The numeric year.
- `{hours}` The numeric hour, between 0..23
- `{minutes}` The numeric minute, between 0..60
- `{seconds}` The numeric second, between 0..60
The default format is this:
@@ -57,4 +57,4 @@ The default format is this:
| ------------------------------------------------ | ------------------------------------------------------ |
| <span className="ndl-signal">Date Changed</span> | Sends a signal when the formatted date string changed. |
</div>
</div>

4
nodes/utilities/delay/README.md
View File

@@ -4,7 +4,7 @@ hide_table_of_contents: true
title: Delay node
---
<##head##>
{/*##head##*/}
# Delay
@@ -16,7 +16,7 @@ This node lets you delay <span className="ndl-signal">signals</span> by the spec
</div>
<##head##>
{/*##head##*/}
## Inputs

Some files were not shown because too many files have changed in this diff Show More