Workflow Designer¶

The Workflow Designer is a full-featured visual editor for building and configuring workflow steps. It provides a canvas for arranging steps, a toolbar with editing tools, version control, validation, test runs, and real-time collaborative editing.

Overview¶

The designer provides:

• A visual canvas showing workflow steps and connections
• A toolbar with undo/redo, zoom, auto-layout, export/import, validation, and more
• A configuration panel for editing step properties and parameters
• Conditional branching with decision-tree logic based on step outputs
• Workflow-level variables for passing data between steps
• Version control with revision history and drafts
• Real-time collaborative editing with presence indicators
• Validation, test runs, and review submission

Accessing the Designer¶

Open the designer from:

• Workflow Wizard - Step 4 of the creation wizard
• Workflow List - Click the Designer button on any workflow

Automation & Workflows → Workflows → [Select workflow] → Designer

Designer Layout¶

The designer uses a two-column layout with a toolbar header.

Screenshot: The full workflow designer showing toolbar, canvas, and configuration panel

Toolbar¶

The toolbar runs across the top of the canvas and provides quick access to all designer tools.

Screenshot: The designer toolbar with save, undo/redo, zoom, validation, and more

Canvas¶

The canvas is the main working area where you arrange workflow steps and draw connections between them.

• Step cards represent individual workflow steps
• SVG arrows show connections and execution flow
• Steps snap to a 20px grid when dragged
• Right-click opens a context menu with copy, paste, and delete options
• Connection ports appear at the bottom of each step for creating links

Configuration Panel¶

The right-hand panel shows contextual content depending on what you're doing:

• Step Editor - Edit step properties and parameters (when a step is selected)
• Add Step - Create a new step (when "New" is clicked)
• Validation Results - Show errors and warnings (when validation is run)
• Version History - Browse and restore previous versions
• Test Run - Configure and execute test runs

Toggle the panel with the Open Editor button in the toolbar. The canvas expands to full width when the panel is hidden.

Presence Bar¶

Below the canvas toolbar, a presence bar shows other users currently editing the same workflow. Each user appears as an avatar with their name, along with a count of active connections.

Working with Steps¶

Adding a New Step¶

There are several ways to add a step:

From the configuration panel:

1. Click the New button in the configuration panel header
2. The panel clears ready for input
3. Configure the step (see Configuring Steps)
4. Click Save

The step appears on the canvas below the lowest existing step.

From the canvas context menu:

• Right-click on an empty area of the canvas and choose Add Step Here to create a step at the clicked position
• Right-click on an existing step and choose Add Next Step to create a new step connected below it. The new step is automatically linked to the step you right-clicked on.

Selecting a Step¶

Click any step card on the canvas to select it. The step's configuration loads in the right panel. Use keyboard navigation:

• Tab or J - Select next step
• Shift+Tab or K - Select previous step

Deleting a Step¶

Delete a step using any of these methods:

• Hover over a step and click the trash icon
• Select a step and press Del or Backspace
• Right-click a step and choose Delete Step from the context menu

You'll be asked to confirm before the step is removed.

Reordering Steps¶

Drag a step by its header to reposition it on the canvas. Steps snap to a 20px grid. Use keyboard shortcuts for precise positioning:

• Up / Down / Left / Right - Move 20px
• Shift+Up / Shift+Down / Shift+Left / Shift+Right - Move 100px

Copy, Paste, and Duplicate¶

Demo: Using the context menu to copy and paste steps

Copy a step:

• Select a step and press Ctrl+C
• Or right-click a step and choose Copy Step

Paste a step:

• Press Ctrl+V to paste at the bottom of the canvas
• Or right-click an empty area of the canvas and choose Paste Step

Duplicate a step:

• Right-click a step and choose Duplicate

Pasted and duplicated steps get a "(Copy)" suffix in their name. All outgoing connections are cleared - you'll need to reconnect the new step.

Context Menu¶

Right-click on the canvas for quick actions.

Screenshot: The right-click context menu on a workflow step

On a step:

On empty canvas:

Configuring Steps¶

When you select or create a step, the configuration panel shows the step editor.

Screenshot: The step configuration panel with all fields

Basic Properties¶

Step Types¶

Selecting an Action¶

