Flow Editor - Basic
Flow Editor gives you the ability to design powerful workflows that can integrate a wide range of external systems and create complex logic for your application. In a single workspace, you can have multiple Flow Editor instances which you can combine or make as separate microservices.
As a base for Flow Editor is used open-source system Node-red. Node-RED is a visual tool created by IBM Emerging Technology and the open source community for developing APIs, hardware devices (IoT) and different online services. You can create complex flow with wide range of nodes and modules (3100+) and extend flow with any Node.js packages available in public repository (225,000) or create your custom node.
Creating new Flow service
To create new Flow Editor you need to open Service manager and click on
+ button on the row with name NODERED after that you will see the modal window in which you can write the name for the new service and select a version.
After all fields are completed click on Create NodeRed button and UBOS platform will start the process of establishing a new service for you, on average it may take 15-20 sec. until the service will be available for you, before that service will be in pending mode and you can find it in the NodeRed drop down on the Service manager
You will need to click on update status button in the service row to check if it already available.
After new service became available, to open it you need to click on the name of the service and it will be opened in the Main Work Zone.
Once the service is opened you can start work on designing any flow and integration for your app.
Flow Editor Layout
Basic Layout of Flow Editor consist of 4 main areas:
- Header - Here you can found different options of how to deploy your flow and main menu of Flow Editor
- Palette - Contains all available nodes to use
- Workspace - Area where flows are created
- Sidebar - Contains tabs that provide a wide range of useful tools within the editor
Creating first HTTP Endpoint
In the beginner tutorial we will create a simple HTTP Endpoint that will return to us static text "Hello World!". Let's drag some nodes onto the workspace from the palette.
First you need to find
HTTP In node, drag it onto the workspace and open node settings by double click
HTTP In node will listen for requests. In settings window you need to select Method it will be GET method and set a name of the endpoint to /hello in the URL field, after that click on the Done button in the settings window.
Next let's find a
Template node, drag it onto the workspace and connect it with the
HTTP In node.
To set the static text that endpoint will return you need to open settings of the
Template node (double click on the node) and change the text in the Template field to "Hello World!", to save your changes click on the Done button.
At the end our Flow need to reply to request with the data from
Template node, to do that let's find
HTTP Response node and connect it to the
Connecting API to HTTP Endpoint
To connect API to HTTP Endpoint let's switch the editor to UI Editor, you can do that by clicking on the tab on top of the Main Work Zone. In UI Editor you need to open a list of available APIs for the current page by clicking on the APIS row and clicking on
API1 from the list to open the API pane.
In case you don't see API1 in the list, you can create a new one by clicking on the
+ button on the APIS row
In the API pane, you need to select Flow services "flow1" to which you want to connect the current API and in the next dropdown select HTTP Endpoint with the name "/hello" that we have created. After that system will automatically generate a URL to HTTP Endpoint on your Flow.
To test your HTTP Endpoint click on the Run button and you should see the response in Response body field.
To close the API pane click on Back button
Displaying data on UI
To display data on UI we need to have 2 widgets, one widget will be a
Button widget that will run the
API1, and the second will be the
Input widget which will display the response.
You can add a new
Button widget to the Page editor or use some that already exist. Let's open the Widget Settings window of the
Button widget and at the bottom of the window will be setting section Actions and property with name onClick, click on that field and you will see a list of available actions.
In our case we need action Call An API, click on it and you will see the list of available APIs. From the list choose our API that we have created
After you choose
API1 you should see that the onClick property has changed. So after that changes when you will click on that button it will run our
API1 which will make a HTTP Request to our
Now let's display response data from
API1 in the
Input widget, to do that you need to drag new
Input widget from Widget pane to Page editor and open Widget Settings window.
In the Widget Settings window find the Default Text property, in it you can write static text or add dynamic data. We need to add a dynamic that will show response data from
API1. To do that you need to write a command inside the Default Text property, remember that each command should be between
The command will look like that:
Now let's deploy the UI application and check the changes that we have made. Try to click on the button that you have configured and look at what data will appear in the input that should display data.