mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 23:02:54 +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
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.
|
||||
Reference in New Issue
Block a user