1. Choose the Step Type (usually "Action")
2. Select the Integration (e.g., Microsoft 365)
3. Choose the Action from the dropdown

The available actions depend on the selected integration.

Parameters¶

Each action has parameters that need to be configured.

Screenshot: The parameters table showing parameter configuration

The parameters table shows:

Step cards on the canvas show a preview of the first 3 parameters as coloured badges, with a "+N more" indicator if there are additional parameters.

Parameter Types¶

Optional Steps¶

Check the Optional Step checkbox to make a step optional. Optional steps:

• Show a yellow "Optional" badge on the canvas
• Can be included/excluded when running the workflow
• Are presented as checkboxes in the approval card

Nested Workflows¶

Select Nested Workflow as the step type, then choose the target workflow from the dropdown. The nested workflow executes with its own steps and returns its outputs to the parent workflow. This is shown with an info-coloured "Nested Workflow" badge on the step card.

Connecting Steps¶

Steps need to be connected to define the execution flow.

Creating a Connection¶

Hover over a step to reveal the connection port at the bottom. Three coloured dots fan out representing the connection types:

Screenshot: The coloured connection dots that appear when hovering over a step

1. Click the coloured dot matching the connection type you want
2. Drag to the destination step
3. Release to create the connection

Demo: Creating connections between workflow steps

Alternatively, click the port and then a modal appears to choose the connection type.

Connection Types¶

Conditional Connections¶

On Condition connections evaluate a JSON condition expression against a previous step's output. When a step completes, any On Condition connections are evaluated first -- if one matches, only that branch is followed. Default and On Success connections are suppressed when On Condition connections are present.

Creating a conditional connection:

1. Hover over a step to reveal the connection dots
2. Click the orange dot (On Condition)
3. Drag to the destination step
4. The condition configuration modal opens automatically

Configuring a condition:

Supported operators:

Multiple conditions: A single step can have multiple On Condition connections, each with a different condition. This is useful for MultipleChoice prompts where each option leads to a different branch.

Arrow labels: Conditional connections display their label text on the arrow midpoint on the canvas for quick identification.

Auto-Created Branches¶

When adding certain prompt step types, conditional branches are created automatically:

• YesNo prompts: Two branches are created automatically -- one for "Yes" and one for "No", each with a pre-configured condition expression
• MultipleChoice prompts: A branch is created for each defined option, with condition expressions matching the user's response to each choice

Skipped Steps¶

When a conditional branch is not taken during execution, the steps on that branch are marked as Skipped in the execution history. Skipped steps display with a grey badge and skip icon, making it clear which path the workflow followed.

Connection Rules¶

• Each step can have a maximum of one outgoing connection per type (except On Condition, which allows multiple)
• Duplicate connection types are disabled in the UI
• Circular dependencies are prevented
• Branching connections (from steps with 2+ outgoing) use smooth bezier fan-out curves
• Single connections between horizontally-adjacent steps join on the sides

Editing a Connection¶

Click on a connection arrow to open the inline picker at the midpoint. From here you can:

• Change the connection type
• Reconnect the endpoint (drag to new target)
• Delete the connection

Demo: Changing the type and deleting connections

Moving a Connection¶

You can reconnect an existing arrow to a different target step by dragging the endpoint.

Demo: Moving a connection endpoint to a different step

Deleting a Connection¶

1. Click on the connection arrow
2. Click Delete Connection in the picker

Canvas Tools¶

Undo / Redo¶

Demo: Using undo and redo to revert and reapply changes

The designer tracks a history of up to 50 state snapshots. Each major action creates a snapshot:

• Adding or deleting a step
• Moving a step (one snapshot per complete drag)
• Creating or modifying a connection

The undo/redo buttons in the toolbar show as enabled or disabled depending on available history.

Auto-Layout¶

Click the Auto-arrange steps button in the canvas toolbar to automatically position all steps.

The auto-layout algorithm:

1. Performs a topological sort (BFS) of the connection graph
2. Groups steps into depth levels (rows)
3. Recursively positions leaf nodes first, then centres each parent above its children
4. Uses 340px horizontal spacing and 200px vertical spacing
5. Snaps all positions to the 20px grid
6. Prefers the start step as the first root node

