What This Screen Does
This is the visual builder where you design the steps of a workflow template. Think of it like a flowchart maker — you drag and connect blocks (called “nodes”) to describe what should happen automatically when a workflow is triggered. For example, you could build a workflow that sends a welcome email three days after a new member signs up. Each block represents an action, a condition, or a piece of information, and the lines between them show the order things happen in.
How to Get There
Open the dashboard.
In the left-hand menu, click Workflow Templates.
Click on an existing workflow template to open it, or create a new one.
You are now on the Workflow Template Builder screen.
Step-by-Step Guide
1. Understand the Layout
The screen is split into two areas when you are in edit mode:
Left side (canvas): A large interactive flowchart area where your workflow nodes and connections are displayed.
Right side (node panel): A sidebar listing all the node types you can add to your workflow.
If you are not in edit mode, the canvas takes up the full width and the node panel is hidden. You can only view the workflow, not change it.
2. Navigate the Canvas
Pan: Click and drag on an empty area of the canvas to move around.
Zoom: Use the scroll wheel or the + / − buttons on the controls overlay (bottom-left of the canvas) to zoom in and out.
Fit to view: Click the fit view button on the controls overlay to automatically zoom and center so all nodes are visible.
The canvas background is a neutral colour to help your nodes stand out.
3. Browse Available Node Types
The right-hand panel organises nodes into collapsible categories. Click a category header to expand or collapse it. The available node types include:
Node Type | What It Does |
Trigger | The starting point of a workflow. Defines what event kicks things off (e.g. a new member signs up). |
Plain | A simple action step with no extra configuration. |
Text | A step that includes a text value you can customise. |
Double Text | A step with two text fields for more detailed configuration. |
Number | A step that requires a numeric value (e.g. “wait 3 days”). |
Day | A step that lets you pick a day of the week. |
Time | A step that lets you set a specific time. |
Single Select | A step where you choose one option from a dropdown. |
Autocomplete | A step with a searchable dropdown for selecting a value. |
Multiple Autocomplete | Like Autocomplete, but you can pick more than one value. |
Recipient Autocomplete | A searchable dropdown specifically for choosing who receives something (e.g. an email recipient). |
Webhook | A step that calls an external URL when reached. |
Placeholder | A blank step you can use as a placeholder while designing. |
4. Add a Node to the Canvas
In the right-hand panel, find the node type you want.
Click the node entry in the list.
The new node appears on the canvas, ready to be positioned and configured.
Node limit: You can add up to 50 nodes per workflow template. If you try to add more, a warning dialog will appear telling you the limit has been reached.
5. Configure a Node
Click on a node on the canvas to select it.
Depending on the node type, you will see fields to fill in directly on the node (such as text inputs, dropdowns, number fields, or time pickers).
Fill in the required information for each node. The fields change based on the node type (see the table in Step 3).
6. Connect Nodes Together
Every node has small connection handles (dots on the edges of the node).
To connect two nodes, click and drag from one node’s handle to another node’s handle.
A line (edge) will appear between them, with an animated dashed style to show the direction of flow.
Connections tell the system the order in which steps should execute.
7. Rearrange Nodes
Click and drag any node to move it to a new position on the canvas.
The connections (edges) will follow automatically.
Arrange your nodes so the flow reads logically from top to bottom or left to right.
8. Delete a Node or Connection
Click on a node or edge to select it.
Press the Delete or Backspace key on your keyboard.
Note: Some nodes are marked as non-deletable (for example, the main trigger node). If you try to delete one of these, nothing will happen — the system protects essential parts of your workflow.
9. Save Your Workflow
Changes to nodes and connections are automatically synced to the system as you work.
Every time you add, move, edit, or connect a node, the updated state is saved in the background.
There is no separate “Save” button on the builder canvas — your work is preserved in real time.
What Happens Behind the Scenes
You add, move, or edit a node on the canvas
|
v
React state updates with the new node/edge data
|
v
Change detection compares canvas state to stored template
|
v
If differences are found:
Redux action: setNodes({ nodes }) or setEdges({ edges })
|
v
Template state in the Redux store is updated
|
v
Parent component (edit/create view) can persist
the updated template to the server
|
v
Canvas re-renders with the latest state---You connect two nodes:
|
v
onConnect fires with the new connection
|
v
New edge is added to the edges array
|
v
Redux action: setEdges({ edges })
|
v
Animated edge appears on the canvas
Troubleshooting
“I cannot add any more nodes to the canvas”
The builder has a limit of 50 nodes per workflow template.
If you have reached this limit, a warning dialog will pop up when you try to add another node.
To continue, delete nodes you no longer need, or simplify your workflow by combining steps.
“The right-hand panel with node types is not showing”
The node panel only appears when the builder is in edit mode.
If you opened the workflow in a read-only or preview mode, the panel will be hidden.
Go back to the workflow template list and open the template for editing.
“I cannot delete a node”
Some nodes are protected and cannot be deleted (for example, the trigger node at the start of the workflow).
This is by design — every workflow needs at least a starting point.
If you want to change the trigger, edit the node instead of deleting it.
“My connections (lines) disappeared after refreshing”
Node and edge changes are synced to the Redux store in real time, but they must be saved to the server by the parent screen (the workflow template edit view).
Make sure you complete the full save process on the edit screen before leaving.
If you navigated away without saving, your connection changes may have been lost.
“I connected two nodes but nothing seems to happen”
Connections on the builder canvas define the order of steps. They do not execute immediately.
The workflow will only run when it is activated and the trigger event occurs.
Double-check that your nodes are configured correctly — an empty or misconfigured node will not do anything when the workflow runs.
“Nodes are overlapping and the canvas looks messy”
Click and drag nodes to rearrange them manually.
Use the fit view button on the controls overlay (bottom-left corner) to auto-zoom so all nodes are visible.
Try spacing nodes vertically to create a clear top-to-bottom flow.
“I do not see the controls (zoom, fit view) on the canvas”
The controls are in the bottom-left corner of the canvas area.
If your browser window is very small, try scrolling down or making the window larger.
Make sure JavaScript is enabled and the page has fully loaded.
“The workflow runs but skips some steps”
Check that every node is properly connected to the next one with an edge.
A node that is not connected to anything will be ignored when the workflow executes.
Open the builder and look for any nodes floating on their own without lines leading to or from them.