Skip to content

App Data Flow UI Editor

The Data Flow Editor in App Creator is a visual tool for defining the logic and behavior of your app. It allows you to create complex workflows by connecting nodes in a flow-based interface. Each node represents a specific function or action, and connections between nodes define how data moves through your app.

Layout

Toolbar

The toolbar provides quick access to essential functions for managing your data flow:

  1. Search to search for nodes using its #id or node title
  2. Show All recenter the view to show all nodes at the same time
  3. Toggle grid view show or hide the background grid to help you align your nodes.
  4. Clear all to remove all nodes
  5. Undo to undo the last edition
  6. Redo to redo the last edition
  7. Play to execute the flow
  8. Save to save changes
  9. Reload to reload flow nodes

Canvas (Center Panel)

This is where you design your data flow by arranging and connecting nodes. You can:

  • Add Nodes: Use the context menu to add new nodes.
  • Connect Nodes: Drag and drop from one node's output to another node's input to create connections.
  • Edit Nodes: Click on a node to open its settings or use the settings button on each node.

Nodes represent different functions or actions in your data flow. Each node has:

  • Inputs: Where data enters the node.
  • Outputs: Where data exits the node.
  • Settings Button: Click the settings button (top left) on a node to show additional node settings.

Node Settings

Some nodes have optional inputs that can be hidden by default. Open node settings and select inputs you want to display in the canvas.

Context Menu

Right click on a node or on the canvas to display the context menu.

Canvas Context Menu:

  • List nodes that can be added to your flow.
  • Use the search bar to filter nodes

Node Context Menu:

  • Copy: Copy the selected node. Use the Canvas Context Menu to paste it.
  • Duplicate: Duplicate the selected node. It will be created next to it.
  • Auto Arrange: Auto arrange allow you to reorganize the selected node and all connected nodes so they are properly displayed from left to right (according to connections).
  • Delete: Remove the node from the canvas.
  • Help: Access documentation or help for the selected node.

How to Use the Data Flow Editor

Adding Nodes

Right-click on the canvas and select Add Node from the context menu.

Connecting Nodes

  • Click on an output port of a node.
  • Drag the connection line to an input port of another node.
  • Click again to create the connection.

Editing Nodes

Use displayed controls to edit node settings.

Deleting Nodes

Right-click on a node and click on Delete from the context menu.

Using the Context Menu for Help

Right-click on a node and click on Help from the context menu.

Back to top