Skip to main content

Introduction

The "Integrations" module allows you to easily combine APIs and online services through visual programming. The module provides a user-friendly interface where you can drag and connect node blocks, creating the logic of your applications visually. This simplifies development, making it accessible even for those who are not professional programmers, and significantly speeds up the process of integrating various systems:

Key Elements of the Integrations Module Interface​

Before you start creating your first flows and integrations, let's take a look at the interface. Understanding how the main elements are structured will simplify your work and help you get accustomed more quickly.

1. Left Panel with Nodes​

The left panel is where you will find all available nodes. These are the elements from which you will build your data flows.

To use a node, simply drag it onto the workspace. All nodes have their specific purposes and can be configured individually.

Examples of Nodes:

  • Inject: allows you to manually send data into the flow.
  • Debug: outputs data and messages to the debug menu.
  • Function: allows you to write custom code in JavaScript.
  • Template: used to create text or HTML templates.

2. Tabs​

Tabs are located above the workspace and allow you to switch between different projects or data flows. This is convenient if you are working on multiple integrations simultaneously or want to separate logic into several flows.

  • Creating New Tabs: You can add a new tab by clicking the plus button +. Each new tab represents a separate data flow, helping you better organize your project.
  • Renaming Tabs: To rename a tab, double-click its name and enter a new name. This is especially useful if you have many tabs and want to clearly understand what each one contains.
  • Deleting Tabs: You can delete a tab if you no longer need it. However, be careful not to lose important data.

Example: If you are working on a payment integration, you can create separate tabs for each service.

3. Workspace​

The workspace is the central part of the interface where you build and edit your data flows.

  • Placing Nodes: After you drag a node from the left panel, it will appear in the workspace. Here you can move it, connect it to other nodes, and create the logic of your flow.
  • Connecting Nodes: To connect nodes, simply drag a line from the output of one node to the input of another. This way, data will be passed through the flow from one node to another.
  • Managing Flows: The workspace allows you to create multiple data flows, which helps organize complex integrations and logic.

Tip: You can zoom in and out of the workspace using your mouse or touchpad to see all the details of your flow.

4. Node Editing Form​

When you double-click on a node in the workspace, the node editing form opens. This is a window where you configure the behavior of the node.

  • Settings Fields: Each node has its parameters that you can edit. For example, in the Function node, you can write and edit code.
  • Saving Changes: After editing the node, click the Submit button to save the changes.

Example: In the Function node, you can write JavaScript code that transforms data. In the Template node, you can create a template that dynamically inserts data.

5. Debug Panel​

The debug panel is located on the right and is used to view output data and messages from the Debug node.

  • Viewing Messages: When you run the data flow, the Debug node sends messages to the Debug menu. This helps you see what is happening in your flow and check the correctness of the data.
  • Filtering Messages: You can filter messages to see only the data you need. This is convenient when you have a lot of output from different Debug nodes.
  • Clearing the Debug Window: Use the clear button to remove old messages and focus on new data.

Example: If you are using the Function node to perform calculations, add a Debug node at the end of the flow to check if your code processes the data correctly.

6. Control Buttons​

Full-Screen Button​

  • This button allows you to expand the Integrations module interface to full screen, which is useful when working on complex data flows or when demonstrating the project on a large monitor.
  • By clicking this button, you will have more space for editing and can better see all the details of your flows.

Publish Button​

  • This is the main button that saves and deploys all changes made to your data flows, making them active. After you have added or modified nodes, be sure to click this button for your settings to take effect.