This tree-based approach produces clean layouts for branching workflows -- a step with 4 conditional branches will be centred above the 4 child steps, and any grandparent steps shift to stay centred above the tree.

Auto-layout also runs automatically on first load if all steps are stacked at the same position.

Zoom Controls¶

Screenshot: The zoom controls in the designer toolbar

Zoom range: 25% to 200%. The current zoom percentage is displayed in the toolbar.

Fullscreen Mode¶

Demo: Toggling fullscreen mode

Click the Fullscreen button in the toolbar or press Escape to exit. In fullscreen mode:

• The toolbar and canvas expand to fill the viewport
• The configuration panel remains accessible
• Connection arrows automatically redraw to fit the new layout

Lasso Multi-Select¶

Click and drag on an empty area of the canvas to draw a lasso selection rectangle. All steps within the rectangle are selected (highlighted with a blue border). Once selected, you can:

• Move all selected steps together using Up / Down / Left / Right
• Hold Shift for larger 100px movements
• Click any empty area to deselect all
• Hold Ctrl and click individual steps to add or remove them from the selection

Workflow Variables¶

Workflow variables allow you to pass data between steps, accumulate values, and control flow based on computed state.

Defining Variables¶

1. Click the Variables button (braces icon) in the canvas toolbar
2. The variables panel opens showing all defined variables
3. Click Add Variable to create a new variable
4. Enter a Name, Default Value, and optional Description
5. Click Save

Variables are saved with the workflow designer state and are available to all steps.

Using Variables in Parameters¶

Reference a variable in any step parameter using the {{var.VariableName}} syntax. For example:

• {{var.UserEmail}} -- resolves to the current value of the UserEmail variable
• {{var.TicketCount}} -- resolves to the current value of the TicketCount variable

Variables are resolved at runtime, so they always reflect the latest assigned value.

Variable Assignments¶

Steps can assign values to variables when they complete. Configure assignments in the Variable Assignments section of the step editor:

This allows you to build up values across steps -- for example, appending error messages from each step into a summary variable, or setting a flag variable based on a conditional branch outcome.

Version Control¶

Demo: Viewing version history and restoring a previous version

Viewing Version History¶

Click the History button in the toolbar to open the version history panel.

Screenshot: The version history panel showing saved versions

Each version shows:

• Version number
• Who created it
• When it was created
• Change description (if provided)

Restoring a Previous Version¶

1. Click History in the toolbar
2. Find the version you want to restore
3. Click View to preview it
4. Confirm the restore

Drafts¶

How Drafts Work¶

When you make changes in the designer, they are saved as a draft version:

• A "Editing Draft" badge appears in the toolbar
• The draft is separate from the live (published) version
• Other users can see the live version while you edit the draft
• Drafts persist between sessions

Discarding a Draft¶

Click the Discard Draft button (X) next to the draft badge to revert all draft changes and return to the last published version.

Publishing Changes¶

Save your changes with the Save button (Ctrl+Shift+S) to publish the draft as the new live version. A new version is created in the history.

Saving and State Management¶

Save Indicators¶

Batch Save¶

When you click Save (or press Ctrl+Shift+S), the designer sends the complete workflow state to the server:

• All steps with their configurations
• All connections with types
• Position information for canvas layout
• Version metadata

Unsaved Changes Warning¶

If you try to navigate away with unsaved changes, the browser will show a confirmation dialog. The Submit for Review button is also disabled until changes are saved.

Version Conflict Resolution¶

If another user saves the workflow while you're editing, you'll see a 409 conflict notification with a prompt to reload. The designer fetches the fresh state and you can merge your changes.

Validation¶

Running Validation¶

Click the Validate button in the toolbar or press V. The validation results appear in the configuration panel.

Demo: Running validation and reviewing results

Validation Rules¶

Errors (must fix before submitting):

• Missing workflow name or description
• Orphaned steps with no connections
• Circular dependencies between steps
• Invalid parameter configurations
• Missing required action parameters

Warnings (informational):

• Unused steps
• Optional-only branches
• Complex nesting depth

Validation Results¶

Demo: Validation passing with no errors

Demo: Validation failing with errors highlighted

Each validation issue shows:

