Logic flows from a code perspective
Flowlang is an intuitive visual language based around component blocks and node connections. While this may seem distinct from traditional programming, many of Flowlang's functionalities map to code.
UI components in Flowlang have visual characteristics and often map to
HTML
elements.For example, you may format a standard
HTML
button similar to this:<button type="button" onclick="alert('Submitted!')"> Submit </button>
In Uiflow, that same
HTML
button exists as the Button component. To incorporate the component into your app, simply drag-and-drop the Button component into your project and connect the onClick node to the component you want to invoke.
With conventional programming, you change aspects like fonts, labels, and formats with a list of attributes or
CSS
. In Uiflow, you open the Styles tab to configure the component's visual settings.
Application logic in Flowlang includes components that often map to common functions.
The following sections demonstrate how major areas of programming logic translate to Flowlang:
Math components in Uiflow are similar to arithmetic operators in
JavaScript
. A simple addition calculation may look like this in JavaScript
:var num1 = 10;
var num2 = 30;
var sum = num1 + num2
In Uiflow, you perform the same operation with the Add component. The Add component's input nodes take in the numbers to add, and the result outputs the sum. You then connect the inputs to other components (e.g. Text Input components) which provide the values.

You can then connect the output node to another component that uses the result (e.g. a Text component that displays the value).

Uiflow's looping components simplify the logic of iterating over collections. For example, a
for
loop in JavaScript
may look similar to this:for (let i = 0, len = list.length, text = ""; i < len; i++) {
text += list[i] + "<br>";
}
To implement similar logic in Uiflow:
- 1.Drag-and-drop a For Each component into your application.
- 2.Connect it to a collection (e.g. Array component).
- 3.Connect the item output node to a Constructor that instantiates an object for each element in the array.
This example constructs a new Text instance for each item in the connected array.

Object definitions in Uiflow are similar to their programming counterparts. In
JavaScript
, an object may look similar to this:const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
}
To define an object in Uiflow:
- 1.Drag-and-drop the Object component into the application.
- 2.Add
JSON
data. - 3.Define fields and values in
JSON
format.
Note: Objects can also dynamically get fields and values from databases via API requests.

In
JavaScript
, functions are invoked in the order specified in code. In this example, the phrase First action
logs before Second action
because of the order in which they are written:console.log("First action")
console.log("Second action")
In Uiflow, you can invoke multiple calls in order using the Sequence component. In this example, a Button component's onClick event uses a Sequence component to write two strings to the console. The Sequence component first invokes a Console component to log
First action
via call 1 before invoking call 2 to log Second action
.