Workflow Integration

Forms integrate deeply with the Workflow module to create state-driven business processes. This guide explains how to connect forms with workflows to build complete solutions.

Overview

Forms and workflows work together to handle business processes:

• Forms provide the user interface for data entry and display
• Workflows manage the business process state and transitions
• ETL chains process data and perform actions at each step

How It Works

User fills form → Form creates workflow instance → Workflow transitions through states
                                                   ↓
User views form ← Form displays workflow data ← ETL processes data at each state

Key Integration Points

1. Form creates workflow instance - When submitted, form creates a new workflow
2. Workflow stores form data - Data is stored in elxPublic (visible) and elxPrivate (hidden)
3. Form displays workflow state - Current state, history, and data shown in form
4. Form sends events - User actions trigger workflow transitions
5. Workflow controls navigation - elxRedirect determines where user goes after submission

Workflow Data in Forms

Workflows store data in several fields that forms can access:

elxPublic

Purpose: Data shared with the form (visible to users)

Contains: - Form field values - Workflow state information - Data that users can see and edit

Example:

{
  "employeeName": "John Smith",
  "leaveType": "Annual",
  "startDate": "2026-03-10",
  "endDate": "2026-03-14",
  "days": 5,
  "currentState": "Manager Approval"
}

Usage in Forms: - Form fields automatically bind to elxPublic data - Users can see and edit these values - Rules can check elxPublic values

elxPrivate

Purpose: Server-side data (not visible to form users)

Contains: - Sensitive information - Internal workflow data - Calculated values not for display

Example:

{
  "approverId": "user123",
  "budgetCode": "DEPT-2026-001",
  "internalNotes": "Requires special approval",
  "calculatedCost": 5000
}

Usage: - ETL chains can read/write elxPrivate - Not accessible from form client-side - Used for business logic

elxHistory

Purpose: Audit trail of workflow transitions

Contains: - State changes - User actions - Timestamps - Results of each transition

Example:

[
  {
    "user": "john.smith",
    "ts": "2026-03-06T10:30:00Z",
    "from": "Draft",
    "to": "Manager Approval",
    "event": "Submit",
    "result": "success"
  },
  {
    "user": "jane.manager",
    "ts": "2026-03-06T14:15:00Z",
    "from": "Manager Approval",
    "to": "HR Approval",
    "event": "Approve",
    "result": "approved"
  }
]

Usage in Forms: - Display with History component - Shows complete audit trail - Read-only for users

elxRedirect

Purpose: Control navigation after form submission

Value: URL to redirect to after processing

Example:

{
  "elxRedirect": "/dashboard/my-requests"
}

Usage: - Set by ETL chains - Automatically redirects user - Can be dynamic based on workflow state

elxEvent

Purpose: Current event being processed

Contains: - Event name - Event data - Triggering user

Example:

{
  "name": "Approve",
  "data": {
    "comments": "Approved with conditions"
  },
  "user": "jane.manager"
}

Usage: - Available in ETL chains - Used for conditional logic - Logged in history

elxAppId

Purpose: Link workflow to originating form

Value: Form ID that created the workflow instance

Example:

{
  "elxAppId": "employee-leave-request"
}

Usage: - Identifies which form to display - Allows workflow to be opened in correct form - Used for navigation

Creating Workflow Instances from Forms

Method 1: Using Workflow State Component

The simplest way to integrate forms with workflows.

Steps:

1. In Form Designer, select Others from the component dropdown
2. Drag Workflow State onto your form
3. Configure the Workflow State component:

• Workflow Id: Select your workflow from dropdown
• Event: Event to send on submission (e.g., “Submit”)

1. When user submits the form:

• If no workflow instance exists, one is created
• Form data is stored in elxPublic
• Event is sent to workflow
• User is redirected to workflow form

Example Configuration:

Component: Workflow State
├── Workflow Id: leave-approval-workflow
├── Event: Submit
└── (Hidden component - not visible in form)

Method 2: Using ETL Step

For more control, use the form.NewFormInstance ETL step.

Steps:

1. Create an ETL chainset
2. Add form.NewFormInstance step
3. Configure:

• Form Id: Your form ID
• Workflow Id: Your workflow ID