• The step name where the issue was found
• The rule that was violated
• An error or warning message

Click on any issue to scroll to and highlight that step on the canvas. Steps with errors are highlighted with a red border.

Export and Import¶

Exporting Workflows¶

Demo: Exporting a workflow to JSON

Click the Export button in the toolbar to download the workflow as a JSON file containing:

• Workflow metadata (ID, name, description)
• All steps with configurations
• All connections with types and positions
• Version information
• Name-based references (portable across environments)

Importing Workflows¶

Demo: Importing a workflow from JSON

To import a workflow:

1. Navigate to the workflow import page
2. Upload the JSON file
3. The system validates the file and checks dependencies
4. Missing dependencies are flagged for resolution
5. The imported workflow is created in Draft status

Test Runs (What-If)¶

Demo: Running a test with forced step failures and live results

Starting a Test Run¶

1. Click the Test Run button in the toolbar or press T
2. If you have unsaved changes, you'll be prompted to save first
3. The test run panel loads with runtime parameter fields

Forcing Step Failures¶

During test setup, click any step on the canvas to toggle force failure mode for that step. Forced-fail steps show a red badge and will simulate a failure during the test run. This lets you:

• Test failure paths and On Failure connections
• Verify error handling logic
• Check that cleanup steps execute correctly

Test Parameters¶

The test run form auto-fills parameters with test values:

Viewing Test Results¶

During execution, the test run panel shows:

• Elapsed time counter
• Step-by-step progress with live status indicators:
  • Blue spinner - Running
  • Green tick - Completed
  • Red X - Failed (with error output)
  • Orange clock - Timed Out
  • Grey dash - Skipped
• Duration per step in milliseconds
• Canvas highlighting - Steps light up in real-time:
  • Blue border - Currently running
  • Green border - Completed successfully
  • Red border - Failed
  • Orange border - Warning/timeout

Collaborative Editing¶

Real-Time Presence¶

The presence bar below the toolbar shows all users currently editing the workflow. Each user appears as an avatar with their name and email.

Step Locking¶

When another user selects a step, it becomes locked for you:

