Skip to main content

​
Overview

Transitions are the connectors between workflow nodes. They define how users move from one screen to another and can trigger automations during navigation.

Navigation

Define paths between screens

Button Labels

Transition names become button text

Location Capture

Optionally collect GPS during navigation

Automations

Trigger actions on transition

​
What is a Transition?

A transition connects two nodes in your workflow. When a user taps the transition button on a screen, they move to the connected screen. 
┌────────────┐                    ┌────────────┐
│  Screen A  │ ──── NEXT ────────>│  Screen B  │
└────────────┘    (transition)    └────────────┘

​
Transition Properties

PropertyDescription
NameButton label shown to users (e.g., “NEXT”, “Submit”, “Complete”)
From NodeSource screen node
To NodeDestination screen node
Collect LocationWhether to capture GPS coordinates during transition
AutomationsActions to execute during the transition

​
Creating a Transition

1

Select Source Node

In the workflow builder, click on the screen node you want to connect from
2

Drag Connection

Right-click and drag from the blue connection point to another node
3

Release on Target

Drop the connection on the target node’s blue connection point
4

Configure

Click on the transition line to configure its properties

​
Transition Names

The transition name appears as the button label on the mobile app. Choose clear, action-oriented names:
Good NamesAvoid
SubmitNext
Complete InspectionContinue
Mark as DeliveredOK
Take PhotoProceed
New transitions are named “NEXT” by default. Always rename them to be descriptive.

​
Location Collection

Enable location collection to capture the user’s GPS coordinates when they tap the transition button. Use cases:
  • Verify delivery location
  • Track field worker movements
  • Geo-stamp form submissions
1

Select Transition

Click on the transition in the workflow builder
2

Enable Location

Toggle Collect User Location to ON
3

Save

The location will be captured automatically during navigation

​
Multiple Transitions

A screen can have multiple outgoing transitions, giving users choices: 
                    ┌─── Approve ───> Approved Screen
                    │
┌────────────┐     │
│  Review    │ ────┼─── Reject ────> Rejected Screen
└────────────┘     │
                    │
                    └─── Hold ──────> On Hold Screen
Each transition appears as a separate button on the mobile app.

​
Transition Automations

Transitions can trigger automations when users navigate. See Automation Types for details on:
  • Screen Transition Automations: Run validations, call APIs, update data
  • Automations execute after the user taps but before the next screen loads

​
For AI Agents

​
Transition Structure

interface Transition {
  transitionId: string;
  name: string;
  displayName: string;
  fromNodeId: string;
  toNodeId: string;
  collectLocation: boolean;
  automations: TransitionAutomation[];
}

interface TransitionAutomation {
  automationId: string;
  validation?: Validation;
  actionBlocks: ActionBlock[];
}

​
API: Get Workflow Transitions

GET /api/v1/workflows/:workflowId
Authorization: Bearer {token}
Response includes transitions array with all transition configurations.

​
UI Components

ComponentLocationPurpose
TransitionEditor/src/views/workflows/TransitionEditor/Transition configuration
TransitionLine/src/views/workflows/canvas/Visual transition connector
AutomationPanel/src/views/workflows/automations/Transition automation config

​
Event Tracking

// Transition events
WorkflowEvents.TRANSITION_CREATED
WorkflowEvents.TRANSITION_UPDATED
WorkflowEvents.TRANSITION_DELETED
TaskEvents.TRANSITION_EXECUTED
TaskEvents.TRANSITION_LOCATION_CAPTURED