Create a flow
Uiflow's proprietary visual language Flowlang, enables application developers to visually construct "flows" by connecting an event to an action (e.g. clicking a button to set a text label). Developers create flows to define the relationships between application components.
To build a flow:
Logic flows enable you to add and connect Design and Logic components to add interactivity to your app.
To add a new logic flow to your application:
- 1.Click Logic to enter the Logic view.
- 2.Select the layers icon to open the Explorer panel.
- 3.Under the Logic Flows section, click the Add logic flow icon. This adds a new logic flow to your application.
Flows require a mix of Design and Logic components. The following sections explain how to:
In the Logic view, design components are available in the Libraries panel, under the Design References section. This section includes all Design components that you added to your application in the Design view.
Note: In the Logic view, you cannot access Design components that are not in your application.
To add Design components to your logic flow:
- 1.Click the plus icon to open the Libraries panel.
- 2.In the Design References section, locate the Design component(s) you want in your logic flow.
- 3.Drag-and-drop the component(s) into the Logic panel.
In the Logic view, the Libraries panel contains all available Logic components.
To add Logic components to your logic flow:
- 1.Click the plus icon to open the Libraries panel.
- 2.Locate the component(s) you want to add.
- 3.Drag-and-drop the component(s) into the Logic panel.
After you add components to your logic flow, connect their nodes to build interactivity.
To create a connection, drag-and-drop an event node from one component to the action node of another component.
To remove a connection, either:
- Double-click the dashed line.
- Right-click one of the connected nodes and select Remove Connections. This removes all connections to the node.
Once you complete your flow, use the Preview panel to test your application's interactivity. In this example, the flow sets the Text component's label to the Text Input's value when the submit button is clicked.