• A yellow border appears around the locked step
• The step becomes non-interactive (you can't click or drag it)
• A tooltip shows who is editing that step
• The lock releases when the other user deselects the step

Live Updates¶

Changes made by other users appear in real-time on your canvas:

Submitting for Review¶

To submit a workflow for review:

1. Ensure all changes are saved (Save button not visible)
2. Run validation — the workflow must pass with no errors
3. Click Submit for Review in the toolbar

The Submit for Review button is disabled if there are unsaved changes or validation has errors. Once submitted, the workflow moves to Awaiting Review status and is locked from further editing until reviewed. Approvers are notified immediately.

For full details on the review process, notifications, the review page, and approval decisions, see Workflow Review & Approval.

Multi-Step Approval¶

Configuring Approval Levels¶

Approval is configured in sequential levels within the designer. Each level must be approved before the next level is activated.

1. Open the approval configuration in the designer
2. Toggle Enable Multi-Level Approval
3. Add levels with a name, logic type, and approvers
4. Select approvers from the searchable employee dropdown
5. Levels execute in numeric order (Level 1, Level 2, etc.)

Execution Approvers¶

Configure who can approve workflow executions at runtime.

Demo: Setting up execution approvers for a workflow

Single-Level Approval¶

Set up a single approval level with one or more approvers.

Demo: Configuring a single-level approval chain

Multi-Level Approval¶

Add a second (or further) approval level to create sequential approval chains.

Demo: Adding a second approval level for sequential sign-off

Approval Logic¶

Each approval level can use one of two logic modes:

Approval Scopes¶

Approvers can be assigned at different scopes (resolved in priority order: Workflow → Pod-Client → Pod):

Approval Steps in Workflows¶

You can also add an Approval step within a workflow using the User Prompt step type with the Approval prompt type. This pauses workflow execution and waits for an authorised approver to approve or reject before continuing.

For full details on the review process, notifications, and the reviewer experience, see Workflow Review & Approval.

AI Features¶

The designer includes AI assistance to help build better workflows.

AI Suggestions¶

Click the AI Suggestions button (or press A) to get AI-powered recommendations for:

• Performance optimisations
• Branch coverage analysis
• Error handling recommendations
• Optional step identification
• Parameter optimisation

AI-Generated Steps¶

When creating a workflow via the wizard, AI automatically suggests initial steps based on your natural language description. These steps appear pre-configured on the canvas.

Keyboard Shortcuts¶

Press ? in the designer to see the full shortcut reference.

Navigation¶

Step Movement¶

Editing¶

View¶

Quick Actions¶

Example: Building a User Onboarding Workflow¶

Step 1: Create User¶

1. Click New in the configuration panel
2. Set Step Name: "Create M365 User"
3. Step Type: Action
4. Integration: Microsoft 365
5. Action: Create User
6. Configure parameters:
   • tenant_id: ContextInput → ${context.tenant_id}
   • user_principal_name: RuntimeInput
   • display_name: RuntimeInput
   • password: Fixed → Generate Random
7. Click Save

Step 2: Assign License¶

1. Click New
2. Set Step Name: "Assign E3 License"
3. Step Type: Action
4. Integration: Microsoft 365
5. Action: Assign License
6. Configure parameters:
   • tenant_id: ContextInput
   • user_id: StepOutput → ${CreateM365User.user_id}
   • license_sku: Fixed → E3 SKU ID
7. Click Save

Step 3: Connect the Steps¶

1. Hover over "Create M365 User" to reveal connection ports
2. Click the green (Success) dot
3. Drag to "Assign E3 License" and release
4. The license assignment now only runs if user creation succeeds

Step 4: Validate and Test¶

1. Press V to validate - fix any errors
2. Press T to start a test run
3. Review the test results
4. When satisfied, press Save then Submit for Review

Best Practices¶

Step Naming¶

Use clear, descriptive names:

• "Create M365 User" (describes what it does)
• "Assign E3 License" (specific about the licence)

Avoid generic names like "Step 1" or "Do Action".

Connection Strategy¶

• Use On Success for dependent steps (e.g., can't assign licence without user)
• Use On Failure for error handling or cleanup
• Use On Condition for decision-tree branching based on step outputs (e.g., route based on user prompt response)
• Use Default only when you always want the next step to run

Parameter Organisation¶

• Use ContextInput for tenant and company IDs
• Use RuntimeInput for user-provided values
• Use StepOutput to chain step results
• Use Fixed sparingly for truly constant values

Version Control Practices¶

• Save frequently to create version snapshots
• Use meaningful change descriptions when saving
• Review version history before making major changes
• Restore previous versions if something goes wrong

Draft Workflow¶

• Work in draft mode for significant changes
• Test your draft thoroughly before publishing
• Discard drafts if you decide not to proceed with changes

Validation¶

• Run validation before every review submission
• Fix all errors before submitting
• Review warnings even though they don't block submission

Troubleshooting¶

Step Won't Save¶

• Check all required fields are filled
• Verify parameter values are valid
• Ensure an action is selected

Connection Won't Create¶

• Check you're not creating a duplicate connection type
• Ensure you're not creating a circular reference
• Verify the target step exists and isn't being deleted

Parameters Missing¶

• Verify the action is selected
• Check the integration is configured
• Some actions load parameters dynamically

Undo Not Working¶

• Undo history is limited to 50 actions
• Some actions (like saving) are not undoable
• Check if the undo button is enabled in the toolbar

Version Conflict¶

• Another user saved while you were editing
• Click Reload to fetch the latest version
• Re-apply your changes after reloading

Collaborative Editing Issues¶

• Check your internet connection (SignalR requires a stable connection)
• If steps appear locked but no other users are shown, the other user may have disconnected - the lock should release automatically
• Refresh the page if presence indicators seem stale

Validation Errors¶

• Click on each error to jump to the affected step
• Steps with errors show a red border on the canvas
• Fix errors in order - some may resolve when earlier ones are fixed

Test Run Failures¶

• Check that the workflow is saved before testing
• Verify test parameters are reasonable
• Review forced-failure steps if unexpected failures occur
• Check browser console for connection errors

Next Steps¶

• Workflow Review & Approval - The review process, notifications, and approval decisions
• Creating Workflows - Full workflow creation guide
• Running Workflows - How to execute workflows