1. Trigger the ETL chain (from button, scheduler, etc.)

Example ETL Chain:

Chain: Create Leave Request
├── Step 1: form.NewFormInstance
│   ├── formId: "leave-request-form"
│   └── workflowId: "leave-approval-workflow"
└── Step 2: Result Endpoint

Result: - Creates workflow instance - Returns redirect URL - Form opens with workflow instance ID

Method 3: Using Form Launcher

Launch a form that creates a workflow from another form.

Steps:

1. Add Form Launcher component to parent form
2. Configure:

• Form Id: Target form with workflow
• Button Label: “Create Leave Request”

1. When clicked, opens target form
2. Target form creates workflow instance

Displaying Workflow Data in Forms

Show Current State

Use rules to display different content based on workflow state.

Example:

1. Add a Hidden component:

• Id: currentState
• Value: ${elxPublic.currentState}

1. Add a rule:

• Condition: currentState == "Manager Approval"
• Action: Show “Waiting for Manager” message

Show Workflow History

Use the History component to display the audit trail.

Steps:

1. Add History component to form
2. Configure:

• Workflow Id: Your workflow ID
• Workflow Instance Id: ${workflowInstanceId}

1. History displays automatically:

• User who performed action
• Timestamp
• State transition
• Result/comments

Show Approval Buttons Based on State

Use rules to show/hide buttons based on workflow state and user role.

Example:

1. Add Hidden component for current state
2. Add Hidden component for user role: ${roles}
3. Add Button Bar with Approve/Reject buttons
4. Add rule:

• Condition: currentState == "Manager Approval" AND roles contains "Manager"
• Action: Show button bar

Sending Events to Workflows

From Submit Button

The default submit button sends the configured event.

Configuration:

1. Workflow State component defines the event
2. Submit button triggers submission
3. Event is sent to workflow
4. Workflow transitions to next state

From Custom Buttons

Create buttons that send specific events.

Example:

1. Add Button component
2. Configure:

• Label: “Approve”
• Submit Script: Custom script to send “Approve” event

1. Script sends event to workflow
2. Workflow processes event and transitions

Conditional Events

Send different events based on form data.

Example:

Use ETL chain to determine event:

Chain: Process Leave Request
├── Step 1: If days > 5
│   └── Send "ManagerApproval" event
└── Step 2: Else
    └── Send "AutoApprove" event

Form-Workflow Patterns

Pattern 1: Simple Approval Workflow

Use Case: Leave request with manager approval

Components: - Form with leave details - Workflow State component - Submit button

Workflow States: - Draft → Manager Approval → Approved/Rejected

Form Behavior: - Employee submits request - Manager sees Approve/Reject buttons - Employee sees status

Pattern 2: Multi-Level Approval

Use Case: Purchase order with multiple approvers

Components: - Form with PO details - Workflow State component - Conditional button display

Workflow States: - Draft → Manager Approval → Director Approval → Finance Approval → Approved

Form Behavior: - Different buttons for each role - Progress indicator shows current state - History shows all approvals

Pattern 3: Conditional Routing

Use Case: Expense claim with amount-based routing

Components: - Form with expense details - Workflow State component - ETL validation

Workflow States: - Draft → (if < $1000) Auto-Approve - Draft → (if >= $1000) Manager Approval → Approved

Form Behavior: - Small expenses auto-approved - Large expenses require approval - User sees appropriate message

Pattern 4: Parallel Approval

Use Case: Document requiring multiple department approvals

Components: - Form with document details - Multiple Workflow State components (one per department) - Aggregation logic

Workflow States: - Draft → Legal Approval + Finance Approval + IT Approval → Approved

Form Behavior: - All departments approve independently - Form shows status of each approval - Approved when all complete

Pattern 5: Rejection with Resubmission

Use Case: Form that can be rejected and resubmitted

Components: - Form with editable fields - Workflow State component - Rejection comments field

Workflow States: - Draft → Approval → Approved/Rejected → (if rejected) Draft

Form Behavior: - Manager can reject with comments - Employee sees rejection reason - Employee can edit and resubmit - History shows all attempts

ETL Integration with Workflows

