Flow Builder - Basic
Flow Builder 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 Builder 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.
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 Template node.
Your flow should looks like that:
Now you need to deploy your flow to make it available, to do that click on Deploy button in the Header of the Flow Editor
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 API1.
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
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: {{Api1.data}}
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.
No Comments