Flows are comprised of Nodes that perform actions and logic, and Connections that tie them together. The "output" of a flow is either to perform an action in your app, such as navigation, or to set data that can be consumed by your Layouts.

The Start Node and Schema

When you create a Flow, you are automatically provided with a single element: the Start Node. This is the starting point of your Flow—the logic flow begins here and follows the paths you created with Connections to the various Nodes you add.

Renaming a Flow

• Click on the Start Node you want to rename to select it.
• Click on the Properties tab in the Right Sidebar.
• Provide a new name in the Flow Name text input.

Flow Schema

You can use the Schema property to describe the possible inputs to your Flow. For example, if you are building a Flow to fetch product data from an API, you’ll need to specify a product identifier.

• Click on the Start Node you want to edit.
• On the right side of the screen click on the Settings cog.
• Indicate the Execution Context (by default this will set to "Client Only").
• Click Edit Flow Inputs and provide the product identifier.

Working with Nodes

To add a new Node to your Flow:

1. Click on the Nodes tab on the Left Sidebar.
2. Click on the desired Node and drag it onto the Canvas.

📍📍📍 Note 📍📍📍

The Node will not be invoked as part of your Flow until you add a Connection to it.

Renaming Nodes

You can change the names of the Nodes on the Canvas so it’s easier to tell what each Node does within a Flow.

• Click on the Node to select it.
• Click on the Properties tab in the Right Sidebar.
• Provide a new name in the Node Name text input.

Seen here, descriptive names will ensure users understand the nodes and their purposes.

Connecting Nodes

A Flow will be executed by following a path of execution between Nodes. Connections are represented by lines that connect one Node to another.

• To add a Connection
• 1. Hover your mouse over the right side of a Node to highlight its connection point.
  2. Drag to the connection point on the left side of another Node.
  3. If successful, a line will be drawn that connects the two Nodes.
• To delete a Connection
• 1. Click on a Node to select it.
  2. Open the Properties tab in the Right Sidebar.
  3. Click on the trash can icon to delete the Connection.

Canvas Navigation

Zooming the Canvas

• Trackpad: Use two fingers and slide up to zoom in and slide down to zoom out.
• Mouse: With your cursor in the Canvas (not panels), scroll up to zoom in and scroll down to zoom out.

Moving the Canvas

• Hold the space bar, click, and drag to your desired position.