Skip to main content

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   

image-1639574762224.gif

You will need to click on update status button in the service row to check if it already available.

image-1639580611955.gif

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

image-1639584272642.gif

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.

image-1639584632487.png

Next let's find a Template node, drag it onto the workspace and connect it with the HTTP In node.

image-1639585457168.gif

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.

image-1639585595666.png

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 Template node. 

Your flow should looks like that:image-1639585916872.pngNow you need to deploy your flow to make it available, to do that click on Deploy button in the Header of the Flow Editor

image-1639586036564.png

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

image-1639587132160.gif

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.

image-1639587502627.png

To test your HTTP Endpoint click on the Run button and you should see the response in Response body field.

image-1639588004288.png

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.

image-1639589228755.gif

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 API1.

image-1639589470420.png

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 Flow1

image-1639589622347.png

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.

image-1639590068401.gif

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: {{Api1.data}}

image-1639590761328.png

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.

image-1639592293242.gif