OnEntry Actions

Execute ETL when entering a state.

Example: Send notification when entering “Manager Approval” state

State: Manager Approval
├── OnEntry ETL Chain
│   ├── Get manager email
│   ├── Compose notification
│   └── Send email

OnExit Actions

Execute ETL when leaving a state.

Example: Update external system when leaving “Approved” state

State: Approved
├── OnExit ETL Chain
│   ├── Extract form data
│   ├── Format for external system
│   └── HTTP POST to API

Guard Conditions

Validate before allowing transition.

Example: Check budget before approval

Transition: Approve
├── Guard ETL Chain
│   ├── Get budget remaining
│   ├── Compare to request amount
│   └── Return true/false
└── If true → Approved
    If false → Stay in current state

Data Enrichment

Add data to workflow during transitions.

Example: Calculate approval deadline

Transition: Submit
├── ETL Chain
│   ├── Get current date
│   ├── Add 3 business days
│   ├── Store in elxPrivate.deadline
│   └── Continue transition

Complete Example: Leave Request System

Form Structure

Leave Request Form
├── Column
│   ├── Text Input: Employee Name (from ${username})
│   ├── Select: Leave Type (Annual, Sick, Personal)
│   ├── Date Input: Start Date
│   ├── Date Input: End Date
│   ├── Text Area: Reason
│   └── Button Bar: Submit
├── Workflow State
│   ├── Workflow Id: leave-approval
│   └── Event: Submit
└── History Component (shows approval trail)

Workflow States

leave-approval Workflow
├── Draft
│   └── Submit → Manager Approval
├── Manager Approval
│   ├── OnEntry: Email manager
│   ├── Approve → HR Approval
│   └── Reject → Rejected
├── HR Approval
│   ├── OnEntry: Email HR
│   ├── Approve → Approved
│   └── Reject → Rejected
├── Approved
│   └── OnEntry: Update calendar, email employee
└── Rejected
    └── OnEntry: Email employee with reason

Form Rules

Rule 1: Show Approve/Reject for Manager
├── Condition: currentState == "Manager Approval" AND roles contains "Manager"
└── Action: Show manager-buttons

Rule 2: Show Approve/Reject for HR
├── Condition: currentState == "HR Approval" AND roles contains "HR"
└── Action: Show hr-buttons

Rule 3: Show Status for Employee
├── Condition: username == employeeName
└── Action: Show status-panel

ETL Chains

Validation Chain:

Validate Leave Request
├── Check dates (end > start)
├── Check leave balance
├── Check blackout dates
└── Return validation result

Manager Approval Chain:

Manager Approval OnEntry
├── Get manager from employee record
├── Store in elxPrivate.managerId
├── Compose email
└── Send notification

Approval Chain:

Approved OnEntry
├── Update leave balance
├── Create calendar entry
├── Notify employee
└── Set elxRedirect to dashboard

Best Practices

1. Use elxPublic for User-Visible Data

Store form data in elxPublic so users can see it.

2. Use elxPrivate for Sensitive Data

Store approval notes, internal IDs, calculations in elxPrivate.

3. Always Set elxRedirect

Guide users to the next logical page after submission.

4. Display Workflow History

Use History component to show audit trail.

5. Use Rules for Role-Based UI

Show/hide buttons based on workflow state and user role.

6. Validate in Guards

Use guard conditions to prevent invalid transitions.

7. Send Notifications in OnEntry

Notify users when workflow enters a state requiring their action.

8. Handle Rejections Gracefully

Allow resubmission, show rejection reasons, preserve data.

Troubleshooting

Workflow Instance Not Created

Check: - Workflow State component is configured - Workflow ID is correct - User has permission to create instances

Form Data Not Appearing in Workflow

Check: - Field IDs match expected names - Data is being stored in elxPublic - Form validation is passing

Buttons Not Showing for Approvers

Check: - Rules are checking correct state - User has required role - Rule conditions are correct

History Not Displaying

Check: - History component is configured - Workflow instance ID is correct - User has permission to view history

Next Steps

• ETL Integration - Process form data with ETL
• Complete Example: Leave Request - Full implementation
• Validation - Learn about form validation
• Examples - See more examples