mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-03-07 17:43:27 +01:00
Initial commit
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
This commit is contained in:
Eric Tuvesson
65
nodes/_overview.tsx
Normal file
65
nodes/_overview.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import React from 'react'
|
||||
import { Section } from '../src/components/layout/Section/Section'
|
||||
import { Text } from '../src/components/typography/Text/Text'
|
||||
import { Grid, GridLayout } from '../src/components/layout/Grid/Grid'
|
||||
import { NodeCard, NodeType } from '../src/components/cards/NodeCard/NodeCard'
|
||||
import { getNodePageData } from '../static/data/nodeData'
|
||||
|
||||
function recursiveRender(data) {
|
||||
if ('title' in data) {
|
||||
return (
|
||||
<Section key={data.key} title={data.title} linkLabel={false}>
|
||||
{data.description && (
|
||||
<Text>
|
||||
<span
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: data.description,
|
||||
}}
|
||||
/>
|
||||
</Text>
|
||||
)}
|
||||
<Grid layout={GridLayout.Fifths}>
|
||||
{data.items.map(recursiveRender)}
|
||||
</Grid>
|
||||
</Section>
|
||||
)
|
||||
} else {
|
||||
return <NodeCard {...data} />
|
||||
}
|
||||
}
|
||||
|
||||
export function NodeReferenceListing() {
|
||||
return <div>{getNodePageData().map(recursiveRender)}</div>
|
||||
}
|
||||
|
||||
export function NodeColorGuide({ text }) {
|
||||
return (
|
||||
<Section title="Node colors" linkLabel={null}>
|
||||
<Grid layout={GridLayout.Grid_2_3}>
|
||||
<Text>{text}</Text>
|
||||
|
||||
<div>
|
||||
<Grid layout={GridLayout.Thirds}>
|
||||
<NodeCard
|
||||
label="Visual nodes"
|
||||
nodeType={NodeType.Visual}
|
||||
/>
|
||||
<NodeCard label="Data nodes" nodeType={NodeType.Data} />
|
||||
<NodeCard
|
||||
label="Custom code nodes"
|
||||
nodeType={NodeType.Custom}
|
||||
/>
|
||||
<NodeCard
|
||||
label="Logic nodes"
|
||||
nodeType={NodeType.Logic}
|
||||
/>
|
||||
<NodeCard
|
||||
label="Connection nodes"
|
||||
nodeType={NodeType.Connection}
|
||||
/>
|
||||
</Grid>
|
||||
</div>
|
||||
</Grid>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
64
nodes/basic-elements/circle.md
Normal file
64
nodes/basic-elements/circle.md
Normal file
@@ -0,0 +1,64 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Circle
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Circle
|
||||
|
||||
This node places a circle (or a circle segment) in the visual tree. It features a wide range of design options.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Size</span> | Specifies the size of the Circle in pixels. |
|
||||
| <span className="ndl-data">Start Angle</span> | The start angle of the Circle segment. |
|
||||
| <span className="ndl-data">End Angle</span> | The end angle of the Circle segment. |
|
||||
| <span className="ndl-data">Fill</span> | Specify whether the Cirlce should be filled or not. |
|
||||
| <span className="ndl-data">Fill Color</span> | Specify the fill color. |
|
||||
| <span className="ndl-data">Stroke</span> | Enables the stroke of the Circle. |
|
||||
| <span className="ndl-data">Stroke Width</span> | Sets the width of the Circle stroke. |
|
||||
| <span className="ndl-data">Stroke Color</span> | Sets the stroke color of the Circle stroke. |
|
||||
| <span className="ndl-data">Line Cap</span> | Specifies what kind of cap there will be on the circle stroke.<br/><br/>`Butt`: A direct cut, not rounded end of the circle stroke.<br/>`Round`: A round end to the circle stroke. |
|
||||
|
||||
### Visual
|
||||
|
||||
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties):
|
||||
|
||||
- [Margin](/nodes/shared-props/inputs/visual-input-properties#margin)
|
||||
- [Alignment](/nodes/shared-props/inputs/visual-input-properties#alignment)
|
||||
- [Layout, Position](/nodes/shared-props/inputs/visual-input-properties#position)
|
||||
- [Placement](/nodes/shared-props/inputs/visual-input-properties#placement)
|
||||
- [Other](/nodes/shared-props/inputs/visual-input-properties#other)
|
||||
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties#advanced-html)
|
||||
|
||||
## Outputs
|
||||
|
||||
Many of the UI nodes share the same outputs. Please refer to the [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties) documentation.
|
||||
|
||||
This node supports the following properties:
|
||||
|
||||
- [Bounding Box](/nodes/shared-props/outputs/visual-output-properties#bounding-box)
|
||||
- [Mounted](/nodes/shared-props/outputs/visual-output-properties#mounted)
|
||||
- [Pointer Events](/nodes/shared-props/outputs/visual-output-properties#pointer-events)
|
||||
- [Hover Events](/nodes/shared-props/outputs/visual-output-properties#hover-events)
|
||||
- [Other](/nodes/shared-props/outputs/visual-output-properties#other)
|
||||
|
||||
<div className="hidden-props-for-editor">
|
||||
|
||||
@include "../shared-props/inputs/_visual-input-properties.md"
|
||||
|
||||
@include "../shared-props/outputs/_visual-output-properties.md"
|
||||
|
||||
</div>
|
||||
57
nodes/basic-elements/columns.md
Normal file
57
nodes/basic-elements/columns.md
Normal file
@@ -0,0 +1,57 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Columns
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Columns
|
||||
|
||||
This node is used to layout your content in columns with gaps.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The <span className="ndl-node">Columns</span> node does not have any own styling attached to it. Instead it arranges all its children into dynamic layouts using **layout strings**.
|
||||
|
||||
## Layout strings
|
||||
|
||||
A layout string is simply a string of numbers with spaces between them. Every number represents a fraction of the full container width and is converted to a column. A <span className="ndl-node">Columns</span> node with the layout string `1 2 1` that contains 5 children will be rendered like this:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Responsive layouts
|
||||
|
||||
### Using the Min Column Width value
|
||||
|
||||
The easiest way of making the columns responsive is by setting the <span class="ndl-data">Min Column Width</span> value. This will check if the columns will fit with your specified <span class="ndl-data">Layout String</span>. If the container can't fit the columns when they are at their Min Width, the layout will fold into a grid with fewer columns.
|
||||
|
||||
Make sure the children you pass are set to a width of `100%` of their parent.
|
||||
|
||||
### Using different layout strings
|
||||
|
||||
Advanced responsive layouts can easily be created by passing different values to the <span class="ndl-data">Layout String</span> input using a [States](/nodes/utilities/logic/states) node and the [Media Queries](/library/prefabs/media-query/) prefab.
|
||||
|
||||
Make sure the children you pass are set to a width of `100%` of their parent.
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------------- | --------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Layout String</span> | Determines the size and layout of the columns that the children are rendered into. |
|
||||
| <span className="ndl-data">Horizontal Gap</span> | The horizontal spacing between the columns in `px`. |
|
||||
| <span className="ndl-data">Vertical Gap</span> | The vertical spacing between the columns in `px`. |
|
||||
| <span className="ndl-data">Layout Direction</span> | If the columns should be rendered horizontally or vertically. |
|
||||
| <span className="ndl-data">Min Column Width</span> | The smallest the columns are allowed to be before they fold into a layout with fewer columns. |
|
||||
| <span className="ndl-data">Mounted</span> | If the columns node should be rendered in the app or not. |
|
||||
| <span className="ndl-data">Justify Content</span> | The position of children in unfilled rows. |
|
||||
74
nodes/basic-elements/group.md
Normal file
74
nodes/basic-elements/group.md
Normal file
@@ -0,0 +1,74 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Group
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Group
|
||||
|
||||
This node is a styleable container. It can have other visual nodes nested inside of it.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The <span className="ndl-node">Group</span> is the most essential node when it comes to creating layouts and arranging visual elements.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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).
|
||||
|
||||
## Inputs
|
||||
|
||||
Many of the UI nodes share the same inputs. Please refer to the [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties) documentation.
|
||||
|
||||
This node supports the following properties:
|
||||
|
||||
- [Margin](/nodes/shared-props/inputs/visual-input-properties#margin)
|
||||
- [Padding](/nodes/shared-props/inputs/visual-input-properties#padding)
|
||||
- [Alignment](/nodes/shared-props/inputs/visual-input-properties#alignment)
|
||||
- [Dimensions](/nodes/shared-props/inputs/visual-input-properties#dimensions)
|
||||
- [Layout](/nodes/shared-props/inputs/visual-input-properties#layout)
|
||||
- [Align and justify content](/nodes/shared-props/inputs/visual-input-properties#align-and-justify-content)
|
||||
- [Scroll](/nodes/shared-props/inputs/visual-input-properties#scroll)
|
||||
- [Style](/nodes/shared-props/inputs/visual-input-properties#style)
|
||||
- [Border Style](/nodes/shared-props/inputs/visual-input-properties#border-style)
|
||||
- [Corner Radius](/nodes/shared-props/inputs/visual-input-properties#corner-radius)
|
||||
- [Box Shadow](/nodes/shared-props/inputs/visual-input-properties#box-shadow)
|
||||
- [Placement](/nodes/shared-props/inputs/visual-input-properties#placement)
|
||||
- [Dimension Constraints](/nodes/shared-props/inputs/visual-input-properties#dimension-constraints)
|
||||
- [Focus](/nodes/shared-props/inputs/visual-input-properties#focus)
|
||||
- [Other](/nodes/shared-props/inputs/visual-input-properties#other)
|
||||
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties#advanced-html)
|
||||
|
||||
## Outputs
|
||||
|
||||
Many of the UI nodes share the same outputs. Please refer to the [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties) documentation.
|
||||
|
||||
This node supports the following properties:
|
||||
|
||||
- [Scrolling](/nodes/shared-props/outputs/visual-output-properties#scrolling)
|
||||
- [Bounding Box](/nodes/shared-props/outputs/visual-output-properties#bounding-box)
|
||||
- [Mounted](/nodes/shared-props/outputs/visual-output-properties#mounted)
|
||||
- [Pointer Events](/nodes/shared-props/outputs/visual-output-properties#pointer-events)
|
||||
- [Hover Events](/nodes/shared-props/outputs/visual-output-properties#hover-events)
|
||||
- [Focus](/nodes/shared-props/outputs/visual-output-properties#focus)
|
||||
- [Other](/nodes/shared-props/outputs/visual-output-properties#other)
|
||||
|
||||
<div className="hidden-props-for-editor">
|
||||
|
||||
@include "../shared-props/inputs/_visual-input-properties.md"
|
||||
|
||||
@include "../shared-props/outputs/_visual-output-properties.md"
|
||||
|
||||
</div>
|
||||
72
nodes/basic-elements/icon.md
Normal file
72
nodes/basic-elements/icon.md
Normal file
@@ -0,0 +1,72 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Icon
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Icon
|
||||
|
||||
This node places an icon in the visual tree.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You can use an icon from the built in library, or provide your own image source.
|
||||
<##head##>
|
||||
|
||||
## Dynamic icons
|
||||
|
||||
If you want to dynamically pass an icon from the icon library to the **Icon** node you do this through the <span class="ndl-data">Icon Source</span> input.
|
||||
|
||||
This input expects an object with a **class** (being the name of the icon library) and **code** (being the icon code that you see when you hover an icon in the icon picker). The easiest way of transforming a string to an icon object is to use a custom function containing the following code:
|
||||
|
||||
```js
|
||||
Outputs.iconObject = {
|
||||
"class": "material-icons",
|
||||
"code": Inputs.iconCode,
|
||||
};
|
||||
```
|
||||
|
||||
This will automatically create an <span className="ndl-data">iconCode</span> input and an <span className="ndl-data">iconObject</span> output.
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------- | --------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Type</span> | Use this to set if you want to use a predefined `icon` or a custom `image` from the project folder. |
|
||||
| <span className="ndl-data">Icon Source</span> | Where to get the icon. |
|
||||
| <span className="ndl-data">Size</span> | The width of the icon in `px`. |
|
||||
| <span className="ndl-data">Color</span> | Sets the color of the icon. Only visible if _Type_ is set to `icon`. |
|
||||
|
||||
### Visual
|
||||
|
||||
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties):
|
||||
|
||||
- [Margin](/nodes/shared-props/inputs/visual-input-properties#margin)
|
||||
- [Padding](/nodes/shared-props/inputs/visual-input-properties#padding)
|
||||
- [Alignment](/nodes/shared-props/inputs/visual-input-properties#alignment)
|
||||
- [Layout, Position](/nodes/shared-props/inputs/visual-input-properties#-position)
|
||||
- [Style](/nodes/shared-props/inputs/visual-input-properties#style)
|
||||
- [Placement](/nodes/shared-props/inputs/visual-input-properties#placement)
|
||||
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties#advanced-html)
|
||||
|
||||
## Outputs
|
||||
|
||||
This node supports the following [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties):
|
||||
|
||||
- [Bounding Box](/nodes/shared-props/outputs/visual-output-properties#bounding-box)
|
||||
- [Mounted](/nodes/shared-props/outputs/visual-output-properties#mounted)
|
||||
- [Other](/nodes/shared-props/outputs/visual-output-properties#other)
|
||||
|
||||
<div className="hidden-props-for-editor">
|
||||
|
||||
@include "../shared-props/inputs/_visual-input-properties.md"
|
||||
|
||||
@include "../shared-props/outputs/_visual-output-properties.md"
|
||||
|
||||
</div>
|
||||
59
nodes/basic-elements/image.md
Normal file
59
nodes/basic-elements/image.md
Normal file
@@ -0,0 +1,59 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Image
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Image
|
||||
|
||||
This node places an image in the visual tree. It features a wide range of design options and blend modes.
|
||||
|
||||
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##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Source</span> | The image source path. Choose an image in your project or point to a valid URL that can be accessed. |
|
||||
| <span className="ndl-data">Source Set</span> | Use this property to specify different image sources for different resolutions making it more responsive. Learn more [here](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). |
|
||||
|
||||
### Visual
|
||||
|
||||
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties):
|
||||
|
||||
- [Margin](/nodes/shared-props/inputs/visual-input-properties#margin)
|
||||
- [Alignment](/nodes/shared-props/inputs/visual-input-properties#alignment)
|
||||
- [Dimensions](/nodes/shared-props/inputs/visual-input-properties#dimensions)
|
||||
- [Layout, Position](/nodes/shared-props/inputs/visual-input-properties#-position)
|
||||
- [Style](/nodes/shared-props/inputs/visual-input-properties#style)
|
||||
- [Border Style](/nodes/shared-props/inputs/visual-input-properties#border-style)
|
||||
- [Corner Radius](/nodes/shared-props/inputs/visual-input-properties#corner-radius)
|
||||
- [Box Shadow](/nodes/shared-props/inputs/visual-input-properties#box-shadow)
|
||||
- [Placement](/nodes/shared-props/inputs/visual-input-properties#placement)
|
||||
- [Dimension Constraints](/nodes/shared-props/inputs/visual-input-properties#dimension-constraints)
|
||||
- [Other](/nodes/shared-props/inputs/visual-input-properties#other)
|
||||
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties#advanced-html)
|
||||
|
||||
## Outputs
|
||||
|
||||
Many of the UI nodes share the same outputs. Please refer to the [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties) documentation.
|
||||
|
||||
This node supports the following properties:
|
||||
|
||||
- [Bounding Box](/nodes/shared-props/outputs/visual-output-properties/#bounding-box)
|
||||
- [Mounted](/nodes/shared-props/outputs/visual-output-properties/#mounted)
|
||||
- [Pointer Events](/nodes/shared-props/outputs/visual-output-properties/#pointer-events)
|
||||
- [Hover Events](/nodes/shared-props/outputs/visual-output-properties/#hover-events)
|
||||
- [Other](/nodes/shared-props/outputs/visual-output-properties/#other)
|
||||
|
||||
<div className="hidden-props-for-editor">
|
||||
|
||||
@include "../shared-props/inputs/_visual-input-properties.md"
|
||||
|
||||
@include "../shared-props/outputs/_visual-output-properties.md"
|
||||
|
||||
</div>
|
||||
69
nodes/basic-elements/text.md
Normal file
69
nodes/basic-elements/text.md
Normal file
@@ -0,0 +1,69 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Text
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Text
|
||||
|
||||
This node places a text element in the visual tree. You can use it for both single words as well as paragraphs of text.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The <span className="ndl-node">Text</span> node can be styled with font family, color, size, and much more.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Text</span> | The text string to display. |
|
||||
| <span className="ndl-data">Text Align</span> | The alignment of the text string within the Text node's bounding box. |
|
||||
| <span className="ndl-data">Word Break</span> | Control where line breaks are allowed. <br/><br/> `Normal`: Break on spaces and other whitespace characters <br/>`Break All`: Allow line breaks between any two characters, including inside words |
|
||||
|
||||
### Visual
|
||||
|
||||
The Text node features the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties).
|
||||
|
||||
- [Margin](/nodes/shared-props/inputs/visual-input-properties#margin)
|
||||
- [Alignment](/nodes/shared-props/inputs/visual-input-properties#alignment)
|
||||
- [Dimensions](/nodes/shared-props/inputs/visual-input-properties#dimensions)
|
||||
- [Text Styles](/nodes/shared-props/inputs/visual-input-properties#text-styles)
|
||||
- [Style](/nodes/shared-props/inputs/visual-input-properties#style)
|
||||
- [Placement](/nodes/shared-props/inputs/visual-input-properties#placement)
|
||||
- [Layout, Position](/nodes/shared-props/inputs/visual-input-properties#-position)
|
||||
- [Other](/nodes/shared-props/inputs/visual-input-properties#other)
|
||||
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties#advanced-html)
|
||||
|
||||
## Outputs
|
||||
|
||||
Many of the UI nodes share the same outputs. Please refer to the [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties) documentation.
|
||||
|
||||
This node supports the following outputs:
|
||||
|
||||
- [Bounding Box](/nodes/shared-props/outputs/visual-output-properties/#bounding-box)
|
||||
- [Mounted](/nodes/shared-props/outputs/visual-output-properties/#mounted)
|
||||
- [Pointer Events](/nodes/shared-props/outputs/visual-output-properties/#pointer-events)
|
||||
- [Hover Events](/nodes/shared-props/outputs/visual-output-properties/#hover-events)
|
||||
- [Other](/nodes/shared-props/outputs/visual-output-properties/#other)
|
||||
|
||||
<div className="hidden-props-for-editor">
|
||||
|
||||
@include "../shared-props/inputs/_visual-input-properties.md"
|
||||
|
||||
@include "../shared-props/outputs/_visual-output-properties.md"
|
||||
|
||||
</div>
|
||||
97
nodes/basic-elements/video.md
Normal file
97
nodes/basic-elements/video.md
Normal file
@@ -0,0 +1,97 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Video
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Video
|
||||
|
||||
This node places a video surface in the visual tree. It features a wide range of design options and settings for playback.
|
||||
|
||||
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##>
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------- | -------------------------------------------- |
|
||||
| <span className="ndl-signal">Play</span> | Signal to start playing the video. |
|
||||
| <span className="ndl-signal">Pause</span> | Signal to pause the video. |
|
||||
| <span className="ndl-signal">Restart</span> | Signal to play the video from the beginning. |
|
||||
| <span className="ndl-signal">Reset</span> | Signal to reset the video to the beginning. |
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------ | -------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Source</span> | The source of the video. Either a local file in the project folder or an absolute url. |
|
||||
| <span className="ndl-data">Poster</span> | An image shown when the video is not started. Choose an image in the project folder. |
|
||||
| <span className="ndl-data">Autoplay</span> | Sets whether the audio/video should start playing as soon as it is loaded. |
|
||||
| <span className="ndl-data">Controls</span> | Sets whether the audio/video browser native controls are visible. |
|
||||
| <span className="ndl-data">Volume</span> | The volume of the video when played. |
|
||||
| <span className="ndl-data">Muted</span> | Sets whether the audio/video is muted or not. |
|
||||
| <span className="ndl-data">Loop</span> | Indicates whether the video should loop when the end is reached during playback. |
|
||||
|
||||
The Video node also has some special Video Layout properties:
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Video Position X</span> | The video's X position within the **Video** node's bounding box. |
|
||||
| <span className="ndl-data">Video Position Y</span> | The video's Y position within the **Video** node's bounding box. |
|
||||
| <span className="ndl-data">Object Fit</span> | Specifies how the video will behave when scaled to other size than the default size.<br/><br/>`Contain`: The video will be scaled by keeping aspect ratio and making sure the video fits in the bounding box. This may introduce transparent areas within the **Video** node's bounding box.<br/>`Cover`: The video will be scaled by keeping aspect ratio and making sure the video fills the entire bounding box. Portions of the video may be clipped.<br/>`Fill`: The video will fill the bounding box by scaling without keeping aspect ratio.<br/>`None`: The video will not be scaled. May be clipped. |
|
||||
|
||||
</div>
|
||||
|
||||
### Visual
|
||||
|
||||
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties):
|
||||
|
||||
- [Margin](/nodes/shared-props/inputs/visual-input-properties#margin)
|
||||
- [Alignment](/nodes/shared-props/inputs/visual-input-properties#alignment)
|
||||
- [Dimensions](/nodes/shared-props/inputs/visual-input-properties#dimensions)
|
||||
- [Layout, Position](/nodes/shared-props/inputs/visual-input-properties#-position)
|
||||
- [Style](/nodes/shared-props/inputs/visual-input-properties#style)
|
||||
- [Border Style](/nodes/shared-props/inputs/visual-input-properties#border-style)
|
||||
- [Corner Radius](/nodes/shared-props/inputs/visual-input-properties#corner-radius)
|
||||
- [Box Shadow](/nodes/shared-props/inputs/visual-input-properties#box-shadow)
|
||||
- [Placement](/nodes/shared-props/inputs/visual-input-properties#placement)
|
||||
- [Dimension Constraints](/nodes/shared-props/inputs/visual-input-properties#dimension-constraints)
|
||||
- [Other](/nodes/shared-props/inputs/visual-input-properties#other)
|
||||
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties#advanced-html)
|
||||
|
||||
## Outputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">On Can Play</span> | Signal triggered when the video has loaded and is ready to be played. |
|
||||
| <span className="ndl-signal">On Time Update</span> | Signal triggered when the playing position of the audio/video has changed. Event is invoked both by playing the media as well as when the playback position is being moved (for example when fast forward is being used). |
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------- | ------------------------------------------------------------- |
|
||||
| <span className="ndl-data">DOM Element</span> | A reference to the DOM Element representing this visual node. |
|
||||
| <span className="ndl-data">videoWidth</span> | The width of the video source. |
|
||||
| <span className="ndl-data">videoHeight</span> | The height of the video source. |
|
||||
|
||||
</div>
|
||||
|
||||
### Visual
|
||||
|
||||
This node supports the following [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties).
|
||||
|
||||
- [Bounding Box](/nodes/shared-props/outputs/visual-output-properties/#bounding-box)
|
||||
- [Mounted](/nodes/shared-props/outputs/visual-output-properties/#mounted)
|
||||
- [Pointer Events](/nodes/shared-props/outputs/visual-output-properties/#pointer-events)
|
||||
- [Hover Events](/nodes/shared-props/outputs/visual-output-properties/#hover-events)
|
||||
- [Other](/nodes/shared-props/outputs/visual-output-properties/#other)
|
||||
|
||||
<div className="hidden-props-for-editor">
|
||||
|
||||
@include "../shared-props/inputs/\_visual-input-properties.md"
|
||||
@include "../shared-props/outputs/\_visual-output-properties.md"
|
||||
|
||||
</div>
|
||||
82
nodes/cloud-functions/cloud-data/aggregate-records.md
Normal file
82
nodes/cloud-functions/cloud-data/aggregate-records.md
Normal file
@@ -0,0 +1,82 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Aggregate Records
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Aggregate Records
|
||||
|
||||
This node is used to compute an aggregate over properties of records in the cloud database.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You create and give a name to an aggregate.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Then for each aggregate name you created you choose the property to aggregate over and the type of aggregate.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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.
|
||||
|
||||
You can do aggregates over two types of properties **String** and **Number**, these are the available aggregates:
|
||||
|
||||
**String**, for string there is only one aggregate, `Distinct` this returns the unique values for the property in all records.
|
||||
|
||||
**Number**, for number you can use the following aggregates:
|
||||
- `Min` This will return the minumum value for the property for all records.
|
||||
- `Max` Return the maximum value for the property for all records.
|
||||
- `Sum` Return the sum of the property for all records.
|
||||
- `Avg` Return the avegage of the property for all records.
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <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##> |
|
||||
|
||||
### Aggregate property and operation
|
||||
|
||||
For each aggregate you create you also need to provide the property if should aggregate and the operation it should use.
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Property</span> | Select the property of the **Class** that this aggregate should use. |
|
||||
| <span className="ndl-data">Operation</span> | Pick the operation that the aggregate should use. See above for which operations are available for which types. |
|
||||
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
|
||||
| <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##> |
|
||||
|
||||
| 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##> |
|
||||
|
||||
63
nodes/cloud-functions/request.md
Normal file
63
nodes/cloud-functions/request.md
Normal file
@@ -0,0 +1,63 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Request
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Request
|
||||
|
||||
The **Request** node is the starting point for **Cloud Functions**, it is where the logic flow is initiated when the function is called from the client. Each cloud function component can only have one **Request** node.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
It's also where any input parameters to the **Cloud Function** is provided. To learn more about cloud functions take a look at the [guide](/docs/guides/cloud-logic/introduction).
|
||||
|
||||
You specify what parameters the cloud function accepts in the properties of the **Request** node. Here you can also specify if the user must be logged in on the client to call this function.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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.
|
||||
|
||||
However, if you check the **Allow Unauthenticated** property the function can be called without a valid user session on the client.
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
If the cloud function accepts unauthenticated requests, you can tell if the call was authenticated (there was a valid user session on the client) with the two outputs **Authenticated** and **User Id**. This can be used to trigger two different flows.
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Allow Unauthenticated</span> | Specifies if a valid user session (the user is logged in) is required on the client for calling this function. |
|
||||
|
||||
### Parameters
|
||||
You can add parameters using the properties of this node. Parameters will show up when using the [Cloud Function](/nodes/data/cloud-data/cloud-function) node to call a cloud function from the client.
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Authenticated</span> | This output will be **true** if the client calling this cloud function had a valid user session, i.e. the user was logged in. |
|
||||
| <span className="ndl-data">User Id</span> | If the user was logged in when calling this function this output will be the **Id** of the user record. |
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Received</span> | This signal is the starting point for the cloud function logic flow. The first actions you want performed in the cloud function should be connected to this input. |
|
||||
|
||||
|
||||
48
nodes/cloud-functions/response.md
Normal file
48
nodes/cloud-functions/response.md
Normal file
@@ -0,0 +1,48 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Response
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Response
|
||||
|
||||
The **Response** node is used to complete a cloud function and return the result to the client. There can be many **Response** nodes in a cloud function and they can either return a **Success** or **Failure** result.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The response is sent when a signal is received on the **Send** input. You can specify if it's a successful or failed result in the properties using the **Status** property.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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.
|
||||
|
||||
If the status is **Success** you can provide a number of result parameters that will be returned to the calling client [Cloud Function](/nodes/data/cloud-data/cloud-function) as outputs.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Status</span> | Specifies if this is a successful or failed response, **Success** or **Failure** that will be sent to the calling client when the **Send** signal is received. |
|
||||
| <span className="ndl-data">Error Message</span> | If this **Response** node have a **Failure** status you can provide an error message using this property that will be sent back to the client and the calling **Cloud Function** node. |
|
||||
|
||||
### Parameters
|
||||
You can add parameters using the properties of this node, if the **Status** is set to **Success**. Parameters will show up when using the [Cloud Function](/nodes/data/cloud-data/cloud-function) node as outputs. When the **Send** signal is received on a **Response** node it will send back the result parameters which will be emitted on the outputs of the cloud function node that made the call.
|
||||
|
||||
82
nodes/component-stack/component-stack-node.md
Normal file
82
nodes/component-stack/component-stack-node.md
Normal file
@@ -0,0 +1,82 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Component Stack
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Component Stack
|
||||
|
||||
The **Component Stack** node is used to navigate between components in an area on the screen. It is typically used together with the navigation nodes [Push Component To Stack](/nodes/component-stack/push-component) and [Pop Component Stack](/nodes/component-stack/pop-component).
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Unlike the somewhat similar [Page Router](/nodes/navigation/page-router) the **Component Stack** is optimized for app type navigation (in contrast to web type) and does not use URLs and routing as part of the navigation.
|
||||
|
||||
The **Component Stack** works as a regular stack, meaning you can _Push_ (put a component at the top of the stack) and _Pop_ (remove the topmost component from the stack). You can also chose to _replace_ all components with the a new component (see [Push Component To Stack](/nodes/component-stack/push-component).
|
||||
|
||||
When pushing the **Component Stack** will create a new instance of the component. Only the top component will be shown. This means that you can have multiple instances of the same component on the stack at the same time. You can use the **Reset** action to clear the stack.
|
||||
|
||||
## Adding Component Entries to Push and Pop
|
||||
|
||||
A Component Stack should have a number of _component entries_ that it can push or pop. You add components entries by clicking on _Add Component_ button, giving the entry a name and select a component. These entries will then be available in the [Push Component To Stack](/nodes/component-stack/push-component) and [Pop Component Stack](/nodes/component-stack/pop-component) nodes.
|
||||
|
||||
## Visual Layout
|
||||
|
||||
With the **clip** property set to <span className="ndl-data">false</span>, the **Component Stack** will automatically take up as much space as available and expand beyond that if its component currently showing is larger. If the **clip** property is set to <span className="ndl-data">true</span> it fill up any available space in its parent container and clip its components if they are larger than that.
|
||||
|
||||
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) node.
|
||||
|
||||
<##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">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##> |
|
||||
|
||||
| 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##> |
|
||||
|
||||
| Deprecated | Description |
|
||||
| -------------------------------------------------- | --------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-deprecated">Use Routes</span> | <##input:useRoutes##>**This Property is deprecated and should not be used.**<##input##> |
|
||||
|
||||
### Visual
|
||||
|
||||
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties):
|
||||
|
||||
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties#advanced-html)
|
||||
|
||||
## Outputs
|
||||
|
||||
| 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##> |
|
||||
|
||||
### Visual
|
||||
|
||||
This node supports the following [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties):
|
||||
|
||||
- [Bounding Box](/nodes/shared-props/outputs/visual-output-properties#bounding-box)
|
||||
- [Mounted](/nodes/shared-props/outputs/visual-output-properties#mounted)
|
||||
- [Other](/nodes/shared-props/outputs/visual-output-properties#other)
|
||||
|
||||
<div className="hidden-props-for-editor">
|
||||
|
||||
@include "../shared-props/inputs/_visual-input-properties.md"
|
||||
|
||||
@include "../shared-props/outputs/_visual-output-properties.md"
|
||||
|
||||
</div>
|
||||
39
nodes/component-stack/pop-component.md
Normal file
39
nodes/component-stack/pop-component.md
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Pop Component
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Pop Component Stack
|
||||
|
||||
The **Pop Component Stack** node is used together with a [Component Stack](/nodes/component-stack/component-stack-node) to navigate back ("pop"). It is typically used when creating app style navigation. For more information on how **Component Stack** navigation work, check out the [Component Stack](/nodes/component-stack/component-stack-node) documentation.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
?> Note that you have to use the **Pop Component Stack** node from within a component in the **Component Stack**.
|
||||
|
||||
<##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##> |
|
||||
|
||||
### Back Actions and Results
|
||||
|
||||
When popping a component from the stack you can also trigger a **Back Action** and a **Result**. This can be used to communicate back to the place where the component was originally pushed using the [Push To Component Stack](/nodes/component-stack/push-component) node. This could for example be used to communicate back some contents of a form, and if the user pressed "OK" or "Cancel".
|
||||
|
||||
| Mixed | Description |
|
||||
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **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: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>
|
||||
81
nodes/component-stack/push-component.md
Normal file
81
nodes/component-stack/push-component.md
Normal file
@@ -0,0 +1,81 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Push Component
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Push Component To Stack
|
||||
|
||||
The **Push Component To Stack** node is used together with a [Component Stack](/nodes/component-stack/component-stack-node) to navigate to a new component (i.e. "push on the stack"). It is typically used when creating app style navigation. For more information on how **Component Stack** navigation work, check out the [Component Stack](/nodes/component-stack/component-stack-node) documentation.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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##> |
|
||||
|
||||
| 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##> |
|
||||
|
||||
| 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>
|
||||
|
||||
### 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##> |
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
<img src="/guides/navigation/transition-params.png"></img>
|
||||
</div>
|
||||
|
||||
<div className="hidden-props-for-editor">
|
||||
|
||||
<##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##>
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
| 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##> |
|
||||
|
||||
| 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: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>
|
||||
26
nodes/component-utilities/component-children.md
Normal file
26
nodes/component-utilities/component-children.md
Normal file
@@ -0,0 +1,26 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Component Children
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Component Children
|
||||
|
||||
Used to mark where children of instances of this component will be placed.
|
||||
|
||||
Any instance of a component that have a **Component Children** placed in its heirarchy will be
|
||||
able to have children. These children will appear as though they were inserted at the location of
|
||||
the **Component Children** node.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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.
|
||||
52
nodes/component-utilities/component-inputs.md
Normal file
52
nodes/component-utilities/component-inputs.md
Normal file
@@ -0,0 +1,52 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Component Inputs
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Component Inputs
|
||||
|
||||
This node is used to create inputs for reusable components.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
A <span className="ndl-node">Component Input</span> node can have multiple ports connected to inputs on the nodes inside of the component.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
A very powerful feature of Noodl is the ability to create **Components** that act as reusable nodes in your application.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
A core concept of components is that they can have inputs and outputs like any of the built in nodes.
|
||||
|
||||
The inputs of a component originate from a **Component Inputs** node and are connected to any node in the component.
|
||||
|
||||
When a **Component Inputs** node is created, it doesn't have any ports. The ports must be added by inspecting the node (left clicking it) and then clicking the **+Port** button.
|
||||
You can create and name ports as you wish.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You can have multiple **Component Input** nodes in a single component. If you have multiple **Component Input** nodes with ports that share the same name, they will be merged into one input. It's important that target ports have the same or compatible types. If not, the port may not show up in instances of the component.
|
||||
|
||||
You can also create groups for your component inputs using the **+Group** button, inputs in a specific group will have that as header in the properties of the component instance node.
|
||||
51
nodes/component-utilities/component-object.md
Normal file
51
nodes/component-utilities/component-object.md
Normal file
@@ -0,0 +1,51 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Component Object
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Component Object
|
||||
|
||||
This node a shared set of properties that can be accessed from a component as well as from any child components. It can be used to implement things such as radio groups, tabs, accordion lists and other visual elements that need to coordinate. It is also a useful general tool for any kind communication between a set of components.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
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##>
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Unlike the <span className="ndl-node">[Object](/nodes/data/object/object-node)</span> node it does not have an <span className="ndl-data">Id</span>. Instead all <span className="ndl-node">Component Object</span> nodes within the same component share the same data.
|
||||
|
||||
## Inputs
|
||||
|
||||
| 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. |
|
||||
|
||||
| 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##> |
|
||||
|
||||
## 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##> |
|
||||
|
||||
| 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##> |
|
||||
54
nodes/component-utilities/component-outputs.md
Normal file
54
nodes/component-utilities/component-outputs.md
Normal file
@@ -0,0 +1,54 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Component Outputs
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Component Outputs
|
||||
|
||||
This node is used to create outputs for reusable components.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
A <span className="ndl-node">Component Output</span> node can have as many ports as needed and can make output properties from the nodes available on the custom component.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The outputs of a component are derived from a **Component Outputs** node and are
|
||||
connected to any other node in the component.
|
||||
|
||||
When a **Component Outputs** node is created, it doesn't have any ports. The ports must be added by inspecting the node (left clicking it) and then clicking the **+Port** button.
|
||||
You can create and name ports as you wish.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Once you have created your output ports on the **Component Outputs** node, you can connect any port from any node in your component node graph to the **Component Outputs**. These connected ports will now be available as outputs from the component when it is used in other places in your Noodl application.
|
||||
|
||||
You may have multiple **Component Outputs** nodes in a single component. If you have multiple nodes with
|
||||
ports of the same name, they will be merged into one output.
|
||||
|
||||
You can also create groups of component outputs by using the **+Group** button, you can drag outputs up and down in the list. The label of the groups will be shown in connection panel of the component instance node.
|
||||
46
nodes/component-utilities/parent-component-object.md
Normal file
46
nodes/component-utilities/parent-component-object.md
Normal file
@@ -0,0 +1,46 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Parent Component Object
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Parent Component Object
|
||||
|
||||
**Parent Component Object** is always used in combination with a [Component Object](/nodes/component-utilities/component-object). A **Parent Component Object** will search upwards in the component tree until it finds a **Component Object** node and mirror that node. Any change being done to one node will be reflected in the other nodes. Multiple **Parent Component Object** nodes in the same component will always mirror the same **Component Object**.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</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##>
|
||||
|
||||
## Inputs
|
||||
|
||||
### Properties
|
||||
|
||||
| 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##> |
|
||||
|
||||
| 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. |
|
||||
|
||||
## Outputs
|
||||
|
||||
### Properties
|
||||
|
||||
| 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##> |
|
||||
|
||||
| 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##> |
|
||||
35
nodes/component-utilities/set-component-object-properties.md
Normal file
35
nodes/component-utilities/set-component-object-properties.md
Normal file
@@ -0,0 +1,35 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Set Component Object Properties
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Set Component Object Properties
|
||||
|
||||
**Component Object** is a shared set of properties that can be accessed from a component as well as from any child components. This node is used to set properties on the **Component Object** these properties can be accessed via the [Component Object](/nodes/component-utilities/component-object) or the [Parent Component Object](/nodes/component-utilities/parent-component-object).
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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##> |
|
||||
|
||||
| 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##> |
|
||||
|
||||
## 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##> |
|
||||
@@ -0,0 +1,35 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Set Parent Component Object Properties
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Set Parent Component Object Properties
|
||||
|
||||
With this node you can set properties on the closed parent **Component Object**. You can access properties of the closet parent **Component Object** with the [Parent Component Object](/nodes/component-utilities/parent-component-object) node.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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##> |
|
||||
|
||||
| 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##> |
|
||||
|
||||
## 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##> |
|
||||
97
nodes/data/array/array-filter.md
Normal file
97
nodes/data/array/array-filter.md
Normal file
@@ -0,0 +1,97 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Array Filter
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Array Filter
|
||||
|
||||
This node will take an array of items as input and output a filtered version of the items. Look at the Filter section below to find information on how to create filters.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
### General
|
||||
|
||||
| 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##> |
|
||||
|
||||
| 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##> |
|
||||
|
||||
### Filter
|
||||
|
||||
By default the **Array Filter** node will pass through all objects of the input array. You can filter on **Object** properties. Add which properties you want to filter on.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
For each filter property you can specify:
|
||||
|
||||
**Type**
|
||||
The type you want for the filter, can be _Number_, _String_ or _Boolean_.
|
||||
|
||||
**Op**
|
||||
The available operations of the filter depend on the type that is set.
|
||||
|
||||
- _Equals_ Include in filter if the property equals the provided value. Available for all types.
|
||||
- _Not Equals_ Include in filter if the property does NOT equal the provided value. Available for all types.
|
||||
- _Greater than_ Include in filter if the property is greater than the provided value. Only available if type is _Number_.
|
||||
- _Less than_ Include in filter if the property is less than the provided value. Only available if type is _Number_.
|
||||
- _Greater than or equal_ Include in filter if the property is greater than or equal to the provided value. Only available if type is _Number_.
|
||||
- _Less than or equal_ Include in filter if the property is less than or equal to the provided value. Only available if type is _Number_.
|
||||
- _Matches Regexp_ Match a regexp to the provided value. Available if type is _String_
|
||||
|
||||
?> 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##>
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
### Sort
|
||||
|
||||
By default the **Array Filter** node does not sort the output, it will be in the same order as the input. You can specify sorting. Like filters you simply add which properties you want to sort on.
|
||||
For each property you can choose the sorting order.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
### General
|
||||
|
||||
| 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##> |
|
||||
|
||||
| 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##> |
|
||||
62
nodes/data/array/array-map.md
Normal file
62
nodes/data/array/array-map.md
Normal file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Array Map
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Array Map
|
||||
|
||||
This node takes an input array, runs a small map script on each item, and outputs the resulting mapped array. That is an array with new objects, each created in the mapping script.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------- | ------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Items</span> | <##input:items##>The array that should be mapped.<##input##> |
|
||||
|
||||
### Script
|
||||
|
||||
The mapping script used to map the objects in the input array to new objects in the mapped output array. The script should be provided in the following format:
|
||||
|
||||
```javascript
|
||||
map({
|
||||
FullName: () => object.first_name + object.last_name,
|
||||
Age: 'years_old',
|
||||
})
|
||||
```
|
||||
|
||||
You can either provide a string with the name of the property that should be mapped with the syntax _to:'from'_ which will simply rename a property taking the value directly from the input object. Or you can provide a mapping function that takes the object (of the type [Noodl.Object](/javascript/reference/object)) and the function should return the mapped value.
|
||||
|
||||
Sometimes you need to extract the **Id** of the objects you are mapping, this can be done in the following way:
|
||||
|
||||
```javascript
|
||||
map({
|
||||
Value: () => object.getId(),
|
||||
Label: 'PhotoName',
|
||||
})
|
||||
```
|
||||
|
||||
Note that the objects that are created when mapping are new objects so they will have their own Id as well.
|
||||
|
||||
## Outputs
|
||||
|
||||
### General
|
||||
|
||||
| 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##> |
|
||||
|
||||
| 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##> |
|
||||
46
nodes/data/array/array-node.md
Normal file
46
nodes/data/array/array-node.md
Normal file
@@ -0,0 +1,46 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Array
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Array
|
||||
|
||||
Arrays are ordered lists of [Object](/nodes/data/object/object-node)s. See the guide on arrays [here](/docs/guides/data/arrays) for a more detailed introduction.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</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##>
|
||||
|
||||
## Inputs
|
||||
|
||||
### General
|
||||
|
||||
| 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##> |
|
||||
|
||||
| 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##> |
|
||||
|
||||
## 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##> |
|
||||
|
||||
| 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##> |
|
||||
35
nodes/data/array/clear-array.md
Normal file
35
nodes/data/array/clear-array.md
Normal file
@@ -0,0 +1,35 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Clear Array
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Clear Array
|
||||
|
||||
This node is used to remove all _Objects_ from an _Array_. The Array is referred to through their _Id_. Use the _Do_ action to remove all _Objects_ in the Array.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------ | ------------------------------------------------------------------------------ |
|
||||
| <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##> |
|
||||
|
||||
## 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##> |
|
||||
39
nodes/data/array/create-new-array.md
Normal file
39
nodes/data/array/create-new-array.md
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Create New Array
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Create New Array
|
||||
|
||||
Creates a new Array. The outgoing property _Id_ is the id of the newly created array. This can for example be connected to an [Array](/nodes/data/array/array-node) node or [Insert Object Into Array Node](/nodes/data/array/insert-into-array).
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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##> |
|
||||
|
||||
| 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##> |
|
||||
|
||||
## 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##> |
|
||||
|
||||
| Signal | Description |
|
||||
| ---------------------------------------- | ------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-signal">Done</span> | <##output:done##>This signal will be sent when the new Array has been created.<##output##> |
|
||||
36
nodes/data/array/insert-into-array.md
Normal file
36
nodes/data/array/insert-into-array.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Insert Into Array
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Insert Object Into Array
|
||||
|
||||
This node is used to insert an _Object_ into an _Array_. Both the Array and the Object are referred to through their _Id_. The insert happens when the _Do_ action is triggered.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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##> |
|
||||
|
||||
| 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##> |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Signal | Description |
|
||||
| ---------------------------------------- | ----------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Done</span> | <##output:done##>This signal is sent when the insertion is ready.<##output##> |
|
||||
37
nodes/data/array/remove-from-array.md
Normal file
37
nodes/data/array/remove-from-array.md
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Remove From Array
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Remove Object From Array
|
||||
|
||||
This node is used to remove an _Object_ from an _Array_. Both the Array and the Object are referred to through their _Id_. The removal happens when the _Do_ action is triggered.
|
||||
If the _Object_ to be removed is not in the array, nothing will happen.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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##> |
|
||||
|
||||
| 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##> |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Signal | Description |
|
||||
| ---------------------------------------- | -------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Done</span> | <##output:done##>This signal is sent when the removal is done.<##output##> |
|
||||
62
nodes/data/array/static-array.md
Normal file
62
nodes/data/array/static-array.md
Normal file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Static Array
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Static Array
|
||||
|
||||
Store static data to populate an [Array](/nodes/data/array/array-node) with items. The Static Array node is great for providing static local data for lists etc. You can use it e.g. as an input to a **For Each** node.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</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##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Type</span> | Choose what format the data will be in.<br/><br/>`CSV`: Comma-separated values<br/>`JSON`: JavaScript Object Notation |
|
||||
|
||||
### CSV
|
||||
|
||||
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
|
||||
|
||||
### 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"
|
||||
}
|
||||
]
|
||||
|
||||
## 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##> |
|
||||
47
nodes/data/boolean.md
Normal file
47
nodes/data/boolean.md
Normal file
@@ -0,0 +1,47 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Boolean
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Boolean
|
||||
|
||||
This node holds a <span className="ndl-data">boolean</span> (true/false) value. You can use it to quickly store a <span className="ndl-data">boolean</span> using the <span className="ndl-signal">Set</span> input. It can also be used to hold a static value in logical operations.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You can connect the <span className="ndl-node">Boolean</span> node to a <span className="ndl-node">Component Inputs</span> node. This will make the input shows up as a <span className="ndl-data">boolean</span> (checkbox) in the Property Panel for instances of this component.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Value</span> | The value to store in the node. The output value will equal this value, unless _Set_ is connected, then it will be updated when **Set** receives a signal. |
|
||||
|
||||
| Signal | Description |
|
||||
| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Set</span> | This is used to only update the output when _Save Value_ is set to true. This will allow you to freeze the stored value and only allow it to update under certain conditions, e.g. on a Tap. |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------- | ------------------------------ |
|
||||
| <span className="ndl-data">Value</span> | The boolean stored in the node |
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------ | ----------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Stored</span> | This port sends a signal when the value is stored via the _Set_ input signal. |
|
||||
26
nodes/data/cloud-data/_acl.md
Normal file
26
nodes/data/cloud-data/_acl.md
Normal file
@@ -0,0 +1,26 @@
|
||||
### Access Control Rules
|
||||
|
||||
When creating and updating records you can also specify access control rules. By default all records created can be read and written by everyone, they are completely public. This is convenient in the beginning when you are working on your applications but as you want to make it publicly available you need to think about access control. You do this by adding access control rules when creating or updating records.
|
||||
|
||||
<div className="ndl-image-with-background m">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You can have as many rules as you want. Each rule has a **Target** which can be one of **User**, **Everyone** or **Role**:
|
||||
|
||||
- **User** implies that this rule will target a specific user, you can either specify the **User Id** (that is the record Id for the user record) for the user or if omitted the current logged in user will be used.
|
||||
- **Everyone** means, well, this rule applies to everyone. You can use to to create read only objects, that can be publicly read but not written.
|
||||
- **Role** means that this object can be accessed as you specify by anyone belonging to a certain role. Please look at the access control [guide](/docs/guides/cloud-data/access-control) for more information.
|
||||
|
||||
All rules have the inputs **Read** and **Write** when you specify if the users targeted by the role have read / write access.
|
||||
|
||||
Each rule can, depending on the selected **Target** type have the following inputs (it's a good idea to change the label of your rule as in the image above to easier find the inputs when connecting):
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">User Id</span> | The **User Id** of the user that the rule should apply to. If none is provided via a connection the currently logged in user will be used. This input is only available if the **User** target type is selected. |
|
||||
| <span className="ndl-data">Role</span> | The **Role Name** of the role that the rule should apply to. This input is only available if the **Role** target type is selected. |
|
||||
| <span className="ndl-data">Write</span> | Set to **true** for this rule to have write access. |
|
||||
| <span className="ndl-data">Read</span> | Set to **true** for this rule to have read access. |
|
||||
52
nodes/data/cloud-data/add-record-relation.md
Normal file
52
nodes/data/cloud-data/add-record-relation.md
Normal file
@@ -0,0 +1,52 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Add Record Relation
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Add Record Relation
|
||||
|
||||
This action node is used to create a relation between two records, the owning record and the target record.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
One record is the owning record (in this case **Group** records that can have a relation to many **Post** records), it should have a **Relation** type property.
|
||||
|
||||
You need to provide the <span className="ndl-data">Id</span> of the owning record. You also need to provide the <span className="ndl-data">Id</span> of the record that you want to add a relation to, this is the Target Record Id input.
|
||||
|
||||
Finally, send a <span className="ndl-signal">signal</span> to <span className="ndl-signal">Do</span> to perform the action.
|
||||
|
||||
<##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">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##> |
|
||||
|
||||
@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##> |
|
||||
|
||||
## 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##> |
|
||||
|
||||
| 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##> |
|
||||
39
nodes/data/cloud-data/cloud-file.md
Normal file
39
nodes/data/cloud-data/cloud-file.md
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Cloud File
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Cloud File
|
||||
|
||||
Represents a file that has been uploaded to the Noodl Cloud Services and stored as a file property in a **Record**.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
**Cloud File** is typically used in combination with the [Open File Picker](/nodes/utilities/open-file-picker) and the [Upload File](/nodes/data/cloud-data/upload-file) to upload a file and store a reference to it in the database. Then **Cloud File** is used to retrieve the reference and get the URL or Name of the file.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<##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##> |
|
||||
|
||||
## 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##> |
|
||||
68
nodes/data/cloud-data/cloud-function.md
Normal file
68
nodes/data/cloud-data/cloud-function.md
Normal file
@@ -0,0 +1,68 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Cloud Function
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Cloud Function
|
||||
|
||||
Cloud functions are logic components that run in the cloud and not on the client like other logic components. The **Cloud Function** node is how you initiate a call to a cloud function component. Learn more about how to use cloud functions in this [guide](/docs/guides/cloud-logic/introduction).
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You will first need to pick the cloud function that you want to call with this node.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
After you have picked the cloud function, the **Cloud Function** node will receive the input parameters and output result parameters defined in the cloud function so you can hook them up to the logic of your application.
|
||||
|
||||
A cloud function can either return a **Success** or **Failure** response, this will result in the corresponding output signal on the **Cloud Function** node. You can use this to trigger different flows in your logic.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
If a **Failure** signal is emitted you can also use the **Error** output that will contain the error message sent from the cloud function.
|
||||
|
||||
If a **Success** signal is sent the result parameters will be available as outputs on the **Cloud Function** node.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| <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##> |
|
||||
|
||||
## 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##> |
|
||||
|
||||
### 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##> |
|
||||
77
nodes/data/cloud-data/config.md
Normal file
77
nodes/data/cloud-data/config.md
Normal file
@@ -0,0 +1,77 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Config
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Config
|
||||
|
||||
This node is used to fetch a configuration parameter from the cloud services. Can be used to store any sort of parameters like API Keys, email templates etc. The node works much like the [Variable](/nodes/data/variable/variable-node) node.
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You pick a **Parameter** in the properties of the node. First you must specify the **Parameter** in the **Config** section of the cloud services dashboard. Check out [this guide](/docs/guides/cloud-data/creating-a-backend) for more details on the dashboard.
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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.
|
||||
|
||||
Once you have create your parameters in the cloud services dashboard you can pick which parameter this node should read with the drop down.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Local Override
|
||||
|
||||
Config parameters are especially useful when you need to have values that vary depending if you are working in your **testing** or **production** environment (which cloud service you are currently using). You can also specify a local override for a config parameter so that **this particular node** will return that value when your are working locally with the project. That is, when the working in the editor or when viewing the project in an external browser using the ```localhost``` domain.
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
For the node above we want a special config parameter for when running locally so we can test without having to deploy every time, so we add a **Local Override** in the parameters of the config node.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| <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##> |
|
||||
|
||||
|
||||
## 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##> |
|
||||
|
||||
|
||||
47
nodes/data/cloud-data/create-new-record.md
Normal file
47
nodes/data/cloud-data/create-new-record.md
Normal file
@@ -0,0 +1,47 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Create New Record
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Create New Record
|
||||
|
||||
This node is used to create a new record of a given class. You specify the class of record to be created in the Property Panel. Sending a <span className="ndl-signal">signal</span> to <span className="ndl-signal">Do</span> will perform the action.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You can also provide values for the properties of the record either via connections or by typing the values in the property panel.
|
||||
|
||||
<##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##> |
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------- | ---------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Do</span> | <##input:do##>Send a signal on this input to create a new record.<##input##> |
|
||||
|
||||
@include "./_acl.md"
|
||||
|
||||
## Outputs
|
||||
|
||||
| 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##> |
|
||||
|
||||
| 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. |
|
||||
48
nodes/data/cloud-data/delete-record.md
Normal file
48
nodes/data/cloud-data/delete-record.md
Normal file
@@ -0,0 +1,48 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Delete Record
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Delete Record
|
||||
|
||||
This node will delete a **Record** of a given **Class** from the Noodl Cloud Services backend.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You will need to provide the **Id** of the record to be deleted, there are multiple ways to do this, see the **Id Source** property for details.
|
||||
|
||||
Then send a signal on the **Do** input to perform the action.
|
||||
|
||||
<##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**. |
|
||||
|
||||
@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##> |
|
||||
|
||||
## 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##> |
|
||||
|
||||
| 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##> |
|
||||
54
nodes/data/cloud-data/filter-records.md
Normal file
54
nodes/data/cloud-data/filter-records.md
Normal file
@@ -0,0 +1,54 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Filter Record
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Filter Record
|
||||
|
||||
This node is used to filter an <span className="ndl-data">array</span> that is assumed to contain Records of a given class based on custom filter conditions.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You can specify both filter and sorting visually.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<##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">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##> |
|
||||
|
||||
| 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##> |
|
||||
|
||||
## 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##> |
|
||||
|
||||
| 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##> |
|
||||
5
nodes/data/cloud-data/id-source.md
Normal file
5
nodes/data/cloud-data/id-source.md
Normal file
@@ -0,0 +1,5 @@
|
||||
An Id of a record is needed to perform the action of this node:
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Id Source</span> | The **Id Soure** 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. |
|
||||
346
nodes/data/cloud-data/query-records.md
Normal file
346
nodes/data/cloud-data/query-records.md
Normal file
@@ -0,0 +1,346 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Query Records
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Query Records
|
||||
|
||||
This node is used to fetch a selection of records from the Noodl Cloud Services backend. You can provide a query to define the selection of records you want to retrieve.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You can specify the query using filter, sorting and limit in the Property Panel.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Filters
|
||||
|
||||
By default the **Query Records** will fetch all **Records**, you can however add a filter. You can choose from a simple filter where you can filter on one or more **Record** properties, or a more advanced JSON based filter syntax, that also can include Javascript logic.
|
||||
|
||||
### Simple Filters
|
||||
|
||||
The **Simple** filters are created through a UI where you select properties and how to filter them in the filter panel.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Note that you can select if you want the filter to use a static value or a value that comes from an input.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
### Sorting with Simple Filters
|
||||
|
||||
By default the **Query Records** does not return the result of a fetch sorted. You can specify sorting. Like filters you add which properties you want to sort on.
|
||||
|
||||
For each property you can choose the sorting order.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Limit
|
||||
|
||||
Be default up to a 1000 records are returned. But you can specify a **Limit**, the number of records to return, and **Skip**, at what index to start returning records. This is very useful for pagination when listing records.
|
||||
|
||||
<div className="ndl-image-with-background m">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Total Count
|
||||
|
||||
If you choose to limit the returned records or if you have more than the maximum allowed return records you can request the total count to be returned with your query.
|
||||
|
||||
<div className="ndl-image-with-background m">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
By enabling this you will provide the total count on the <span class="ndl-data">Total Count</span> output.
|
||||
|
||||
## Advanced filters
|
||||
|
||||
If you choose _Advanced_ as filter type you will get the option to specify a filter script. This is regular javascript code but you need to end the script by calling the _where_ function with the filter definition provided. This is done using the following syntax:
|
||||
|
||||
```javascript
|
||||
where({
|
||||
Completed: { equalTo: true },
|
||||
});
|
||||
```
|
||||
|
||||
The above filter will return all **Records** in the collection that has the _Completed_ property _true_. You can select from a number of operators:
|
||||
|
||||
- **lessThan** Less Than
|
||||
- **lessThanOrEqualTo** Less Than Or Equal To
|
||||
- **greaterThan** Greater Than
|
||||
- **greaterThanOrEqualTo** Greater Than Or Equal To
|
||||
- **equalTo** Not Equal To
|
||||
- **notEqualTo** Not Equal To
|
||||
- **containedIn** Contained In
|
||||
- **notContainedIn** Not Contained in
|
||||
- **exists** A value is set for the key
|
||||
- **matchesRegex** Check if a value matches a regex pattern
|
||||
- **text** Text search in one or several columns using a text index
|
||||
- **idEqualTo** Match the id of the item to a specific id
|
||||
- **idContainedIn** Check if the id of the item matches an id in an array of ids
|
||||
- **pointsTo** Check if the id of the item matches an id in an array of ids
|
||||
- **relatedTo** Checks if the item is related to another item, through a _relation_
|
||||
|
||||
For instance, to filter on if a certain property (in this example Letter) is one of many possible values:
|
||||
|
||||
```javascript
|
||||
where({
|
||||
Letter: { containedIn: ["A", "B", "C"] },
|
||||
});
|
||||
```
|
||||
|
||||
Or to filter all **Records** that have a value set for a specific property:
|
||||
|
||||
```javascript
|
||||
where({
|
||||
Letter: { exists: true },
|
||||
});
|
||||
```
|
||||
|
||||
You can also combine these filters into expressions using **and** and **or**, for instance:
|
||||
|
||||
```javascript
|
||||
where({
|
||||
and: [{ ZipCode: { exists: true } }, { Score: { greaterThan: 10 } }],
|
||||
});
|
||||
```
|
||||
|
||||
You can also use the **matchesRegex** operator to filter by regular expression, this is generally slow and not recommended for large sets. Learn more [here](https://docs.mongodb.com/manual/reference/operator/query/regex/)
|
||||
|
||||
```javascript
|
||||
where({
|
||||
SomeString: { matchesRegex: "pattern", options: "i" },
|
||||
});
|
||||
```
|
||||
|
||||
As mentioned above the filter script is a javascript function so you can provide javascript code if you like:
|
||||
|
||||
```javascript
|
||||
where({
|
||||
SomeDate: { equalTo: new Date() },
|
||||
});
|
||||
```
|
||||
|
||||
You can also specify variables instead of explicitly specifying the filter values, this will create an input port on the _Query Collection_ node that can then be connected to. You specify variables simply by using the **Inputs** object. The filter below will create an input called MyStringInput.
|
||||
|
||||
```javascript
|
||||
where({
|
||||
SomeString: { equalTo: Inputs.MyStringInput },
|
||||
});
|
||||
```
|
||||
|
||||
You can also do text search in strings. This will create an index in the database and text search only works on one property so you have to choose wisely. Also text search matches whole words and must be the first filter in an _and_ or _or_ sequence.
|
||||
|
||||
```javascript
|
||||
where({
|
||||
SomeString: { text: { search: Inputs.MyStringInput } },
|
||||
});
|
||||
```
|
||||
|
||||
You can also toggle case sensitivity for text searches.
|
||||
|
||||
```javascript
|
||||
where({
|
||||
SomeString: {
|
||||
text: {
|
||||
search: {
|
||||
term: Inputs.MyStringInput,
|
||||
caseSensitive: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
If you need to match the _Id_ of **Records** in the collection you need to use the special operation:
|
||||
|
||||
```javascript
|
||||
where({
|
||||
idEqualTo: Inputs.TheRecordId,
|
||||
});
|
||||
```
|
||||
|
||||
In the above filter you can connect a _Record Id_ output to the _TheRecordId_ parameter to fetch just one specific object. You can also request a set of object based on their Id.
|
||||
|
||||
```javascript
|
||||
where({
|
||||
idContainedIn: [Inputs.FirstObjectId, Inputs.SecondObjectId],
|
||||
});
|
||||
```
|
||||
|
||||
Some properties in your _Records_ can be of _Pointer_ type, that means that they reference another **Records** with a specific _Id_. If you want to filter out **Records** that point to a specific **Records**, use this syntax. Let's say you have a collection of _Post_ **Records**, each have a set of _Comment_ **Records** where each _Comment_ points back to it's owning _Post_ via the _Owner_ property. The filter below will find all _Comments_ for a _Post_ given that you provide the post id.
|
||||
|
||||
```javascript
|
||||
where({
|
||||
Owner: { pointsTo: Inputs.MyPostId },
|
||||
});
|
||||
```
|
||||
|
||||
You can also provide an array if you want to find _Comments_ that are related to a set of _Post_ **Records**.
|
||||
|
||||
```javascript
|
||||
where({
|
||||
Owner: { pointsTo: [Inputs.MyFirstPostId, Inputs.MySecondPost] },
|
||||
});
|
||||
```
|
||||
|
||||
Don't forget that you need to send a signal to _Fetch_ to perform a new fetch with a new filter if any of the filter inputs have changed.
|
||||
|
||||
**Records** also support many-to-many relationships via _Relations_. <!-- , check out the guide [here](/guides/relations) for more information. --> You can filter our all **Records** in the collection you are querying that are related to a specific **Record** via a _Relation_ with a given key using:
|
||||
|
||||
```javascript
|
||||
where({
|
||||
relatedTo: { id: Inputs.MyRecordWithARelation, key: "the-relation-key" },
|
||||
});
|
||||
```
|
||||
|
||||
### Geo queries
|
||||
|
||||
Noodl allows you to associate real-world latitude and longitude coordinates with an object. Using a **GeoPoint** property type in a class allows queries to take into account the proximity of an object to a reference point. This allows you to easily do things like find out what user is closest to another user or which places are closest to a user.
|
||||
|
||||
If you have a **Record** with a **GeoPoint** type property called **Location** you can use these queries, first `nearSphere`, it will return results ordered by the distance from the specified `latitude` and `longitude` point.
|
||||
|
||||
```javascript
|
||||
where({
|
||||
Location: {
|
||||
nearSphere: {
|
||||
latitude: 48.0,
|
||||
longitude: -110.1,
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
You can also specify a maximum distance from the center point by using either `maxDistanceInMiles` or `maxDistanceInKilometers`, e.g.
|
||||
|
||||
```javascript
|
||||
where({
|
||||
Location: {
|
||||
nearSphere: {
|
||||
latitude: 48.0,
|
||||
longitude: -110.1,
|
||||
maxDistanceInKilometers: 100,
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
Another option is to query only records with **Location** that are within a certain rectangular bounding box. This makes it possible to query for the set of records that are contained within a particular area. It's done using the `withinBox` query.
|
||||
|
||||
```javascript
|
||||
where({
|
||||
Location: {
|
||||
withinBox: [
|
||||
{
|
||||
latitude: 37.71,
|
||||
longitude: -122.53,
|
||||
},
|
||||
{
|
||||
latitude: 30.82,
|
||||
longitude: -122.37,
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
It’s also possible to query for the set of records that are contained within or on the bounds of a polygon. Opened or closed paths are allowed, minimum of 3 points. It's done using the `withinPolygon` query.
|
||||
|
||||
```javascript
|
||||
where({
|
||||
Location: {
|
||||
withinPolygon: [
|
||||
{
|
||||
latitude: 25.774,
|
||||
longitude: -80.19,
|
||||
},
|
||||
{
|
||||
latitude: 18.466,
|
||||
longitude: -66.118,
|
||||
},
|
||||
{
|
||||
latitude: 32.321,
|
||||
longitude: -64.757,
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### Sorting in advanced filters
|
||||
|
||||
To specify the sort order when using advanced filter you run a function called _sort_ in the filter script.
|
||||
|
||||
```javascript
|
||||
where({
|
||||
// You where filter here
|
||||
});
|
||||
|
||||
sort(["createdAt"]);
|
||||
```
|
||||
|
||||
The sort function takes an array with strings specifying the names of the properties you want to sort by. You can prefix the property name with "-" to specify that you want to sort in descending order instead of the default ascending order.
|
||||
|
||||
```javascript
|
||||
sort(["-Age", "createdAt"]);
|
||||
```
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <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##> |
|
||||
|
||||
| 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##> |
|
||||
|
||||
## 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##> |
|
||||
|
||||
| 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##> |
|
||||
50
nodes/data/cloud-data/record.md
Normal file
50
nodes/data/cloud-data/record.md
Normal file
@@ -0,0 +1,50 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Record
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Record
|
||||
|
||||
This node is used to read data from a **Record**. A **Record** is an **Object** with a **Class**, with predefined properties of specific types and that can be stored in the Noodl backend.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
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##>
|
||||
|
||||
## 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##> |
|
||||
|
||||
@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##> |
|
||||
|
||||
## 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. |
|
||||
|
||||
| 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##> |
|
||||
52
nodes/data/cloud-data/remove-record-relation.md
Normal file
52
nodes/data/cloud-data/remove-record-relation.md
Normal file
@@ -0,0 +1,52 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Remove Record Relation
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Remove Record Relation
|
||||
|
||||
This node is used to remove a relation between two records, the owning record and the target record.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
One record is the owning record (in this case **Group** records that can have a relation to many **Post** records), it should have a **Relation** type property.
|
||||
|
||||
You need to provide the <span className="ndl-data">Id</span> of the owning record. You also need to provide the <span className="ndl-data">Id</span> of the record that you want to add a relation to, this is the <span className="ndl-data">Target Record Id</span> input.
|
||||
|
||||
Finally, send a <span className="ndl-signal">signal</span> to <span className="ndl-signal">Do</span> to perform the action.
|
||||
|
||||
<##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">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##> |
|
||||
|
||||
@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##> |
|
||||
|
||||
## 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##> |
|
||||
|
||||
| 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##> |
|
||||
52
nodes/data/cloud-data/set-record-properties.md
Normal file
52
nodes/data/cloud-data/set-record-properties.md
Normal file
@@ -0,0 +1,52 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Set Record Properties
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Set Record Properties
|
||||
|
||||
This action node will set property values of a record.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
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##>
|
||||
|
||||
## 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. |
|
||||
|
||||
@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##> |
|
||||
|
||||
@include "./_acl.md"
|
||||
|
||||
## Outputs
|
||||
|
||||
| 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##> |
|
||||
|
||||
| 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. |
|
||||
45
nodes/data/cloud-data/upload-file.md
Normal file
45
nodes/data/cloud-data/upload-file.md
Normal file
@@ -0,0 +1,45 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Upload File
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Upload File
|
||||
|
||||
This node uploads a file to the Noodl Cloud Services. Can be used in combination with a **Record** to link the file to a property. When retrieving the file reference you can get the **URL** to the file and **Name** of file using a [Cloud File](/nodes/data/cloud-data/cloud-file) node.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<##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##> |
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------ | ---------------------------------------------------------- |
|
||||
| <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##> |
|
||||
|
||||
| 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##> |
|
||||
41
nodes/data/color.md
Normal file
41
nodes/data/color.md
Normal file
@@ -0,0 +1,41 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Color
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Color
|
||||
|
||||
This node holds a <span className="ndl-data">color</span> value.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
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##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Value</span> | The value to store in the node. The output value will equal this value, unless _Set_ is connected, then the value will be updated when a signal is received at the _Set_ input. |
|
||||
|
||||
| Signal | Description |
|
||||
| --------------------------------------- | ---------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Set</span> | This is used to only update the output when a signal is sent to _Set_. |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------- | ---------------------------- |
|
||||
| <span className="ndl-data">Value</span> | The color stored in the node |
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------ | -------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Stored</span> | This port sends a signal when the value is updated as a result of the _Set_ signal being received. |
|
||||
47
nodes/data/number.md
Normal file
47
nodes/data/number.md
Normal file
@@ -0,0 +1,47 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Number
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Number
|
||||
|
||||
This node holds a <span className="ndl-data">number</span> value. It is local to the component and cannot be accessed elsewhere in the app.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You can also use the <span className="ndl-node">Number</span> 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">number</span> input in the Property Panel for instances of this component.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Value</span> | The value to store in the node. The output value will equal this value, unless _Set_ is connected, then the value will be updated when a signal is received at the _Set_ input. |
|
||||
|
||||
| Signal | Description |
|
||||
| --------------------------------------- | ---------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Set</span> | This is used to only update the output when a signal is sent to _Set_. |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------- | ----------------------------- |
|
||||
| <span className="ndl-data">Value</span> | The number stored in the node |
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Stored</span> | A signal is outputted here when the value is updated as a result of the _Set_ signal being received. |
|
||||
5
nodes/data/object/_properties.md
Normal file
5
nodes/data/object/_properties.md
Normal file
@@ -0,0 +1,5 @@
|
||||
| Data | Description |
|
||||
| --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <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. |
|
||||
39
nodes/data/object/create-new-object.md
Normal file
39
nodes/data/object/create-new-object.md
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Create New Object
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Create New Object
|
||||
|
||||
The node can be used to create a fresh new [Object](/nodes/data/object/object-node).
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
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##>
|
||||
|
||||
## Inputs
|
||||
|
||||
@include "./_properties.md"
|
||||
|
||||
| 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##> |
|
||||
|
||||
## 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##> |
|
||||
|
||||
| Signal | Description |
|
||||
| ---------------------------------------- | ----------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Done</span> | <##output:done##>A signal is sent on this output when the Object have been created.<##output##> |
|
||||
70
nodes/data/object/object-node.md
Normal file
70
nodes/data/object/object-node.md
Normal file
@@ -0,0 +1,70 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Object
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Object
|
||||
|
||||
An **Object** is a basic data object in Noodl that stores any amount of properties. It can be used standalone or together with [Array](/nodes/data/array/array-node) and [Repeater](/nodes/ui-controls/repeater) nodes to create lists. An **Object** works much like a [Variable](/nodes/data/variable/variable-node) but it can store many properties in one object.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The **Object** node is typically used together with the [Create New Object](/nodes/data/object/create-new-object) node and the [Set Object Properties](/nodes/data/object/set-object-properties) node to create a complete object lifecycle, creating and updating object properties.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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.
|
||||
|
||||
## Similarities between Objects and Records
|
||||
|
||||
**Object** and [Record](/nodes/data/cloud-data/record) nodes are very similar. A **Record** can be seen as an **Object** that is backed by a database entry and hence have actions to **Fetch** from and **Store** it in the database. A **Record** also has a database defined schema based on its **Class** which enables Noodl to detect its available properties from its database Class. **Objects** does not have a schema.
|
||||
If needed, you can use the **Id** of a **Record** as the **Id** of an **Object** to access its properties, but obviously cannot use the **Object** to store or fetch the data from the database.
|
||||
|
||||
Generally you use **Objects** as data holder for data that does not need to be stored in a database.
|
||||
|
||||
## Inputs
|
||||
|
||||
### General
|
||||
|
||||
| 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). |
|
||||
|
||||
| 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##> |
|
||||
|
||||
## Outputs
|
||||
|
||||
### General
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
|
||||
| <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 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"><##input:prop-\*##>User defined property.<##input##></span>
|
||||
|
||||
<span className="hidden-props-for-editor"><##output:prop-\*##>User defined property.<##output##></span>
|
||||
52
nodes/data/object/set-object-properties.md
Normal file
52
nodes/data/object/set-object-properties.md
Normal file
@@ -0,0 +1,52 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Set Object Properties
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Set Object Properties
|
||||
|
||||
You can use this node to set properties on an [Object](/nodes/data/object/object-node). You must identify the **Object** with it's **Id** (see full docs for details)
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You can then specify which properties you want to set on the Object in the property panel.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Finally, send a signal to **Do** to perform the action.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
@include "./_properties.md"
|
||||
|
||||
| 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##> |
|
||||
|
||||
| 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##> |
|
||||
|
||||
## 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##> |
|
||||
|
||||
| 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##> |
|
||||
137
nodes/data/rest.md
Normal file
137
nodes/data/rest.md
Normal file
@@ -0,0 +1,137 @@
|
||||
---
|
||||
hide_title: true
|
||||
title: REST
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# REST
|
||||
|
||||
This node is used to connect to external [REST](https://en.wikipedia.org/wiki/Representational_state_transfer) endpoints to make requests and expose data. It supports request content in **JSON** format.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
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##>
|
||||
|
||||
## Request and response script
|
||||
|
||||
The REST node uses a script much like the [Script](/nodes/javascript/script) node to prepare the request and parse the response.
|
||||
Any variables with the prefix **Inputs.** and **Outputs.** will be exposed as inputs and outputs to the node. So you can use these inputs in the request script to prepare the REST call, and the outputs in the response script to parse the response into outputs.
|
||||
|
||||
### Request
|
||||
|
||||
The first script is used to prepare the request before it is sent to the REST endpoint.
|
||||
The _Inputs_ object contains the values of the inputs specified in the section above at the time the
|
||||
request was initiated. The _Request_ object contains details on the request that can be adjusted if necessary.
|
||||
|
||||
- _resource_ - Contains the resource for the request, i.e. the URL.
|
||||
- _method_ - Contains the method of the request.
|
||||
- _headers_ - This is a map containing all headers to the request, add or remove headers in the function.
|
||||
- _parameters_ - This is a map containing all parameters that will be appended to the URL of the request, add or remove in the function.
|
||||
- _content_ - Contains the content of the request, the content will be encoded as JSON when the request is made.
|
||||
|
||||
The example below will create two inputs that you can connect to this node from other data in your applications. It modifies the headers and content for the request.
|
||||
|
||||
```javascript
|
||||
Request.headers["some-important-header"] = Inputs.ImportantHeader;
|
||||
Request.content = {
|
||||
"send-me": Inputs.SendMe,
|
||||
};
|
||||
```
|
||||
|
||||
When the request is completed and we have a response the corresponding response function will be invoked.
|
||||
|
||||
### Response
|
||||
|
||||
In the response function, you can parse the response and set the appropriate outputs of the REST node using the _Outputs_ map
|
||||
provided as an argument to the _response_ function. In the function, you will also have access to an object called _Response_ with the following content.
|
||||
|
||||
- _status_ - The status code of the response.
|
||||
- _content_ - The content of the response.
|
||||
- _request_ - This contains the request object from the _request_ function above that was used to make the request.
|
||||
|
||||
The REST node looks at the `Content-Type` header to determine how to parse the response from the server. If the type is JSON it will use `JSON.parse` and for XML it'll convert it to a JavaScript object.
|
||||
|
||||
#### Array Example
|
||||
|
||||
The following example assumes the response content is an array of objects.
|
||||
It is converted to a Noodl Array with Noodl Objects and sends it to the output **Items**.
|
||||
|
||||
Example Response Content:
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"MyValue": 1
|
||||
},
|
||||
{
|
||||
"MyValue": 2
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
Script:
|
||||
|
||||
```javascript
|
||||
Outputs.Items = Response.content.map((o) => Noodl.Object.create(o));
|
||||
```
|
||||
|
||||
**Items** is now an array that can be sent to a Repeater or used in another node.
|
||||
|
||||
#### Object Example
|
||||
|
||||
The following example assumes the response content is an object.
|
||||
It converts the object to a Noodl Object and sends it to the output **Items**.
|
||||
|
||||
Example Response Content:
|
||||
|
||||
```json
|
||||
{
|
||||
"title": "my title",
|
||||
"description": "my cool description"
|
||||
}
|
||||
```
|
||||
|
||||
Script:
|
||||
|
||||
```javascript
|
||||
Outputs.Item = Noodl.Object.create(Response.content);
|
||||
```
|
||||
|
||||
We can also call `Response.content.description` immediately to extract certain properties.
|
||||
|
||||
## Inputs
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------ | --------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Fetch</span> | Connect a signal to this input to trigger a request. |
|
||||
| <span className="ndl-signal">Cancel</span> | Send a signal to this input to cancel an ongoing request. |
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Resource</span> | This is the resource endpoint that the REST request will use, i.e. the url. |
|
||||
| <span className="ndl-data">Method</span> | This is the method that will be used for the request. Supported methods are GET, PUT, POST, PATCH and DELETE. |
|
||||
| <span className="ndl-data">Request</span> | Here you can edit the request script. |
|
||||
| <span className="ndl-data">Response</span> | Here you can edit the response script. |
|
||||
|
||||
### Request and response inputs
|
||||
|
||||
Any variable of the **Inputs** object that you access in your scrips will automatically become an input of the node.
|
||||
|
||||
## Outputs
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Success</span> | A signal will be emitted on this output if the request receives a successful status code (2XX). |
|
||||
| <span className="ndl-signal">Failure</span> | A signal will be emitted on this output on all other status codes of if another type of failure occurs. |
|
||||
| <span className="ndl-signal">Canceled</span> | A signal will be emitted on this output if the request was canceled. |
|
||||
|
||||
### Request and response outputs
|
||||
|
||||
Any variable of the **Outputs** object that you access in your scrips will automatically become an output of the node.
|
||||
89
nodes/data/run-tasks.md
Normal file
89
nodes/data/run-tasks.md
Normal file
@@ -0,0 +1,89 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Run Tasks
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Run Tasks
|
||||
|
||||
This node can be used to perform a set of tasks comprised of a logic component for each item in an <span className="ndl-data">array</span>. These tasks can be perfomed in a parallel or waterfall fashion. You start running the tasks by sending a signal to the **Do** input of the **Run Tasks** node.
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The <span className="ndl-node">Run Tasks</span> node needs a task component that it will "run" for each item in the array connected to **Items**. These tasks are logic components that are started with the **Do** signal and that need to complete with a signal either to **Success** or **Failure**.
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
You can control the behaviour of how the tasks are run with the properties.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
* **Stop On Failure** Indicates wether the run tasks node should stop on the first task that signals a **Failure**. This will result in the **Failure** signal and **Aborted** signal emitted from the **Run Tasks** node.
|
||||
|
||||
* **Max Running Tasks** Specifies the maximum number of tasks that will run at the same time. If you want each task to be performed in order and wait for a task to be completed before starting a new you set this value to **1**. When running tasks in parallel which is often the case then you may want to limit the number of tasks running concurrently.
|
||||
|
||||
* **Template** This is the logic component that will be used to run each task.
|
||||
|
||||
**Run Tasks** work a lot like the [Repeater](/nodes/ui-controls/repeater) node where each task instance can access the data from the corresponding item in the array using an [Object](/nodes/data/object/object-node) or [Record](/nodes/data/cloud-data/record) node.
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
As with the **Repeater** you need to specify that the **Id** of the object should be obtained from the repeater, in this case the **Run Tasks** is the repeater and the object will be the item on the array corresponing to this task component instance.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
However the properties of the object corresponding to that task will also be available as **Component Inputs** directly. So a quicker way might be to just add corresponding inputs.
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Template</span> | This is a reference to a component that will be cloned for each item in the **Items** array and used to run the task for that item. |
|
||||
| <span className="ndl-data">Stop On Failure</span> | Indicates wether the run tasks node should stop on the first task that signals a <span className="ndl-signal">Failure</span>. This will result in the <span className="ndl-signal">Failure</span> signal and <span className="ndl-signal">Aborted</span> signal emitted from the **Run Tasks** node. |
|
||||
| <span className="ndl-data">Max Running Tasks</span> | Specifies the maximum number of tasks that will run at the same time. If you want each task to be performed in order and wait for a task to be completed before starting a new you set this value to **1**. When running tasks in parallel which is often the case then you may want to limit the number of tasks running concurrently. |
|
||||
| <span className="ndl-data">Items</span> | An array of objects. The run tasks will create a task component instance for each item in the array that may run a task. |
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Do</span> | Send a signal on this input to start running the tasks. |
|
||||
| <span className="ndl-signal">Abort</span> | Sending a signal on this input will abort the running of tasks, when the currently running tasks are completed no new tasks will be started. |
|
||||
|
||||
|
||||
## Outputs
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Success</span> | A signal will be emitted on this output when all tasks have completed successfully. |
|
||||
| <span className="ndl-signal">Failure</span> | A signal will be emitted here when the tasks have completed running and a task failed. |
|
||||
| <span className="ndl-signal">Aborted</span> | A signal here indicated that the running of tasks was aborted eihter due to a signal on the <span className="ndl-signal">Abort</span> input or that a task failed and the running of tasks was stopped. |
|
||||
| <span className="ndl-signal">Done</span> | A signal is emitted here when all tasks have been completed, failed and succeeded. |
|
||||
68
nodes/data/string.md
Normal file
68
nodes/data/string.md
Normal file
@@ -0,0 +1,68 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: String
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# String
|
||||
|
||||
This node contains a <span className="ndl-data">string</span> value (text). It can be provided with static data or be dynamically set from other nodes. The <span className="ndl-node">String</span> node is often used to convert other data types to a <span className="ndl-data">string</span> or to hold string values.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
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##>
|
||||
|
||||
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.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You can simply connect to the **Value** input to set the value of the node when the connection is updated.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Using a variable node like above will make the **Text** component input show up as a string in the property editor of all instances of this component.
|
||||
|
||||
You can also use the **Set** input to control when the value of the variable node is updated. In the setup below the value is only updated when the **Text Input** node is blurred.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Value</span> | The value to store in the node. The output value will equal this value, unless _Set_ is connected, then the value will be passed to the output when a signal is sent to _Set_. |
|
||||
|
||||
| Signal | Description |
|
||||
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Set</span> | This is used to only update the output when a signal is received. This will allow you to freeze the stored value and only allow it to update under certain conditions, e.g. on a Tap. |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------- | --------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Value</span> | The string (text) stored in the node. |
|
||||
| <span className="ndl-data">Length</span> | The length of the string (text) stored in the node, i.e. the number of characters and spaces. |
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------ | ----------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Stored</span> | This port sends a signal when the value is updated via the _Set_ input. |
|
||||
49
nodes/data/user/log-in.md
Normal file
49
nodes/data/user/log-in.md
Normal file
@@ -0,0 +1,49 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Log In
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Log In
|
||||
|
||||
This node is used to log in users that exist in the Noodl Cloud Service. You need to provide a <span className="ndl-data">Username</span> and a <span className="ndl-data">Password</span> and then send a signal to the <span className="ndl-signal">Do</span> action.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Once a user is logged in, their data can be accessed through the <span className="ndl-data">User</span> node.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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##> |
|
||||
|
||||
| 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##> |
|
||||
|
||||
## 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##> |
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Error</span> | <##output:error##>This output will contain the error message if the log in failed.<##output##> |
|
||||
36
nodes/data/user/log-out.md
Normal file
36
nodes/data/user/log-out.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Log Out
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Log Out
|
||||
|
||||
This node is used to log out a user from the current session. That means that the <span className="ndl-data">User</span> node will no longer be able to access user data and that it will trigger the <span className="ndl-signal">Logged Out</span> event as well as the <span className="ndl-data">Authenticated</span> output will be false.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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##> |
|
||||
|
||||
## 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##> |
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------- | ----------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Error</span> | <##output:error##>This output will contain the error message if the log out failed.<##output##> |
|
||||
42
nodes/data/user/set-user-properties.md
Normal file
42
nodes/data/user/set-user-properties.md
Normal file
@@ -0,0 +1,42 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Set User Properties
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Set User Properties
|
||||
|
||||
This node is used to set properties on the currently logged in user.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</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##>
|
||||
|
||||
## 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. |
|
||||
|
||||
| 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##> |
|
||||
|
||||
## 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##> |
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Error</span> | <##output:error##>This output will contain the error message if the action failed.<##output##> |
|
||||
51
nodes/data/user/sign-up.md
Normal file
51
nodes/data/user/sign-up.md
Normal file
@@ -0,0 +1,51 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Sign Up
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Sign Up
|
||||
|
||||
This node is used to sign up new users in the Noodl Cloud Service.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The <span className="ndl-node">Sign Up</span> node is the easiest way to handle users in a Noodl web app. Once a user is created with this node, they can log in through the <span className="ndl-node">Log In</span> node and you can access user information via the <span className="ndl-node">User</span> node.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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. |
|
||||
|
||||
| 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##> |
|
||||
|
||||
## 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##> |
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------- | ----------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Error</span> | <##output:error##>This output will contain the error message if the sign up failed.<##output##> |
|
||||
54
nodes/data/user/user-node.md
Normal file
54
nodes/data/user/user-node.md
Normal file
@@ -0,0 +1,54 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: User
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# User
|
||||
|
||||
This node provides information about the current user session, if the web app has a logged in user.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The <span className="ndl-node">User</span> node only works if the user is created in the project’s Noodl Cloud Service, and is logged in via the <span className="ndl-node">Log In</span> node.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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##> |
|
||||
|
||||
## 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. |
|
||||
|
||||
| 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##> |
|
||||
36
nodes/data/variable/set-variable.md
Normal file
36
nodes/data/variable/set-variable.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Set Variable
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Set Variable
|
||||
|
||||
This node sets the **Value** of a [Variable](/nodes/data/variable/variable-node). You provide the new value on the **Value** input and trigger the <span className="ndl-signal">Do</span> action.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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##> |
|
||||
|
||||
| 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##> |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Signal | Description |
|
||||
| ---------------------------------------- | ----------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Done</span> | <##output:done##>This event is triggered when the **Variable** have been set.<##output##> |
|
||||
52
nodes/data/variable/variable-node.md
Normal file
52
nodes/data/variable/variable-node.md
Normal file
@@ -0,0 +1,52 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Variable
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Variable
|
||||
|
||||
Use this node to store a single data variable that will be globally accessible throughout the application. **Variable** works in a similar way as [Object](/nodes/data/object/object-node) but can only store one value.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
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##>
|
||||
|
||||
## Storing a value
|
||||
|
||||
Give the Variable a name with the **Name** input and simply connect to **Value**, whenever the input connection is updated the value will be stored in the variable. You can also use the [Set Variable](/nodes/data/variable/set-variable) node to update tha value of a **Variable**. In this case, you control when the value is stored by sending a signal to the <span className="ndl-signal">Do</span> action.
|
||||
|
||||
## Use a stored value
|
||||
|
||||
When a value is stored in a variable you can use it somewhere else in your application simply be creating a new node and giving it the same **Name** and connecting the **Value** property.
|
||||
|
||||
## Inputs
|
||||
|
||||
| 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##> |
|
||||
|
||||
| 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##> |
|
||||
|
||||
## 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##> |
|
||||
|
||||
| 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##> |
|
||||
38
nodes/events/receive-event.md
Normal file
38
nodes/events/receive-event.md
Normal file
@@ -0,0 +1,38 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Receive Event
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Receive Event
|
||||
|
||||
This node is used to receive a signal triggered by a <span className="ndl-node">Send Event</span> node. To learn more about **Events** check out the [Events Guide](/docs/guides/business-logic/events).
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</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##>
|
||||
|
||||
## 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). |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Mixed | Description |
|
||||
| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Custom Outputs</span> | The **Receive Event** node will automatically get outputs from all [Send Event][0] nodes connected to the same channel. See the [Send Event][0] documentation for more details on adding ports for sending values with events. |
|
||||
|
||||
| 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##> |
|
||||
35
nodes/events/send-event.md
Normal file
35
nodes/events/send-event.md
Normal file
@@ -0,0 +1,35 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Send Event
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Send Event
|
||||
|
||||
This node sends a <span className="ndl-signal">signal</span> to another place in your app without having to connect the nodes directly. To learn more about **Events** check out the [Events Guide](/docs/guides/business-logic/events).
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</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##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Mixed | Description |
|
||||
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **Custom Inputs** | **Send Event** nodes can have arbitrary input ports that will be passed on to the [Receive Event](/nodes/events/receive-event) nodes when the _Send_ signal is triggered. These ports can be added by inspecting the node and clicking the _Add port_ button. |
|
||||
|
||||
| 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. |
|
||||
|
||||
| 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. |
|
||||
101
nodes/javascript/function.md
Normal file
101
nodes/javascript/function.md
Normal file
@@ -0,0 +1,101 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Function
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Function
|
||||
|
||||
This node enables you to add simpler custom JavaScript to your application.
|
||||
|
||||
Runs the Javascript:
|
||||
|
||||
- When any inputs are updated (if "Run" is not connected to anything)
|
||||
- When "Run" is called
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
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##>
|
||||
|
||||
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.
|
||||
E.g. the example above can be used as shown below.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Custom inputs and outputs
|
||||
|
||||
In your function script you can use the **Inputs** and **Outputs** object and any properties of these objects that you use in your script will automatically create input and outputs ports.
|
||||
So the following script:
|
||||
|
||||
```javascript
|
||||
Outputs.FullName = Inputs.FirstName + " " + Inputs.LastName;
|
||||
```
|
||||
|
||||
Will create the output **FullName** and the inputs **FirstName** and **LastName**.
|
||||
Another option is to explicitly specify the inputs and outputs in the properties of the node.
|
||||
This will allow you to explicitly specify the types of the inputs and outputs.
|
||||
This can be especially useful if the node is connected to **Component Inputs** or **Component Outputs**.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Signal outputs
|
||||
|
||||
If you want to send a signal from your **Function** script you can use an output as a function instead of assigning it a value.
|
||||
|
||||
```javascript
|
||||
if (Inputs.Test === true) {
|
||||
Outputs.TestIsTrue();
|
||||
} else {
|
||||
Outputs.TestIsFalse();
|
||||
}
|
||||
```
|
||||
|
||||
The code above will automatically create two outputs **TestIsTrue** and **TestIsFalse** that are signals.
|
||||
When the inputs are changed and the code is run the node will send a signal on either depending on the content of the **Test** input.
|
||||
|
||||
## Controlled execution
|
||||
|
||||
Normally the script is run when any of the inputs change, i.e.
|
||||
receive new data via connections, but you can also control when the function is run with the **Run** signal input.
|
||||
If this input has a connection the script will only run when a signal is received.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Script Inputs</span> | Here you can list inputs to the function and specify types for the inputs as described above. For each input specified or simply used in the function code an input to the node will be created. |
|
||||
| <span className="ndl-data">Script Outputs</span> | Here you can list outputs to the function and specify types for the outputs as described above. For each output specified or simply used in the function code an input to the node will be created. |
|
||||
|
||||
| Signal | Description |
|
||||
| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Run</span> | Send a signal here to run the function. If this input has a connection the function script will not run when inputs are changed. |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------- | ------------------------------------------- |
|
||||
| <span className="ndl-data">Outputs</span> | The outputs defined in the function script. |
|
||||
91
nodes/javascript/script.md
Normal file
91
nodes/javascript/script.md
Normal file
@@ -0,0 +1,91 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Script
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Script
|
||||
|
||||
This node allows you to add complex JavaScript to your application.
|
||||
Please refer to the [Script Guide](/docs/guides/business-logic/javascript) to learn more about the API.
|
||||
But remember - with great power comes great responsibility.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
In most cases you are better off using the simpler <span className="ndl-node">[Function](/nodes/javascript/function)</span> node for your custom JavaScript.
|
||||
|
||||
## Getting Started
|
||||
|
||||
Reading the Javascript [guide](/docs/guides/business-logic/javascript) gives a broader understanding of how it works.
|
||||
|
||||
Here is an example of how you create a function that you can call in the node graph:
|
||||
|
||||
```js
|
||||
Script.Inputs = {
|
||||
Prefix: "string",
|
||||
Value: "number"
|
||||
};
|
||||
|
||||
Script.Outputs = {
|
||||
Done: "signal",
|
||||
Value: "string",
|
||||
};
|
||||
|
||||
Script.Signals.MyFunction = function (value) {
|
||||
// run javascript code
|
||||
|
||||
Script.Outputs.Value = Script.Inputs.Prefix + " " + Script.Inputs.Value;
|
||||
Script.Outputs.Done();
|
||||
};
|
||||
```
|
||||
|
||||
This can also be done with a setter so you dont have to call the `MyFunction` signal.
|
||||
|
||||
```js
|
||||
Script.Inputs = {
|
||||
Prefix: "string",
|
||||
Value: "number"
|
||||
};
|
||||
|
||||
Script.Outputs = {
|
||||
Done: "signal",
|
||||
Value: "string",
|
||||
};
|
||||
|
||||
function onChange() {
|
||||
Script.Outputs.Value = Script.Inputs.Prefix + " " + Script.Inputs.Value;
|
||||
Script.Outputs.Done();
|
||||
}
|
||||
|
||||
Script.Setters.Prefix = onChange;
|
||||
Script.Setters.Value = onChange;
|
||||
```
|
||||
|
||||
### Handling when the node is unmounted
|
||||
|
||||
When the node is unmounted like going to a different page, the `OnDestroy` method will be called.
|
||||
In this method, you can clean up potential listeners or libraries to keep the app performant.
|
||||
|
||||
```js
|
||||
Script.OnDestroy = function () {
|
||||
// called when the node is unmounted
|
||||
}
|
||||
```
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
The inputs are defined by the content of the script or by explicitly specifying inputs in the properties.
|
||||
See the javascript [guide](/docs/guides/business-logic/javascript) for more details.
|
||||
|
||||
## Outputs
|
||||
|
||||
The outputs are defined by the content of the script or by explicitly specifying outputs in the properties.
|
||||
See the javascript [guide](/docs/guides/business-logic/javascript) for more details.
|
||||
33
nodes/logic/and.md
Normal file
33
nodes/logic/and.md
Normal file
@@ -0,0 +1,33 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: And
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# And
|
||||
|
||||
This node performs a logic AND operation on its inputs. If all inputs are <span className="ndl-data">true</span> the node will output <span className="ndl-data">true</span>. If any input is <span className="ndl-data">false</span> the node will output <span className="ndl-data">false</span>.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Any number of inputs can be used. When an input is connected a new one will be created automatically.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Input 0..N</span> | The inputs are numbered as _Input 0_,_Input 1_ etc. Whenever you connect to an input a new one is created so you will never run out of inputs. |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Result</span> | The result of a logic AND operation on all of the inputs. Either `true` or `false`. `True` if all inputs are `true`, `false` if one or more inputs are `false`. |
|
||||
35
nodes/logic/animate-to-value.md
Normal file
35
nodes/logic/animate-to-value.md
Normal file
@@ -0,0 +1,35 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Animate To Value
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Animate To Value
|
||||
|
||||
This node takes a target value and will automatically animate towards it. The animation will restart every time the target value changes.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Target Value</span> | The value to animate to |
|
||||
| <span className="ndl-data">Duration</span> | The duration of the animation in milliseconds|
|
||||
| <span className="ndl-data">Delay</span> | Delay before the animation starts in milliseconds |
|
||||
| <span className="ndl-data">Easing Curve</span> | The easing curve of the animation |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Current Value</span> | The current value of the animation |
|
||||
| <span className="ndl-signal">At Target Value</span> | Signals when the animation has reached its target value |
|
||||
38
nodes/logic/inverter.md
Normal file
38
nodes/logic/inverter.md
Normal file
@@ -0,0 +1,38 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Inverter
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Inverter
|
||||
|
||||
This node changes <span className="ndl-data">true</span> values to be <span className="ndl-data">false</span>, and <span className="ndl-data">false</span> values to be <span className="ndl-data">true</span>. It is identical to a logic NOT operation.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
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##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------- | -------------------- |
|
||||
| <span className="ndl-data">Value</span> | The value to invert. |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------- | ------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Result</span> | The result of inverting the input _Value_. This is equal to either _True_ or _False_ |
|
||||
|
||||
## Advanced
|
||||
|
||||
The inverter is equal to creating the following expression:
|
||||
`!value` .
|
||||
33
nodes/logic/or.md
Normal file
33
nodes/logic/or.md
Normal file
@@ -0,0 +1,33 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Or
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Or
|
||||
|
||||
This node performs a logic OR operation on its inputs. If any input is <span className="ndl-data">true</span> the node will output <span className="ndl-data">true</span>. If all inputs are <span className="ndl-data">false</span> the node will output <span className="ndl-data">false</span>.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Any number of inputs can be used. When an input is connected a new one will be created automatically.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Input 0..N</span> | The inputs are numbered as _Input 0_,_Input 1_ etc. Whenever you connect to an input a new one is created so you will never run out of inputs. |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Result</span> | The result of a logic OR operation on all of the inputs. Either `true` or `false`. `True` if at least one input is `true`, `false` if all inputs are `false`. |
|
||||
44
nodes/logic/switch.md
Normal file
44
nodes/logic/switch.md
Normal file
@@ -0,0 +1,44 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Switch
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Switch
|
||||
|
||||
This node holds a <span className="ndl-data">boolean</span> state. It is either <span className="ndl-data">true</span> (on) or <span className="ndl-data">false</span> (off).
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
### Change state
|
||||
|
||||
| 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##> |
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Start State</span> | The starting state of the **Switch**. If the _Start State_ is set to _On_ then the _Switched To On_ output signal will trigger instantly when applications starts, or when a component is created dynamically. |
|
||||
|
||||
## Outputs
|
||||
|
||||
| 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##> |
|
||||
|
||||
| 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##> |
|
||||
33
nodes/logic/value-changed.md
Normal file
33
nodes/logic/value-changed.md
Normal file
@@ -0,0 +1,33 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Value Changed
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Value Changed
|
||||
|
||||
This node sends a <span className="ndl-signal">signal</span> when the input value changes.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
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##>
|
||||
|
||||
## 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##> |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------------- | ----------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Value Changed</span> | <##output:valueChanged##>This signal is sent when the input value is changed.<##output##> |
|
||||
52
nodes/math/counter.md
Normal file
52
nodes/math/counter.md
Normal file
@@ -0,0 +1,52 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Counter
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Counter
|
||||
|
||||
This node holds a <span className="ndl-data">number</span> that can be increased or decreased with <span className="ndl-signal">signals</span>.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The Counter node can be limited to a `min` and a `max` value, and the limit can be turned on and off.
|
||||
|
||||
<##head##>
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Inputs
|
||||
|
||||
| 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##> |
|
||||
|
||||
| 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##> |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------------- | ---------------------------------------------------------------------------- |
|
||||
| <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##> |
|
||||
79
nodes/math/expression.md
Normal file
79
nodes/math/expression.md
Normal file
@@ -0,0 +1,79 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Expression
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Expression
|
||||
|
||||
This node enables you to do your own calculations using simple expressons. Inputs are automatically derived from the expression. An expression set to `a + someName + 1` will get two inputs: one for <span className="ndl-data">a</span> and one for <span className="ndl-data">someName</span>.
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The <span className="ndl-node">Expression</span> node runs JavaScript under the hood and supports a range of mathematical expressions.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Built in math functions
|
||||
|
||||
Expressions support the following funcitons:
|
||||
|
||||
- `min(a,b)` - Minimum of two values
|
||||
- `max(a,b)` - Maximum of two values
|
||||
- `cos(angle)` - The cosine of an angle in radians
|
||||
- `sin(angle)` - The sine of an angle in radians
|
||||
- `tan(angle)` - The tangent of an angle in radians
|
||||
- `sqrt(a)` - Square root of a number
|
||||
- `pi` - PI in radians
|
||||
- `round(a)` - Rounds a number to the closest integer
|
||||
- `floor(a)` - Removes the fractional part of a number
|
||||
- `ceil(a)` - Rounds a value up to the closest higher integer. E.g. `round(1.1)` equals `2`.
|
||||
- `abs(a)` - The absolute value of a number. Negative values will become positive.
|
||||
- `random()` - A random number from 0 to 1
|
||||
|
||||
## Advanced
|
||||
|
||||
The _Expression_ node is running JavaScript under the hood so in addition to the above functions any standard
|
||||
JavaScript functions will also be valid. The _Expression_ node will add a `return` statement before the
|
||||
expression is executed. `1+2` will be evaluated as `return (1+2)`
|
||||
|
||||
## Truthy and Falsy signals
|
||||
|
||||
You can use the signal outputs <span className="ndl-signal">On True</span> and <span className="ndl-signal">On False</span> to trigger actions based on the result of an expression, if the result is considered "truthy" or "falsy" in Javascript.
|
||||
|
||||
Normally, an expression node recalculates whenever one of the input parameters change. However, if you connect a signal to the <span className="ndl-signal">Run</span> signal input you can control when the expression is calculated. It will only calculate and update it's outputs when a signal is received.
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Expression</span> | The expression to be calculated. |
|
||||
| <span className="ndl-data">Run</span> | Normally the expression is recalucated every time one of the input parameters change. But if you want to control when the expression is calculated you can connect a signal to this input, then the expression will **only** be calculated when a signal is received. |
|
||||
|
||||
|
||||
### Parameters
|
||||
Inputs are automatically derived from the expression. An expression set to `a + someName + 1` will get two inputs, one for `a` and one for `someName`.<br/><br/>As soon as any of the input values changes, the expression is reevaluated.
|
||||
|
||||
## Outputs
|
||||
|
||||
| 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##> |
|
||||
|
||||
|
||||
38
nodes/math/number-remapper.md
Normal file
38
nodes/math/number-remapper.md
Normal file
@@ -0,0 +1,38 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Number Remapper
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Number Remapper
|
||||
|
||||
This node maps a range of input <span className="ndl-data">numbers</span> to a range of output <span className="ndl-data">numbers</span>. It translates the relative position of the input <span className="ndl-data">number</span> to its corresponding <span className="ndl-data">number</span> in the output range.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
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##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Input Value</span> | The number to remap. |
|
||||
| <span className="ndl-data">Input Minimum</span> | When the _Input Value_ equals this value the output of this node will exactly equal the value specified in _Output Minimum_. |
|
||||
| <span className="ndl-data">Input Maximum</span> | When the _Input Value_ equals this value the output of this node will exactly equal the value specified in _Output Maximum_. |
|
||||
| <span className="ndl-data">Output Minimum</span> | The lowest value to output. |
|
||||
| <span className="ndl-data">Output Maximum</span> | The highest value to output. |
|
||||
| <span className="ndl-data">Clamp Output</span> | Controls the behavior if the _Input Value_ is lower than _Input Minimum_ or higher than _Input Maximum_.<br/><br/>If _Clamp Output_ is set to _Yes_ then the output will not be lower than _Output Minimum_ or higher than _Output Maximum_. If _Clamp Output_ is set to _No_ then the output will be linearly extrapolated and will be lower or higher than the specified minimum and maximum values. |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------------ | -------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Remapped Value</span> | The result of remapping the _Input Value_ with the values specified above. |
|
||||
14
nodes/navigation/common-navigation.md
Normal file
14
nodes/navigation/common-navigation.md
Normal file
@@ -0,0 +1,14 @@
|
||||
## Encoding Parameters in the URL
|
||||
|
||||
The [Page Inputs](/nodes/navigation/page-inputs) node is used to send parameters between Pages by encoding them in the URL. This is useful for example if you want certain input parameters to be available at a page, no matter the state of the app. The user may for example press __Refresh__ in the browser. Since the parameters are encoded in the URL they will still be available in the **Page** through a **Page Inputs** node.
|
||||
Another case for encoding parameters in the URL is for users to be able to share a link, with a full route to a specific place in your app, with specific parameters set.
|
||||
|
||||
There are two types of parameters **Path Parameters** and **Query Parameters**. There can only be one **Path Parameter** while you can have any number of **Query Parameters**.
|
||||
|
||||
### Path Parameter
|
||||
|
||||
A **Path Parameter** is added to the route of the page at the end. For example a **Page** with **URL Path** `mypage` with a path parameter defined, will expect the next part of the route to be the value of that parameter. The route `mypage/monkey` will result in the **Path Parameter** of the **Page** to get the value `monkey`. Using **Path Parameter** is a convenient way to encode a specific data entry to be prepopulated in a **Page**. As an example the **Path Parameter** could be the **Id** of a **Record**.
|
||||
|
||||
### Query Parameter
|
||||
|
||||
A **Query Parameter** are encoded using `?parameter=value;` notation in the URL. You can have any number of **Query Parameters**.
|
||||
34
nodes/navigation/external-link.md
Normal file
34
nodes/navigation/external-link.md
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: External Link
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# External Link
|
||||
|
||||
This node is used to trigger a navigation to a page outside of your app.
|
||||
|
||||
It also supports common URL schemes, like `mailto:` and `tel:`.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
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##>
|
||||
|
||||
## 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##> |
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------- | --------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Do</span> | <##input:do##>Recieving a signal to this input will navigate to the external link.<##input##> |
|
||||
47
nodes/navigation/navigate-to-path.md
Normal file
47
nodes/navigation/navigate-to-path.md
Normal file
@@ -0,0 +1,47 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Navigate To Path
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Navigate To Path
|
||||
|
||||
This node lets you navigate to a specific <span className="ndl-node">[Page](/nodes/navigation/page)</span> node in a <span className="ndl-node">[Page Router](/nodes/navigation/page-router)</span>.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
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##>
|
||||
|
||||
## Usage
|
||||
|
||||
You don't specify which **Page Router** that should perform the navigation, it will be implicitly resolved using the provided path. For example, if you have a **Page Router** with **URL path** `router1`, with a **Page**with the **URL path** `page1`, which in turn contains an unnamed **Page** with the **URL path** `pageA`, providing the **Path** `/router1/page1/pageA/` will force the two **Page Routers** to navigate to the respective pages.
|
||||
|
||||
In a way, **Navigate To Path** is very much like writing a URL directly into the browser address bar. However the node is only used to navigate between **Pages** in the Noodl project. If you want to navigate to an external URL you should instead use the [External Link](/nodes/navigation/external-link) node.
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| 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">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="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>
|
||||
|
||||
</div>
|
||||
53
nodes/navigation/navigate.md
Normal file
53
nodes/navigation/navigate.md
Normal file
@@ -0,0 +1,53 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Navigate
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Navigate
|
||||
|
||||
This node is used to navigate between <span className="ndl-node">[Page](/nodes/navigation/page)</span> nodes set up in a <span className="ndl-node">[Page Router](/nodes/navigation/page-router)</span>.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
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##>
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Router</span> | Here you select which **Page Router** that this **Navigation** node will act on. This input is only available if there are multiple **Page Routers** in the project. |
|
||||
| <span className="ndl-data">Target Page</span> | Here you select the **Page** to navigate to. The pages available are based on which **Page Router** this **Navigation** node is associated with. |
|
||||
| <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 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>
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Signal | Description |
|
||||
| --------------------------------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Navigated</span> | <##output:navigated##>This event is triggered when a navigation as been performed.<##output##> |
|
||||
|
||||
</div>
|
||||
25
nodes/navigation/page-inputs.md
Normal file
25
nodes/navigation/page-inputs.md
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Page Inputs
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Page Inputs
|
||||
|
||||
This node is used to pass parameters in the URL when navigating between pages in a [Page Router](/nodes/navigation/page-router).
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
One common use for this is when you want certain input parameters to be available in sharable links.
|
||||
|
||||
<##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>
|
||||
123
nodes/navigation/page-router.md
Normal file
123
nodes/navigation/page-router.md
Normal file
@@ -0,0 +1,123 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Page Router
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Page Router
|
||||
|
||||
This node lets you navigate between your <span className="ndl-node">[Page](/nodes/navigation/page)</span> nodes using the <span className="ndl-node">[Navigate](/nodes/navigation/navigate)</span> or <span className="ndl-node">[Navigate To Path](/nodes/navigation/navigate-to-path)</span> nodes. You can also use the <span className="ndl-node">[External Link](/nodes/navigation/external-link)</span> node to navigate to a page outside your app.
|
||||
|
||||
Unlike the somewhat similar [Component Stack](/nodes/component-stack/component-stack-node) the **Page Router** is optimized for web type navigation (in contrast to app type) and uses URLs and routing as part of the navigation as well as the browser history.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
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##>
|
||||
|
||||
## Implementation
|
||||
|
||||
The **Page Router** uses standard browser navigation which means that the user can use the browser **Back** button to navigate back in the **Page Router** history.
|
||||
|
||||
Note that the **Page Router** only navigates between [Pages](/nodes/navigation/page). **Pages** cannot be created through the Node Picker. You create them using **Create Page** in the component side bar.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
After creating your **Pages** they are automatically added to your **Page Router** unless you have multiple **Page Routers** in your project. Then you'll have to add them manually to where they belong.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Start Page
|
||||
|
||||
When creating and adding pages to your **Page Router** you will have to make one of the pages a starting page by opening the menu on the page item in the **Page Router** properties and selecting _Make Start Page"_.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Navigating
|
||||
|
||||
### URLs to Page Routers and Pages
|
||||
|
||||
Noodl uses a URL to route a **Page Router** to a specific **Page**. A **Page Router** may optionally have a **URL Path**. Each page has also has a **URL Path** that will uniquely identify the URL route to that page.
|
||||
|
||||
Generally, the route to a **Page** looks like the following
|
||||
|
||||
`<domainname>#/<route1>/<route2>/<route3>...`
|
||||
|
||||
where `<domainname>` is the domain on where you host the app and each `<route>` points to either a **Page Router** or a **Page** within a **Page Router**. The `<route>` may also include a **Page Parameter** and **Query Parameters** (see below).
|
||||
|
||||
For example a **Page Route** with the **URL Path** 'myrouter', with two possible pages with **URL Paths** _page1_ and _page2_, will have two possible routes: `myrouter/page1` and `#myrouter/page2`. Note the '#' character that is always added in the beginning of a route. If, for example, the Noodl App is deployed on the domain `app.mynoodlapps.com`, entering `https://app.mynoodlapps.com#myrouter/page2` in the browser will take make the **Page Router** with the **URL Path** _myrouter_ navigate to the **Page** with the **URL Path** _page2_.
|
||||
|
||||
### Navigating using Navigation node
|
||||
|
||||
The most straight forward way of navigating between pages within an app is to use the [Navigate](/nodes/navigation/navigate) node. This node will navigate to the **Page** selected in the **Navigation** node. This will update the URL of the browser to the route pointing to that page. There is also a [Navigate To Path](/nodes/navigation/navigate-to-path) node that allows an explicit path to be set, that could for example perform navigation on multiple **Page Routers** at the same time by simply specifying a full URL path.
|
||||
|
||||
## Multiple Page Routers
|
||||
|
||||
If needed, you can use multiple **Page Routers** at the same time. This could for example be used if you have multiple navigation flows within a higher level navigation flow. For example, you may have a top level navigation between the pages _Home_ _Settings_ and _Content_ and within each page have sub navigation into specific pages under each section.
|
||||
|
||||
|
||||
|
||||
@include "./common-navigation.md"
|
||||
|
||||
## Visual Appearance
|
||||
|
||||
The **Page Router** is a visual node. It will automatically expand to take all space available in the current layout, unless its **Clipping Behavior** is set to **Expand To Content Size** in which case it will have the same size as the **Page** its showing (if available).
|
||||
|
||||
## Inputs
|
||||
|
||||
| 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##> |
|
||||
|
||||
| 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##> |
|
||||
|
||||
### Visual
|
||||
|
||||
This node also supports the [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties#advanced-html) gadget from the [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties/).
|
||||
|
||||
## Outputs
|
||||
|
||||
| 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##> |
|
||||
|
||||
### Visual
|
||||
|
||||
This node supports the following [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties/):
|
||||
|
||||
- [Bounding Box](/nodes/shared-props/outputs/visual-output-properties/#bounding-box)
|
||||
- [Mounted](/nodes/shared-props/outputs/visual-output-properties/#mounted)
|
||||
- [Other](/nodes/shared-props/outputs/visual-output-properties/#other)
|
||||
|
||||
<div className="hidden-props-for-editor">
|
||||
|
||||
@include "../shared-props/inputs/_visual-input-properties.md"
|
||||
|
||||
@include "../shared-props/outputs/_visual-output-properties.md"
|
||||
|
||||
</div>
|
||||
57
nodes/navigation/page.md
Normal file
57
nodes/navigation/page.md
Normal file
@@ -0,0 +1,57 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Page
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Page
|
||||
|
||||
The **Page** node is a basic building block when creating web type navigation using a [Page Router](/nodes/navigation/page-router).
|
||||
|
||||
:::note
|
||||
|
||||
**Page** nodes cannot be created throught the node picker, it can only be created by adding a new **Page** in the component list.
|
||||
|
||||
:::
|
||||
|
||||
**Pages** are typically used together with a [Page Inputs](/nodes/navigation/page-inputs) node to be able to provide parameters to the **Page**.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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. |
|
||||
|
||||
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties/):
|
||||
|
||||
- [Padding](/nodes/shared-props/inputs/visual-input-properties#padding)
|
||||
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties#advanced-html)
|
||||
|
||||
## Outputs
|
||||
|
||||
### Visual
|
||||
|
||||
This node supports the following [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties/):
|
||||
|
||||
- [Bounding Box](/nodes/shared-props/outputs/visual-output-properties#bounding-box)
|
||||
- [Mounted](/nodes/shared-props/outputs/visual-output-properties#mounted)
|
||||
- [Other](/nodes/shared-props/outputs/visual-output-properties#other)
|
||||
|
||||
<div className="hidden-props-for-editor">
|
||||
|
||||
@include "../shared-props/inputs/_visual-input-properties.md"
|
||||
|
||||
@include "../shared-props/outputs/_visual-output-properties.md"
|
||||
|
||||
</div>
|
||||
20
nodes/overview.mdx
Normal file
20
nodes/overview.mdx
Normal file
@@ -0,0 +1,20 @@
|
||||
---
|
||||
id: overview
|
||||
title: Node Reference
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
---
|
||||
|
||||
import { NodeReferenceListing, NodeColorGuide } from './_overview.tsx'
|
||||
|
||||
# Node Reference
|
||||
|
||||
The main building blocks of Noodl are nodes. Every node has its own specific purpose and is very simple in itself, but together they become really powerful. Here you will find an overview of all Core Nodes, their type and category.
|
||||
|
||||
Noodl can also be extended with Modules that give you more nodes to build with. Check out the [Module library](/library/modules/overview) for the ones that already exist, or the [Extending Noodl section](/javascript/extending/overview) to learn how to develop your own.
|
||||
|
||||
<div className="spacer" style={{ paddingBottom: '80px' }} />
|
||||
|
||||
<NodeColorGuide text="All the nodes in Noodl are color coded to make it easier to visually navigate the Node Canvas." />
|
||||
|
||||
<NodeReferenceListing />
|
||||
68
nodes/popups/close-popup.md
Normal file
68
nodes/popups/close-popup.md
Normal file
@@ -0,0 +1,68 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Close Popup
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Close Popup
|
||||
|
||||
This node is used to close a popup that have previously been shown with the <span className="ndl-node">Show Popup</span> node. Sending a signal to the <span className="ndl-signal">Close</span> input will close the popup and remove the component instance.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
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##>
|
||||
|
||||
### Results and close actions
|
||||
|
||||
Sending data back to the triggering component is done by adding **Result** values and **Close Action** signals. The result values become inputs where you can pass data back, and the actions become signal inputs that can be used to send signals back. This is typically useful for popups that take some sort of input, e.g. **Name** and where the user can perform different actions, e.g. **Confirm** or **Cancel**.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
After specifying results and close actions in the properties the corresponding inputs become available on the **Close Popup** node.
|
||||
|
||||
:::info
|
||||
|
||||
**Close Popup** has to be called in the same component that **Open Popup** opened.
|
||||
|
||||
:::
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
These **Result** values and **Close Actions** will also become available as outputs on the [Show Popup](/nodes/popups/show-popup) nodes that have the component containing the **Close Popup** node as target.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Inputs
|
||||
|
||||
| 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 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>
|
||||
|
||||
| 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>
|
||||
66
nodes/popups/show-popup.md
Normal file
66
nodes/popups/show-popup.md
Normal file
@@ -0,0 +1,66 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Show Popup
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Show Popup
|
||||
|
||||
This node is used to display a component as a modal popup on top of the entire window.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The <span className="ndl-node">Show Popup</span> node lets you specify which component will be popped up when signaled with the <span className="ndl-signal">Show</span> input. Any <span className="ndl-node">Component Inputs</span> that the specified component has will be available as inputs to the <span className="ndl-node">Show Popup</span> node.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Inputs
|
||||
|
||||
| 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##> |
|
||||
|
||||
| Signal | Description |
|
||||
| ---------------------------------------- | ---------------------------------------------------------------- |
|
||||
| <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>
|
||||
|
||||
## 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">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>
|
||||
|
||||
| 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>
|
||||
3
nodes/shared-props/inputs/_enabled.md
Normal file
3
nodes/shared-props/inputs/_enabled.md
Normal file
@@ -0,0 +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##> |
|
||||
368
nodes/shared-props/inputs/_visual-input-properties.md
Normal file
368
nodes/shared-props/inputs/_visual-input-properties.md
Normal file
@@ -0,0 +1,368 @@
|
||||
# Visual Input Properties
|
||||
|
||||
All visual nodes feature a plethora of visual properties that can be accessed both in the Property Panel and through inputs. These are documented below. Plese refer to the individual node documentation pages to see which nodes feature what visual properties.
|
||||
|
||||
## Margin
|
||||
|
||||
Margins are the spacings around the node, outside of the borders. The margins for the node can be set individually in the Spacing Gadget.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------------- | ------------------------------------------------------- |
|
||||
| <span className="ndl-data">Margin Left</span> | The left margin in `px`, or `%` of the parents width. |
|
||||
| <span className="ndl-data">Margin Right</span> | The right margin in `px`, or `%` of the parents width. |
|
||||
| <span className="ndl-data">Margin Top</span> | The top margin in `px` or, `%` of the parents width. |
|
||||
| <span className="ndl-data">Margin Bottom</span> | The bottom margin in `px`, or `%` of the parents width. |
|
||||
|
||||
## Padding
|
||||
|
||||
Paddings are the spacings around the nodes content, inside of the borders. The margins for the node can be set individually in the Spacing Gadget.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------------ | -------------------------------------------------------- |
|
||||
| <span className="ndl-data">Padding Left</span> | The left padding in `px`, or `%` of the parents width. |
|
||||
| <span className="ndl-data">Padding Right</span> | The right padding in `px`, or `%` of the parents width. |
|
||||
| <span className="ndl-data">Padding Top</span> | The top padding in `px` or, `%` of the parents width. |
|
||||
| <span className="ndl-data">Padding Bottom</span> | The bottom padding in `px`, or `%` of the parents width. |
|
||||
|
||||
## Alignment
|
||||
|
||||
To specify how the node is aligned to its parent you can use the Alignment Gadget.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
From left to right, the alignment options are:
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------------------- | ------------------------------------------------------- |
|
||||
| <span className="ndl-data">Align Bottom</span> | Align this node to the bottom of its parent. |
|
||||
| <span className="ndl-data">Align Vertical Center</span> | Align this node to the bottom of its parent. |
|
||||
| <span className="ndl-data">Align Top</span> | Align this node to the top of its parent. |
|
||||
| <span className="ndl-data">Align Left</span> | Align this node to the left side of its parent. |
|
||||
| <span className="ndl-data">Align Horizontal Center</span> | Align this node to the horizontal center of its parent. |
|
||||
| <span className="ndl-data">Align Right</span> | Align this node to the right of its parent. |
|
||||
|
||||
#### Connection Values
|
||||
|
||||
When making a connection to the layout property, the values are a little different than the ones in the dropdown.
|
||||
Here is a list of the values, that should be passed in:
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Display Name | Value |
|
||||
| ----------------------- | --------- |
|
||||
| Align Bottom | `bottom` |
|
||||
| Align Vertical Center | `center` |
|
||||
| Align Top | `top` |
|
||||
| Align Left | `left` |
|
||||
| Align Horizontal Center | `center` |
|
||||
| Align Right | `right` |
|
||||
|
||||
</div>
|
||||
|
||||
## Dimensions
|
||||
|
||||
Controling the width and height of the node is done with the Dimension Gadget.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The first four controls the **Size Mode** of the node. It decides how the width and height of the node is specified. From left to right, the options are:
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Explicit width and height</span> | Set the width and height directly in pixels or percentage. Percentage is in relation to the parent, so 100% is the same size as the parent. |
|
||||
| <span className="ndl-data">Explicit height, Content Width</span> | The node will calculate the width to fit all of its children. The height is explicitly set. |
|
||||
| <span className="ndl-data">Explicit width, Content Height</span> | The node will calculate the height to fit all of its children. The width is explicitly set. |
|
||||
| <span className="ndl-data">Content Size</span> | Both the width and the height is calculated to fit all of the node's children. |
|
||||
|
||||
The other properties are:
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Width</span> | Specify the width of this node in pixels, percentage of parent's width or the unit `vw` which is percentage of the browser window width. |
|
||||
| <span className="ndl-data">Height</span> | Specify the height of this node in pixels, percentage of parent's height or the unit `vw` which is percentage of the browser window height. |
|
||||
| <span className="ndl-data">Fixed</span> | Controls if an element will try to resize and share space with siblings without going outside of the bounds of the parent. <br/> <br/>If _Fixed_ is enabled, the element will be the exact specified size. If it is disabled, the element will resize to fill up empty space, or shrink to make space for siblings. |
|
||||
|
||||
You can use the [Dimension Contstraints Gadget](#dimension-constraints) to set a min and/or a max size for the node.
|
||||
|
||||
## Layout
|
||||
|
||||
The supported properties of the Layout Gadget can be very different depending on the node. All possible properties are listed below.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
### • Position
|
||||
|
||||
Controls the layout of this node is in its parent group.
|
||||
|
||||
| Option | Description |
|
||||
| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">In Layout</span> | This node is part of the parent group layout, it will be stacked with its siblings depending on the parent group layout settings. |
|
||||
| <span className="ndl-data">Absolute</span> | This node will not be part of the parent group layout, instead you are free to use the `Pos X` and `Pos Y` to place this node explicitly. |
|
||||
| <span className="ndl-data">Sticky</span> | Behaves like _In Layout_, except when the node is about the be scrolled outside the parent. It'll stick to an edge of the parent instead of scrolling away. The edge it sticks to can be controlled with the **Alignment** input. |
|
||||
|
||||
### • Layout Direction
|
||||
|
||||
By default all children are stacked. This property specifies the stacking direction.
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------- | ---------------------------------- |
|
||||
| <span className="ndl-data">Vertical</span> | Children are stacked vertically. |
|
||||
| <span className="ndl-data">Horizontal</span> | Children are stacked horizontally. |
|
||||
| <span className="ndl-data">None</span> | Children are not stacked. |
|
||||
|
||||
</div>
|
||||
|
||||
When making a connection to the layout property, the values are a little different than the ones in the dropdown.
|
||||
Here is a list of the values, that should be passed in:
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Display Name | Value |
|
||||
| ------------ | -------- |
|
||||
| Vertical | `column` |
|
||||
| Horizontal | `row` |
|
||||
| None | `none` |
|
||||
|
||||
</div>
|
||||
|
||||
### • Multi Line Wrap
|
||||
|
||||
This property specifies what happens with children that are stacked outside of the border of the node.
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Off</span> | Children are stacked beyond the boundaries of the node. If _Clip_ is enabled they will not be visible. |
|
||||
| <span className="ndl-data">On</span> | Children are wrapped to the next row or column (depending on layout direction). |
|
||||
| <span className="ndl-data">On Reverse</span> | Same as _On_ but opposite layout direction. |
|
||||
|
||||
### • Gap
|
||||
|
||||
This property is used to add spacing between children in the group.
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------------ | --------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Vertical Gap</span> | Vertical space between children. Shown if _Layout_ is set to _Vertical_ or _Multi Line Wrap_ is _On_. |
|
||||
| <span className="ndl-data">Horizontal Gap</span> | Horizontal space between children. Shown if _Layout_ is set to _Horizontal_ or _Multi Line Wrap_ is _On_. |
|
||||
|
||||
### • Clip content
|
||||
|
||||
This property controls if elements that are too big to fit inside the node will be clipped.
|
||||
|
||||
If disabled, a group will always expand to contain all of its children. So if the children are taller than the size of the group, the group will expand and be larger than its specified size.
|
||||
|
||||
## Align and justify content
|
||||
|
||||
This Gadget controls how children are aligned and justified by default. Children can override these settings with their **Alignment** input.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The first set of options control cross-axis alignment, meaning vertical alignment for horizontal layouts, and horizontal alignment for vertical layouts. From left to right, the options are:
|
||||
|
||||
| Option | Description |
|
||||
| ---------------------------------------------------- | ------------------------------------------------- |
|
||||
| <span className="ndl-data">Align items start</span> | Children are stacked at the start of the parent. |
|
||||
| <span className="ndl-data">Align items center</span> | Children are stacked at the center of the parent. |
|
||||
| <span className="ndl-data">Align items end</span> | Children are stacked at the end of the parent. |
|
||||
|
||||
The second set of options control alignment in the same direction as the layout. From left to right, the options are:
|
||||
|
||||
| Option | Description |
|
||||
| --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Justify content start</span> | Children are stacked at the start of the parent. |
|
||||
| <span className="ndl-data">Justify content center</span> | Children are stacked at the center of the parent. |
|
||||
| <span className="ndl-data">Justify content end</span> | Children are stacked at the end of the parent. |
|
||||
| <span className="ndl-data">Justify content space between</span> | Children are evenly distributed. No space is added between the parent and the first and last child. |
|
||||
| <span className="ndl-data">Justify content space around</span> | Children are evenly distributed. Space is added between the parent and the first and last child. |
|
||||
| <span className="ndl-data">Justify content space evenly</span> | Children are evenly distributed with equal space between them. |
|
||||
|
||||
## Scroll
|
||||
|
||||
This Gadget controls how scrolling should be handled within the node.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Enable Scroll</span> | This specifies if the node should have scrolling enabled for children that overflow outside of the nodes boundaries. Scrolling direction is determined by the nodes [Layout](#layout) direction. Enabling this will show the scrolling properties below. |
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Native Platform Scroll</span> | When enabled, uses the web's native scrolling dependent on the platform. Uses custom Noodl scrolling when disabled. The custom Noodl scrolling is platform independent and has both touch and mouse support. |
|
||||
| <span className="ndl-data">Show Scrollbar</span> | Only available if _Native Platform Scroll_ is disabled. Toggles the visibility of the scrollbar. |
|
||||
| <span className="ndl-data">Bounce at boundaries</span> | Only available if _Native Platform Scroll_ is disabled. Toggles if scrolling bounces when you are at top or bottom of list. |
|
||||
| <span className="ndl-data">Snap</span> | Only available if _Native Platform Scroll_ is disabled. Enabling this will snap the scrolling between every screen. |
|
||||
| <span className="ndl-data">Snap To Every Item</span> | Only available if _Snap_ is enabled. Enabling this will force the scrolling to snap to individual items. |
|
||||
|
||||
## Text Style
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Text Style</span> | Set an existing text style to this node, or create a new text style from the current properties. |
|
||||
| <span className="ndl-data">Font Family</span> | The font family of the text to display. Choose a font in the project folder or type font name. |
|
||||
| <span className="ndl-data">Font Size</span> | The size of the font of the text to be displayed, in `px`. |
|
||||
| <span className="ndl-data">Color</span> | The color of the text to be displayed. |
|
||||
| <span className="ndl-data">Letter spacing</span> | The distance between letters in the string to be displayed. Can be specified in the following units: <br/><br/>`px`: Pixels. This is CSS pixels, so one pixel will be two physical pixels on a retina display<br/>`em`: Relative to the font size. 1em is the same as the current font size |
|
||||
| <span className="ndl-data">Line height</span> | The line height of the string, if the string is on multiple lines. Can be specified in the following units: <br/><br/> `No unit`: Relative to the current font size. Preferred way to set line height <br/>`px`: Pixels. This is CSS pixels, so one pixel will be two physical pixels on a retina display <br/>`%`: Percentage |
|
||||
| <span className="ndl-data">Case</span> | Control how to capitalize the text: <br/><br/>`None`: Characters are unmodified<br/>`Uppercase`: All characters will be uppercase<br/>`Lowercase`: All characters will be lowercase<br/>`Capitalize`: The first letter of each word will be converted to uppercase |
|
||||
|
||||
## Style
|
||||
|
||||
This Gadget controls basic styling of the node.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Opacity</span> | The opacity of the node. 0 is completely transparent and invisible. 1 is completely solid and opaque. |
|
||||
| <span className="ndl-data">Background Color</span> | Specifies the background color for this node. |
|
||||
| <span className="ndl-data">Visible</span> | Toggle the visibility of this node on and off. |
|
||||
| <span className="ndl-data">zIndex</span> | The depth index for this node, this can be any number. |
|
||||
| <span className="ndl-data">Blend Mode</span> | Controls how this element should blend with the elements behind it. The blend mode can be set to one of the following: `Multiply` `Normal` `Screen` `Overlay` `Darken` `Lighten` `Color Dodge` `Color Burn` `Hard Light` `Soft Light` `Difference` `Exclusion` `Hue` `Saturation` `Color` `Luminosity` |
|
||||
|
||||
## Border Style
|
||||
|
||||
The Border Style Gadget is used to style the borders.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You can select to style all borders at once, or only style individual borders. The styling for the individual borders will override the all-borders option.
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Border Style</span> | Specifies whether this node should have a border and what it should look like. The options are `None`, `Solid`, `Dotted` and `Dashed`. |
|
||||
| <span className="ndl-data">Border Width</span> | The width of the border. Only available if _Border Style_ is set to have a border. |
|
||||
| <span className="ndl-data">Border Color</span> | The color of the border. Only available if _Border Style_ is set to have a border. |
|
||||
|
||||
## Corner Radius
|
||||
|
||||
The Corner Radius Gadget is used to round the corners of the node.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You can select to set the corner radius all corners at once, or only style individual corners. The styling for the individual corners will override the all-corners option.
|
||||
|
||||
The corner radius is specified in `px` or `%` of the nodes width.
|
||||
|
||||
## Box Shadow
|
||||
|
||||
You use the Box Shadow Gadget to set the shadow behind or inside of the node.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Shadow Enabled</span> | Enables and disables the shadow. |
|
||||
| <span className="ndl-data">Offset X</span> | The horizontal offset of the shadow. A positive value puts the shadow on the right side of the node, a negative value puts the shadow on the left side of the node. |
|
||||
| <span className="ndl-data">Offset Y</span> | The vertical offset of the shadow. A positive value puts the shadow below the node, a negative value puts the shadow above node. |
|
||||
| <span className="ndl-data">Blur Radius</span> | The blur radius. The higher the number, the blurrier the shadow will be. |
|
||||
| <span className="ndl-data">Spread Radius</span> | The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. |
|
||||
| <span className="ndl-data">Inset</span> | Changes the shadow from an outer shadow (outset) to an inner shadow. |
|
||||
| <span className="ndl-data">Shadow Color</span> | The color of the shadow. |
|
||||
|
||||
## Placement
|
||||
|
||||
The Placement Gadget lets you offset, rotate and scale the node. It uses CSS Transforms under the hood, meaning that the nod will still take up the original size and position in the visual tree.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Pos X</span> | The X position of the node. Either relative to its parent top left corner or relative to its layout position depending on the _Position_ property. Can be specified in pixels or as a percentage of its parent's width. |
|
||||
| <span className="ndl-data">Pos Y</span> | The Y position of the node either relative to its parent's top left corner or relative to its layout position depending on the _Position_ property. Can be specified in pixels or as a percentage of its parent's height. |
|
||||
| <span className="ndl-data">Rotation</span> | The rotation in degrees. |
|
||||
| <span className="ndl-data">Scale</span> | Specifies scaling of this node. A value of 0 scales the node down completely so that it is no longer be visible. A value of 1 gives it the original size, and a value of 2 doubles the size and so on. |
|
||||
| <span className="ndl-data">Transform Origin X</span> | Specifies the X position, within this node, that will be the center for rotation and scale. By default it is the center of the node (i.e. 50%) but you can specify an arbitrary value in either percentage of the node's width or explicitly in pixels. |
|
||||
| <span className="ndl-data">Transform Origin Y</span> | Specifies the Y position, within this node, that will be the center for rotation and scale. By default it is the center of the node (i.e. 50%) but you can specify an arbitrary value in either percentage of the node's height or explicitly in pixels. |
|
||||
|
||||
## Dimension Constraints
|
||||
|
||||
The Dimension Constraints Gadget allows you to clamp the values of the [Dimensions Gadget](#dimensions).
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Min Width</span> | The minimum width that can be assumed by growing with children or parent. Can be specified in % or pixels, or _vw_ which is percentage of window width. |
|
||||
| <span className="ndl-data">Max Width</span> | The maximum width that can be assumed by growing with children or parent. Can be specified in % or pixels, or _vw_ which is percentage of window width. |
|
||||
| <span className="ndl-data">Min Height</span> | The minimum height that can be assumed by growing with children or parent. Can be specified in % or pixels, or _vh_ which is percentage of window height. |
|
||||
| <span className="ndl-data">Max Height</span> | The maximum height that can be assumed by growing with children or parent. Can be specified in % or pixels, or _vh_ which is percentage of window height. |
|
||||
|
||||
## Focus
|
||||
|
||||
| Signal | Description |
|
||||
| ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Focus</span> | Focuses this node. Will trigger the _Focused_ signal output on this node, as well as _Focused Lost_ on other nodes that now lost focus. |
|
||||
|
||||
## Other
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Pointer Events Mode</span> | This specifies how this node responds to pointer events.<br/><br/>`Inherit` sets the node to respond to pointer events in the same way as its parent.<br/>`Explicit` sets the node to respond to pointer events as specified by _Pointer Events Enabled_. |
|
||||
| <span className="ndl-data">Pointer Events Enabled</span> | This property is only available if _Pointer Events Mode_ is set to _Explicit_. It will specify if this node responds to pointer events or not. If set to false this node will completely ignore pointer events. |
|
||||
| <span className="ndl-data">Block Pointer Events</span> | This will cause this node to block all pointer events, e.g. any node that is behind this node will not receive pointer events. |
|
||||
| <span className="ndl-data">Mounted</span> | 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 visual tree. It differs from the _Visible_ property where the node is still part of the visual tree but invisible. |
|
||||
|
||||
## Advanced HTML
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------- | ----------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">CSS Class</span> | <##input:cssClass##>Specify a CSS class this node will have.<##input##> |
|
||||
| **CSS Style** | Use this property to specify your custom CSS. |
|
||||
10
nodes/shared-props/inputs/visual-input-properties.md
Normal file
10
nodes/shared-props/inputs/visual-input-properties.md
Normal file
@@ -0,0 +1,10 @@
|
||||
---
|
||||
hide_title: true
|
||||
title: Visual Input Properties
|
||||
---
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./_visual-input-properties.md"
|
||||
|
||||
</div>
|
||||
9
nodes/shared-props/outputs/_control-events.md
Normal file
9
nodes/shared-props/outputs/_control-events.md
Normal file
@@ -0,0 +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##> |
|
||||
6
nodes/shared-props/outputs/_control-states.md
Normal file
6
nodes/shared-props/outputs/_control-states.md
Normal file
@@ -0,0 +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##> |
|
||||
58
nodes/shared-props/outputs/_visual-output-properties.md
Normal file
58
nodes/shared-props/outputs/_visual-output-properties.md
Normal file
@@ -0,0 +1,58 @@
|
||||
# Visual Output Properties
|
||||
|
||||
## Scrolling
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------------- | -------------------------------------------- |
|
||||
| <span className="ndl-data">Scroll Position</span> | The current position of scrolling in pixels. |
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------------ | ------------------------------------- |
|
||||
| <span className="ndl-signal">Scroll Start</span> | Signal emitted when scrolling starts. |
|
||||
| <span className="ndl-signal">Scroll End</span> | Signal emitted when scrolling ends. |
|
||||
|
||||
## Bounding Box
|
||||
|
||||
| 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##> |
|
||||
|
||||
## 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##> |
|
||||
|
||||
## Pointer Events
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------------- | --------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Click</span> | Triggered when the node is clicked or tapped. |
|
||||
| <span className="ndl-signal">Pointer Down</span> | Triggered when the mouse is pressed or finger is down on the node. |
|
||||
| <span className="ndl-signal">Pointer Up</span> | Triggered when the mouse is released or finger is lifted on the node. |
|
||||
| <span className="ndl-signal">Pointer Enter</span> | Triggered when the mouse enters the node. |
|
||||
|
||||
## Hover Events
|
||||
|
||||
| Signal | Description |
|
||||
| ----------------------------------------------- | ----------------------------------------- |
|
||||
| <span className="ndl-signal">Hover Start</span> | Triggered when the mouse enters the node. |
|
||||
| <span className="ndl-signal">Hover End</span> | Triggered when the mouse leaves the node. |
|
||||
|
||||
## Focus
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Focused</span> | Triggered when the node, or one if its descendants, is clicked, or if the _Focused_ input is triggered. |
|
||||
| <span className="ndl-signal">Blurred</span> | Triggered when this node had focus and another node gained focus. Focus is only lost if the new focused node is not a descendant. |
|
||||
|
||||
## Other
|
||||
|
||||
| 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##> |
|
||||
10
nodes/shared-props/outputs/visual-output-properties.md
Normal file
10
nodes/shared-props/outputs/visual-output-properties.md
Normal file
@@ -0,0 +1,10 @@
|
||||
---
|
||||
hide_title: true
|
||||
title: Visual Output Properties
|
||||
---
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./_visual-output-properties.md"
|
||||
|
||||
</div>
|
||||
41
nodes/string-manipulation/string-format.md
Normal file
41
nodes/string-manipulation/string-format.md
Normal file
@@ -0,0 +1,41 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: String Format
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# String Format
|
||||
|
||||
This node is used to construct a new text <span className="ndl-data">string</span> from multiple other text <span className="ndl-data">strings</span>.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The <span className="ndl-node">String Format</span> node needs a format input where the output <span className="ndl-data">string</span> and string variables are defined.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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">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_. |
|
||||
34
nodes/string-manipulation/string-mapper.md
Normal file
34
nodes/string-manipulation/string-mapper.md
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: String Mapper
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# String Mapper
|
||||
|
||||
This node receives an input <span className="ndl-data">string</span>, looks it up in a mapping table, and outputs the correct output <span className="ndl-data">string</span>.
|
||||
You define your own string mappings. You can also define a default value to output if the <span className="ndl-node">String Mapper</span> node receives an unspecified input <span className="ndl-data">string</span>.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Input 0..N</span> | The input strings, any string that matches one of these values will be mapped. |
|
||||
| <span className="ndl-data">Mapping 0..N</span> | The mapped strings, for each of the input strings there can be a corresponding mapped string. |
|
||||
| <span className="ndl-data">Input String</span> | The string that will be used to look up mapping, e.g. if the string matches _Input 2_ then the _Mapped String_ output will be the value of _Mapping 2_. |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Mapped String</span> | The mapped string that corresponds to the value of _Input String_, e.g. if the _Input String_ value matches _Input 2_ then this output will be the value of _Mapping 2_. |
|
||||
33
nodes/string-manipulation/substring.md
Normal file
33
nodes/string-manipulation/substring.md
Normal file
@@ -0,0 +1,33 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Substring
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Substring
|
||||
|
||||
This node lets you extract a part of a <span className="ndl-data">string</span> given a start and end character position.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------- | --------------------------------------------------------------- |
|
||||
| <span className="ndl-data">String</span> | The source string where the substring should be extracted from. |
|
||||
| <span className="ndl-data">Start</span> | The character index of the start of the substring. |
|
||||
| <span className="ndl-data">End</span> | The character index of the end of the substring. |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------- | ------------------------ |
|
||||
| <span className="ndl-data">Result</span> | The extracted substring. |
|
||||
108
nodes/ui-controls/button.md
Normal file
108
nodes/ui-controls/button.md
Normal file
@@ -0,0 +1,108 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Button
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Button
|
||||
|
||||
This node places a customizable button in the visual tree.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The button has a <span className="ndl-signal">Click</span> signal that you can use to trigger actions.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<##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
|
||||
|
||||
## Inputs
|
||||
|
||||
The Button can be enabled and disabled using the Enabled input:
|
||||
|
||||
@include "../shared-props/inputs/_enabled.md"
|
||||
|
||||
The Button node has a set of label properties that can be set:
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Enable Label</span> | Sets whether the label is visible or not. |
|
||||
| <span className="ndl-data">Text Style</span> | Set an existing text style to this node, or create a new text style from the current properties. |
|
||||
| <span className="ndl-data">Label</span> | A text string that will be shown as the label on the button. |
|
||||
|
||||
Similarly, it has a set of icon properties:
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------- | --------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Enable Icon</span> | Sets whether the icon is visible or not. |
|
||||
| <span className="ndl-data">Type</span> | Use this to set if you want to use a predefined `icon` or a custom `image` from the project folder. |
|
||||
| <span className="ndl-data">Source</span> | Where to get the icon. |
|
||||
| <span className="ndl-data">Spacing</span> | The spacing between the text and the icon. |
|
||||
| <span className="ndl-data">Placement</span> | Sets whether the icon should be to the `left` or to the `right` of the _Label_ |
|
||||
| <span className="ndl-data">Size</span> | The width of the icon in `px`. |
|
||||
| <span className="ndl-data">Color</span> | Sets the color of the icon. Only visible if _Type_ is set to `icon`. |
|
||||
|
||||
### Visual
|
||||
|
||||
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties):
|
||||
|
||||
- [Margin](/nodes/shared-props/inputs/visual-input-properties#margin)
|
||||
- [Padding](/nodes/shared-props/inputs/visual-input-properties#padding)
|
||||
- [Alignment](/nodes/shared-props/inputs/visual-input-properties#alignment)
|
||||
- [Dimensions](/nodes/shared-props/inputs/visual-input-properties#dimensions)
|
||||
- [Layout, Position](/nodes/shared-props/inputs/visual-input-properties#position)
|
||||
- [Text Styles](/nodes/shared-props/inputs/visual-input-properties#text-styles)
|
||||
- [Style](/nodes/shared-props/inputs/visual-input-properties#style)
|
||||
- [Border Style](/nodes/shared-props/inputs/visual-input-properties#border-style)
|
||||
- [Corner Radius](/nodes/shared-props/inputs/visual-input-properties#corner-radius)
|
||||
- [Box Shadow](/nodes/shared-props/inputs/visual-input-properties#box-shadow)
|
||||
- [Placement](/nodes/shared-props/inputs/visual-input-properties#placement)
|
||||
- [Dimension Constraints](/nodes/shared-props/inputs/visual-input-properties#dimension-constraints)
|
||||
- [Other](/nodes/shared-props/inputs/visual-input-properties#other)
|
||||
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties#advanced-html)
|
||||
|
||||
## Outputs
|
||||
|
||||
The main output for the button is the Click <span className="ndl-signal">signal</span>:
|
||||
|
||||
| Signal | Description |
|
||||
| ----------------------------------------- | ------------------------------------------------------------------------------------------- |
|
||||
| <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>:
|
||||
|
||||
@include "../shared-props/outputs/_control-events.md"
|
||||
|
||||
### States
|
||||
|
||||
Apart from triggering <span className="ndl-signal">signals</span> the Button node also notifies of its state through <span className="ndl-data">data</span> outputs:
|
||||
|
||||
@include "../shared-props/outputs/_control-states.md"
|
||||
|
||||
### Visual
|
||||
|
||||
This node supports the following [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties/):
|
||||
|
||||
- [Bounding Box](/nodes/shared-props/outputs/visual-output-properties/#bounding-box)
|
||||
- [Mounted](/nodes/shared-props/outputs/visual-output-properties/#mounted)
|
||||
- [Other](/nodes/shared-props/outputs/visual-output-properties/#other)
|
||||
|
||||
<div className="hidden-props-for-editor">
|
||||
|
||||
@include "../shared-props/inputs/_visual-input-properties.md"
|
||||
|
||||
@include "../shared-props/outputs/_visual-output-properties.md"
|
||||
|
||||
</div>
|
||||
155
nodes/ui-controls/checkbox.md
Normal file
155
nodes/ui-controls/checkbox.md
Normal file
@@ -0,0 +1,155 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Checkbox
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Checkbox
|
||||
|
||||
This node places a customizable checkbox in the visual tree.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The checkbox will flip its state when clicked and its <span className="ndl-data">Checked</span> property can be connected to a data source, such as a <span className="ndl-data">variable</span> or <span className="ndl-data">object</span>.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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.
|
||||
|
||||
<div className="ndl-image-with-background s">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Inputs
|
||||
|
||||
The main input of the Checkbox node is the <span className="ndl-data">Checked</span> input:
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| 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##>. |
|
||||
|
||||
</div>
|
||||
|
||||
It can be enabled and disabled using the <span className="ndl-data">Enabled</span> input:
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "../shared-props/inputs/_enabled.md"
|
||||
|
||||
</div>
|
||||
|
||||
The Checkbox node has a set of label properties that can be set:
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Enable Label</span> | Sets whether the label is visible or not. |
|
||||
| <span className="ndl-data">Text Style</span> | Set an existing text style to this node, or create a new text style from the current properties. |
|
||||
| <span className="ndl-data">Label</span> | A text string that will be shown as the label on the button. |
|
||||
| <span className="ndl-data">Spacing</span> | The spacing between the label and the checkbox. |
|
||||
|
||||
</div>
|
||||
|
||||
Similarly, it has a set of icon properties:
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------- | --------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Enable Icon</span> | Sets whether the icon is visible or not. |
|
||||
| <span className="ndl-data">Type</span> | Use this to set if you want to use a predefined `icon` or a custom `image` from the project folder. |
|
||||
| <span className="ndl-data">Source</span> | Where to get the icon. |
|
||||
| <span className="ndl-data">Placement</span> | Sets whether the icon should be to the `left` or to the `right` of the _Label_ |
|
||||
| <span className="ndl-data">Size</span> | The width of the icon in `px`. |
|
||||
| <span className="ndl-data">Color</span> | Sets the color of the icon. Only visible if _Type_ is set to `icon`. |
|
||||
|
||||
</div>
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Signal | Description |
|
||||
| ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Check</span> | Reflects the same action as the user checked the Checkbox. |
|
||||
| <span className="ndl-signal">Uncheck</span> | Reflects the same action as the user unchecked the Checkbox. |
|
||||
|
||||
</div>
|
||||
|
||||
### Visual
|
||||
|
||||
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties/):
|
||||
|
||||
- [Margin](/nodes/shared-props/inputs/visual-input-properties/#margin)
|
||||
- [Alignment](/nodes/shared-props/inputs/visual-input-properties/#alignment)
|
||||
- [Dimensions](/nodes/shared-props/inputs/visual-input-properties/#dimensions)
|
||||
- [Layout, Position](/nodes/shared-props/inputs/visual-input-properties/#-position)
|
||||
- [Style](/nodes/shared-props/inputs/visual-input-properties/#style)
|
||||
- [Border Style](/nodes/shared-props/inputs/visual-input-properties/#border-style)
|
||||
- [Corner Radius](/nodes/shared-props/inputs/visual-input-properties/#corner-radius)
|
||||
- [Box Shadow](/nodes/shared-props/inputs/visual-input-properties/#box-shadow)
|
||||
- [Placement](/nodes/shared-props/inputs/visual-input-properties/#placement)
|
||||
- [Other](/nodes/shared-props/inputs/visual-input-properties/#other)
|
||||
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties/#advanced-html)
|
||||
|
||||
## Outputs
|
||||
|
||||
The main output of the Checkbox node is the <span className="ndl-data">Checked</span> output.
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| 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##> |
|
||||
|
||||
</div>
|
||||
|
||||
It also features a set of <span className="ndl-signal">signals</span>:
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "../shared-props/outputs/_control-events.md"
|
||||
|
||||
</div>
|
||||
|
||||
### States
|
||||
|
||||
Apart from triggering <span className="ndl-signal">signals</span> the Checkbox node also notifies of its state through <span className="ndl-data">data</span> outputs:
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "../shared-props/outputs/_control-states.md"
|
||||
|
||||
</div>
|
||||
|
||||
### Visual
|
||||
|
||||
This node supports the following [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties/):
|
||||
|
||||
- [Bounding Box](/nodes/shared-props/outputs/visual-output-properties/#bounding-box)
|
||||
- [Mounted](/nodes/shared-props/outputs/visual-output-properties/#mounted)
|
||||
- [Other](/nodes/shared-props/outputs/visual-output-properties/#other)
|
||||
|
||||
<div className="hidden-props-for-editor">
|
||||
|
||||
@include "../shared-props/inputs/_visual-input-properties.md"
|
||||
|
||||
@include "../shared-props/outputs/_visual-output-properties.md"
|
||||
|
||||
</div>
|
||||
122
nodes/ui-controls/dropdown.md
Normal file
122
nodes/ui-controls/dropdown.md
Normal file
@@ -0,0 +1,122 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Dropdown
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Dropdown
|
||||
|
||||
This node places a dropdown input field in the visual tree.
|
||||
The input can for example be used to capture information from a user.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The dropdown takes an array of options as an input,
|
||||
which will be shown in the dropdown for the user to pick from.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## The Incoming Items Format
|
||||
|
||||
The incoming items should be an [Array](/nodes/data/array/array-node) of [Objects](/nodes/data/object/object-node),
|
||||
for example coming from a [Static Array](/nodes/data/array/static-array),
|
||||
[Query Records](/nodes/data/cloud-data/query-records) or a [Function](/nodes/javascript/function) node.
|
||||
|
||||
The **Object** should have two mandatory properties: `Label`, `Value` (note that the case matters, `value` would not work). The `Label` property should contain the string to be shown in the **Dropdown**.
|
||||
The `Value` property will be set on the output **Value** on the **Dropdown**.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Depending on how your original data looks, it may be necessary to use the [Array Map](/nodes/data/array/array-map/) node to re-map values in the original data towards `Label` and `Value`.
|
||||
One useful pattern is to map the `id` of an **Object** to the `Value` property in the **Array Map** to easily access the selected **Object**.
|
||||
The mapping can be achieved through `Value: function (object) { return object.id }`.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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">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. |
|
||||
|
||||
User interaction can be enabled and disabled:
|
||||
|
||||
@include "../shared-props/inputs/_enabled.md"
|
||||
|
||||
### Visual
|
||||
|
||||
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties/):
|
||||
|
||||
- [Margin](/nodes/shared-props/inputs/visual-input-properties/#margin)
|
||||
- [Alignment](/nodes/shared-props/inputs/visual-input-properties/#alignment)
|
||||
- [Dimensions](/nodes/shared-props/inputs/visual-input-properties/#dimensions)
|
||||
- [Layout, Position](/nodes/shared-props/inputs/visual-input-properties/#-position)
|
||||
- [Text Style](/nodes/shared-props/inputs/visual-input-properties/#text-style)
|
||||
- [Style](/nodes/shared-props/inputs/visual-input-properties/#style)
|
||||
- [Border Style](/nodes/shared-props/inputs/visual-input-properties/#border-style)
|
||||
- [Corner Radius](/nodes/shared-props/inputs/visual-input-properties/#corner-radius)
|
||||
- [Box Shadow](/nodes/shared-props/inputs/visual-input-properties/#box-shadow)
|
||||
- [Placement](/nodes/shared-props/inputs/visual-input-properties/#placement)
|
||||
- [Other](/nodes/shared-props/inputs/visual-input-properties/#other)
|
||||
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties/#advanced-html)
|
||||
|
||||
## Outputs
|
||||
|
||||
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##> |
|
||||
|
||||
| Signal | Description |
|
||||
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
|
||||
| <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>:
|
||||
|
||||
@include "../shared-props/outputs/_control-events.md"
|
||||
|
||||
### States
|
||||
|
||||
Apart from triggering <span className="ndl-signal">signals</span> the Dropdown node also notifies of its state through <span className="ndl-data">data</span> outputs:
|
||||
|
||||
@include "../shared-props/outputs/_control-states.md"
|
||||
|
||||
### Visual
|
||||
|
||||
This node supports the following [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties/):
|
||||
|
||||
- [Bounding Box](/nodes/shared-props/outputs/visual-output-properties/#bounding-box)
|
||||
- [Mounted](/nodes/shared-props/outputs/visual-output-properties/#mounted)
|
||||
- [Other](/nodes/shared-props/outputs/visual-output-properties/#other)
|
||||
|
||||
<div className="hidden-props-for-editor">
|
||||
|
||||
@include "../shared-props/inputs/_visual-input-properties.md"
|
||||
|
||||
@include "../shared-props/outputs/_visual-output-properties.md"
|
||||
|
||||
</div>
|
||||
78
nodes/ui-controls/radio-button-group.md
Normal file
78
nodes/ui-controls/radio-button-group.md
Normal file
@@ -0,0 +1,78 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Radio Button Group
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Radio Button Group
|
||||
|
||||
This node is a non visual control used to group <span className="ndl-node">Radio Button</span> nodes. The <span className="ndl-node">Radio Button</span> must be placed in a <span className="ndl-node">Radio Button Group</span> node to function properly.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The output of the <span className="ndl-node">Radio Button Group</span> node is the <span className="ndl-data">Value</span> of the selected <span className="ndl-node">Radio Button</span>. Only one <span className="ndl-node">Radio Button</span> in a <span className="ndl-node">Radio Button Group</span> can be selected at the same time.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Value</span> | The value of the current selected radio button. By changing this value will change which radio button is currently selected. |
|
||||
|
||||
It can be enabled and disabled using the <span className="ndl-data">Enabled</span> input:
|
||||
|
||||
@include "../shared-props/inputs/_enabled.md"
|
||||
|
||||
### Visual
|
||||
|
||||
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties/):
|
||||
|
||||
- [Margin](/nodes/shared-props/inputs/visual-input-properties/#margin)
|
||||
- [Padding](/nodes/shared-props/inputs/visual-input-properties/#padding)
|
||||
- [Alignment](/nodes/shared-props/inputs/visual-input-properties/#alignment)
|
||||
- [Dimensions](/nodes/shared-props/inputs/visual-input-properties/#dimensions)
|
||||
- [Layout](/nodes/shared-props/inputs/visual-input-properties/)
|
||||
- [Style](/nodes/shared-props/inputs/visual-input-properties/#style)
|
||||
- [Placement](/nodes/shared-props/inputs/visual-input-properties/#placement)
|
||||
- [Dimension Constraints](/nodes/shared-props/inputs/visual-input-properties/#dimension-constraints)
|
||||
- [Other](/nodes/shared-props/inputs/visual-input-properties/#other)
|
||||
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties/#advanced-html)
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------- | ------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Value</span> | The current selected radio button value will be output here. |
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Changed</span> | This event is triggered when the **Value** of the radio button group is changed due to user interaction. |
|
||||
|
||||
### Visual
|
||||
|
||||
This node supports the following [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties/):
|
||||
|
||||
- [Bounding Box](/nodes/shared-props/outputs/visual-output-properties/#bounding-box)
|
||||
- [Mounted](/nodes/shared-props/outputs/visual-output-properties/#mounted)
|
||||
- [Other](/nodes/shared-props/outputs/visual-output-properties/#other)
|
||||
|
||||
<div className="hidden-props-for-editor">
|
||||
|
||||
@include "../shared-props/inputs/_visual-input-properties.md"
|
||||
|
||||
@include "../shared-props/outputs/_visual-output-properties.md"
|
||||
|
||||
</div>
|
||||
117
nodes/ui-controls/radio-button.md
Normal file
117
nodes/ui-controls/radio-button.md
Normal file
@@ -0,0 +1,117 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Radio Button
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Radio Button
|
||||
|
||||
This node places a radio button in the visual tree. The <span className="ndl-node">Radio Button</span> must be placed in a <span className="ndl-node">Radio Button Group</span> node to function properly.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You must specify a unique <span className="ndl-data">Value</span> for each <span className="ndl-node">Radio Button</span> node. Only one <span className="ndl-node">Radio Button</span> in a <span className="ndl-node">Radio Button Group</span> can be selected at once.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##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.
|
||||
|
||||
<div className="ndl-image-with-background s">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Inputs
|
||||
|
||||
The main input of the Radio Button node is the <span className="ndl-data">Value</span> input:
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Value</span> | The value for this radio button. The value of the selected radio button in a radio button group will be passed as the **Value** output of the radio button group. All radio buttons in a group should have unique values. |
|
||||
| <span className="ndl-data">Background Color</span> | The background color when the radio button is "checked". |
|
||||
|
||||
It can be enabled and disabled using the <span className="ndl-data">Enabled</span> input:
|
||||
|
||||
@include "../shared-props/inputs/_enabled.md"
|
||||
|
||||
The Checkbox node has a set of label properties that can be set:
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Enable Label</span> | Sets whether the label is visible or not. |
|
||||
| <span className="ndl-data">Text Style</span> | Set an existing text style to this node, or create a new text style from the current properties. |
|
||||
| <span className="ndl-data">Label</span> | A text string that will be shown as the label on the button. |
|
||||
| <span className="ndl-data">Spacing</span> | The spacing between the label and the checkbox. |
|
||||
|
||||
Similarly, it has a set of icon properties:
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------- | --------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Enable Icon</span> | Sets whether the icon is visible or not. |
|
||||
| <span className="ndl-data">Type</span> | Use this to set if you want to use a predefined `icon` or a custom `image` from the project folder. |
|
||||
| <span className="ndl-data">Source</span> | Where to get the icon. |
|
||||
| <span className="ndl-data">Placement</span> | Sets whether the icon should be to the `left` or to the `right` of the _Label_ |
|
||||
| <span className="ndl-data">Size</span> | The width of the icon in `px`. |
|
||||
| <span className="ndl-data">Color</span> | Sets the color of the icon. Only visible if _Type_ is set to `icon`. |
|
||||
|
||||
### Visual
|
||||
|
||||
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties/):
|
||||
|
||||
- [Margin](/nodes/shared-props/inputs/visual-input-properties/#margin)
|
||||
- [Padding](/nodes/shared-props/inputs/visual-input-properties/#padding)
|
||||
- [Alignment](/nodes/shared-props/inputs/visual-input-properties/#alignment)
|
||||
- [Dimensions](/nodes/shared-props/inputs/visual-input-properties/#dimensions)
|
||||
- [Layout, Position](/nodes/shared-props/inputs/visual-input-properties/#-position)
|
||||
- [Style](/nodes/shared-props/inputs/visual-input-properties/#style)
|
||||
- [Border Style](/nodes/shared-props/inputs/visual-input-properties/#border-style)
|
||||
- [Corner Radius](/nodes/shared-props/inputs/visual-input-properties/#corner-radius)
|
||||
- [Box Shadow](/nodes/shared-props/inputs/visual-input-properties/#box-shadow)
|
||||
- [Placement](/nodes/shared-props/inputs/visual-input-properties/#placement)
|
||||
- [Other](/nodes/shared-props/inputs/visual-input-properties/#other)
|
||||
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties/#advanced-html)
|
||||
|
||||
## Outputs
|
||||
|
||||
The main output of the Radio Button node is the <span className="ndl-data">Checked</span> output.
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Checked</span> | A boolean output that is true when this radio button 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. |
|
||||
|
||||
It also features a set of <span className="ndl-signal">signals</span>:
|
||||
|
||||
@include "../shared-props/outputs/_control-events.md"
|
||||
|
||||
### States
|
||||
|
||||
Apart from triggering <span className="ndl-signal">signals</span> the Checkbox node also notifies of its state through <span className="ndl-data">data</span> outputs:
|
||||
|
||||
@include "../shared-props/outputs/_control-states.md"
|
||||
|
||||
This node supports the following [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties/):
|
||||
|
||||
- [Bounding Box](/nodes/shared-props/outputs/visual-output-properties/#bounding-box)
|
||||
- [Mounted](/nodes/shared-props/outputs/visual-output-properties/#mounted)
|
||||
- [Other](/nodes/shared-props/outputs/visual-output-properties/#other)
|
||||
|
||||
<div className="hidden-props-for-editor">
|
||||
|
||||
@include "../shared-props/inputs/_visual-input-properties.md"
|
||||
|
||||
@include "../shared-props/outputs/_visual-output-properties.md"
|
||||
|
||||
</div>
|
||||
36
nodes/ui-controls/repeater-item.md
Normal file
36
nodes/ui-controls/repeater-item.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Repeater Item
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Repeater Item
|
||||
|
||||
This node contains a set of useful utilities for components that have been dynamically created by a <span className="ndl-node">Repeater</span> node.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Signal | Description |
|
||||
| ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Remove Completed</span> | Send a signal, after _Try Remove_ has been sent and any remove animation is completed. This will remove the component from its parent. See _Try Remove_ below to learn more. |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------- | ----------------------------------- |
|
||||
| <span className="ndl-data">Item Id</span> | The object _Id_ for this component. |
|
||||
|
||||
| Signal | Description |
|
||||
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Added</span> | When a new object is added to an array, any connected [Repeater](/nodes/ui-controls/repeater) node will create a new component. This component will get the _Added_ signal. Useful for playing animations or changing states. |
|
||||
| <span className="ndl-signal">Try Remove</span> | When an object is removed from am array, any connected [Repeater](/nodes/ui-controls/repeater) node will remove the component it created for that object. If this signal is connected the _Remove Completed_ input should be used to signal when animations are complete. |
|
||||
94
nodes/ui-controls/repeater.md
Normal file
94
nodes/ui-controls/repeater.md
Normal file
@@ -0,0 +1,94 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Repeater
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Repeater
|
||||
|
||||
This node is used to dynamically insert visual components based on <span className="ndl-data">array</span> data.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The <span className="ndl-node">Repeater</span> node takes data from a Noodl <span className="ndl-data">Array</span> and generates an existing visual component for each item in the <span className="ndl-data">Array</span>. The [Object](/nodes/data/object/object-node) or [Record](/nodes/data/cloud-data/record) associated with the visual component can then be used to populate the component with data.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
More details can be found in the [guide](/docs/guides/data/list-basics).
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Template Type</span> | This input is used to enable or disable dynamic templates. The input can be:<br/><br/>`Explicit`: The same _Component_ will be used for all items.<br/>`Dynamic`: Use code to choose what _Component_ to create for each item. In this case you will have to set the **Script** input. |
|
||||
| <span className="ndl-data">Script</span> | Available when **Template Type** is set to **Dynamic** or after chosing a _Component_ for a **Explicit** template type . Write a script to map input or choose what Component to create for every item (see below). |
|
||||
| <span className="ndl-data">Component</span> | Only available when **Template Type** is set to **Explicit**. Choose a component from your project that will be used as template to dynamically create component instances for each object in the Items array. |
|
||||
| <span className="ndl-data">Items</span> | <##input:items##>An array of [Objects](/nodes/data/object/object-node) or [Records](/nodes/data/cloud-data/record) that will be used to dynamically create components.<##input##> |
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Refresh</span> | <##input:refresh##>By sending a signal to this input all items in the **Repeater** will be removed and then recreated.<##input##> |
|
||||
|
||||
### Script
|
||||
|
||||
Here you can put an script that will do one of two things. Either the script
|
||||
a) Maps the properties of the objects in the **Items** array to component inputs of the template component instances created by the **Repeater** node. This is only available if **Template Type** is set to **Explicit**. (see _Mapping Inputs_ below), or b) Chooses which template component to use for each item in the item array provided to the **Repeater** node. This is only available (and mandatory) if the **Template Type** is set to **Dynamic**. (see _Dynamic Template Types_ below).
|
||||
|
||||
#### Mapping Inputs
|
||||
|
||||
```javascript
|
||||
map({
|
||||
Label: 'Full Name',
|
||||
State: () => object.get('Married') === 'Yes',
|
||||
})
|
||||
```
|
||||
|
||||
By default the mapping is simply directly from object properties to component inputs. But you can use the script to change that mapping, in the example above the _Full Name_ property of the incoming object is mapped to the _Label_ component input. You can also use the script to do conversions of types by providing a function.
|
||||
This could for example be useful when having a generic list item, that's used with various types of data arrays with different data models and properties.
|
||||
|
||||
#### Dynamic Template Types
|
||||
|
||||
By setting **Template type** to **Dynamic** you can use a script to determine which component that should be used for each item in the object **Array**. This could for example be useful if different items should have different visual representation and functionality tied to them.
|
||||
You have to provide a script that determines which template to be used. The script will be called once for each object in the item array provided to the **Repeater** node. The script has has one input variable _item_ which is the current item. This can be used to get properties from the object. The script should set the variable _component_ to the path to the component to use as a template for the item. Note, this is a string containing the path, beginning with a "/", to the component in the Noodl project.
|
||||
|
||||
```javascript
|
||||
let basePath = '/#My Sheet/ListItems'
|
||||
if (item.type === 'header') {
|
||||
component = basePath + '/HeaderItem'
|
||||
} else {
|
||||
component = basePath + '/StandardItem'
|
||||
}
|
||||
```
|
||||
|
||||
In the example above the script looks at the property "type" of each object, and either choses to component "#My Sheet/ListItems/HeaderItem" or "#My Sheet/ListItems/StandardItem" depending on the value.
|
||||
|
||||
## Outputs
|
||||
|
||||
| Mixed | Description |
|
||||
| -------------------- | ------------------------------------------------------------------------- |
|
||||
| **Template Outputs** | An output is created for every signal output of the _Template_ component. |
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Item Id</span> | <##output:itemActionItemId##>This output will be updated every time a signal is sent on any of the component output signals to reflect the **Id** of the related [Object](/nodes/data/object/object-node) or [Record](/nodes/data/cloud-data/record/) that triggered the signal.<##output##> |
|
||||
| <span className="ndl-data">Item Outputs</span> | This group contains component outputs other than signals for the component template of the **Repeater** node. When a signal is triggered by one of the component instances the outputs will be replayed along with the _Item Id_ of the corresponding item. This can be used to store component specific outputs in e.g. objects and variables. |
|
||||
|
||||
<span className="hidden-props-for-editor"><##output:itemOutput-\*##>An output value coming from the list item.<##output##></span>
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Item Signals</span> | This group contains component output signals from the component template of the **Repeater** node. When any of the component instances triggers an output signal, these will be relayed by the **Repeater** node along with the corresponding **Item Id**. |
|
||||
|
||||
<span className="hidden-props-for-editor"><##output:itemOutputSignal-\*##>An output signal coming from the list item.<##output##></span>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user