Code

The Code component allows you to write custom logic in your workflow using JavaScript or TypeScript. Unlike other components that have fixed functionalities, the Code component provides flexibility to define custom behavior and operations through code. You can access and manipulate various elements within the workflow by utilizing the context, which provides a structured representation of the workflow's state and variables.

Restrictions

Code Length: The maximum code length is set at 400K characters.
Execution Time Limit: There is an execution time limit of 1 second, with error handling for timeouts.

Auto-completion in Code-Nodes Editor

The Code Node includes a powerful IntelliSense feature that offers auto-complete suggestions for various objects and actions. This makes coding more efficient and helps reduce errors. When using the context object in your code, you'll get auto-complete suggestions based on the current context, making it easier to access and use relevant information.

Steps to use Code Component

Add Code Component to Canvas:
To add the Code components to the canvas, you have two options:
1. Navigate through the components menu in the side panel, and drag the Code component onto the canvas of your workflow.
2. Click the plus icon, which opens a window allowing you to search for various components and connectors. Search for the Code component and select it.
Each component will be labeled with a unique identifier (e.g., code_1) for easy reference if multiple Code components are used.
Access Code Component Settings:
Click on the Code Component to access its settings. This is where you define the criteria for decision-making.
Choose a Language: Select the syntax for your code: JavaScript or TypeScript. Once selected, you can begin typing your code directly into the editor.
Write Custom Logic:
Use the code editor to write your custom logic. You can use the context object to access the values of variables and other components within your workflow.
The context object is crucial for accessing data and variables from other nodes within the workflow. The context panel displays the workflow’s composition in JSON format, showing steps and associated variables. To use context in your code, reference the context object followed by the steps and specific component data.
Code Snippet Example:
Here is an example of a code snippet that accesses variables from a node and formats the values into a JSON string:
```
// Accessing and formatting the values
const var1Value = context.steps["variables_1"].componentData;

// Creating a JSON object with both values
const jsonData = {
  var1Value: var1Value,
};

// Converting JSON object to string using JSON.stringify
const jsonString = JSON.stringify(jsonData);

console.log(jsonString);
// Output: {"var1Value":{"Color":"Red","Shape":"Heart","Number":"1"}}
```
To enhance your coding experience, you can resize the editor vertically, which is particularly useful when working with long blocks of code. This flexibility ensures that you can view and edit your code more comfortably without constantly scrolling.
When changing focus to a different node, you will be prompted to save or discard changes to the current node with the following message: “You have unsaved changes. Would you like to save or discard these changes?”
Test
Use the "Test" button to execute the code and view the results within the Code component settings panel. Note that the "Test" button will only be enabled when the editor contains code.
View Output: When you execute the code, you can view the output within the Code component settings panel. You can choose your preferred view by clicking the ellipsis on the output section. The "Bottom" option displays the output at the bottom of the editor, while the "Right" option displays the output to the right of the editor.
Additionally, you can resize the editor and output panel horizontally. This flexibility ensures that you can view and edit your code more comfortably without constantly scrolling, enhancing your productivity and coding experience.
Submit After writing your code, click the "Submit" button to save your changes.
Hover for Information:
Hover over the Code component on the canvas to view a tooltip with additional information.
Execute the Code Component:
Hover your mouse over the Code Component to display the action buttons then click the play button to execute the step. The execution result can be viewed in the logs panel.

NOTE:

The Code component is highly flexible, allowing you to define custom operations that are not possible with standard components.
Use the context object to access and manipulate data from other nodes within your workflow.
The context panel provides a detailed view of the workflow’s composition, showing the steps and the variables associated with each node.
Regularly test your code to ensure it behaves as expected within the workflow.

Last updated 4 months ago

Auto-completion in Code-Nodes Editor

Steps to use Code Component

Add Code Component to Canvas:

To add the Code components to the canvas, you have two options:

Navigate through the components menu in the side panel, and drag the Code component onto the canvas of your workflow.
Click the plus icon, which opens a window allowing you to search for various components and connectors. Search for the Code component and select it.

Each component will be labeled with a unique identifier (e.g., code_1) for easy reference if multiple Code components are used.

Access Code Component Settings:

Click on the Code Component to access its settings. This is where you define the criteria for decision-making.

Choose a Language: Select the syntax for your code: JavaScript or TypeScript. Once selected, you can begin typing your code directly into the editor.

Write Custom Logic:

Use the code editor to write your custom logic. You can use the context object to access the values of variables and other components within your workflow.

The context object is crucial for accessing data and variables from other nodes within the workflow. The context panel displays the workflow’s composition in JSON format, showing steps and associated variables. To use context in your code, reference the context object followed by the steps and specific component data.

Code Snippet Example:

Here is an example of a code snippet that accesses variables from a node and formats the values into a JSON string:

// Accessing and formatting the values
const var1Value = context.steps["variables_1"].componentData;

// Creating a JSON object with both values
const jsonData = {
  var1Value: var1Value,
};

// Converting JSON object to string using JSON.stringify
const jsonString = JSON.stringify(jsonData);

console.log(jsonString);
// Output: {"var1Value":{"Color":"Red","Shape":"Heart","Number":"1"}}

To enhance your coding experience, you can resize the editor vertically, which is particularly useful when working with long blocks of code. This flexibility ensures that you can view and edit your code more comfortably without constantly scrolling.

When changing focus to a different node, you will be prompted to save or discard changes to the current node with the following message: “You have unsaved changes. Would you like to save or discard these changes?”

Test

Use the "Test" button to execute the code and view the results within the Code component settings panel. Note that the "Test" button will only be enabled when the editor contains code.

View Output: When you execute the code, you can view the output within the Code component settings panel. You can choose your preferred view by clicking the ellipsis on the output section. The "Bottom" option displays the output at the bottom of the editor, while the "Right" option displays the output to the right of the editor.

Additionally, you can resize the editor and output panel horizontally. This flexibility ensures that you can view and edit your code more comfortably without constantly scrolling, enhancing your productivity and coding experience.

Submit After writing your code, click the "Submit" button to save your changes.

Hover for Information:

Hover over the Code component on the canvas to view a tooltip with additional information.

Execute the Code Component:

Hover your mouse over the Code Component to display the action buttons then click the play button to execute the step. The execution result can be viewed in the logs panel.

NOTE:

The Code component is highly flexible, allowing you to define custom operations that are not possible with standard components.
Use the context object to access and manipulate data from other nodes within your workflow.
The context panel provides a detailed view of the workflow’s composition, showing the steps and the variables associated with each node.
Regularly test your code to ensure it behaves as expected within the workflow.