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

Initial commit

Browse Source 
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
2023-09-05 12:08:55 +02:00
commit 53f0d6320e
2704 changed files with 76354 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
nodes/component-utilities/component-children.md Normal file
View 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">
![](/nodes/component-utilities/component-children/component-children.png)
</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
View 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">
![](/nodes/component-utilities/component-inputs/ci_node.png)
</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">
![](/nodes/component-utilities/component-inputs/ci_node2.png)
</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">
![](/nodes/component-utilities/component-inputs/component-inputs.png)
</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">
![](/nodes/component-utilities/component-inputs/component-inputs-add.png)
</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
View 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">
![](/nodes/component-utilities/component-object/component-object.png)
</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">
![](/nodes/component-utilities/component-object/component-object-props.png)
</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
View 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">
![](/nodes/component-utilities/component-outputs/co_node1.png)
</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">
![](/nodes/component-utilities/component-outputs/co_node2.png)
</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">
![](/nodes/component-utilities/component-outputs/component-outputs.png)
</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">
![](/nodes/component-utilities/component-outputs/component-output-ports.png)
</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
View 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">
![](/nodes/component-utilities/parent-component-object/parent-component-object.png)
</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
View 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">
![](/nodes/component-utilities/set-component-object-properties/set-component-object-properties.png)
</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##> |

35
nodes/component-utilities/set-parent-component-object-properties.md Normal file
View File

@@ -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">
![](/nodes/component-utilities/set-parent-component-object-properties/set-parent-component-object-properties.png)
</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##> |