Afiq fa90c234c5 Enhance Process Builder with New Features and Configuration Options
- Added a new ProcessTemplatesModal component for selecting process flow templates, improving user experience in template management.
- Introduced a ProcessSettingsModal component for comprehensive process configuration, including process info, execution settings, and permissions management.
- Updated BusinessRuleNodeConfiguration and FormNodeConfiguration components to enhance user interaction and streamline configuration processes.
- Implemented new API endpoints for managing form fields and settings, allowing for better integration and data handling.
- Enhanced existing components with improved styling and functionality, including dynamic field conditions and bidirectional data mapping.
- Updated nuxt.config.js to include security settings for API routes, ensuring better protection against XSS and request size limitations.
- Removed the deprecated TaskNodeConfiguration component to streamline the process builder interface.
- Improved documentation to reflect recent changes and enhancements in the process builder features.
2025-05-27 17:00:24 +08:00

8.1 KiB

Process Builder Improvements

Overview

This document outlines the planned improvements for the Process Builder core components. The improvements are designed to be manageable and maintainable while adding essential functionality.

Recently Completed Features

December 2024 - Process Settings Management

Status: Completed

Implemented comprehensive process configuration management with a professional-grade settings interface:

  • Process Info Tab: Complete process metadata management including name, description, priority levels, categorization, and ownership assignment
  • Execution Settings Tab: Advanced process execution controls including process types (standard, approval, data collection, automation, review), timeout management, parallel execution, error recovery, and notification settings
  • Variables & Data Tab: Data persistence policies with multiple retention options (session, temporary, short-term, long-term, permanent), variable change logging, sensitive data encryption, and compliance-ready retention policies
  • Permissions Tab: Enterprise-grade access control with execution permissions, role-based access, modification permissions, approval workflows, and comprehensive audit trails
  • JSON Export Tab: Complete configuration export functionality with metadata, copy-to-clipboard, and download capabilities for API integration and backup purposes

Technical Implementation:

  • Fully integrated with existing process builder store
  • Reactive state management with local change tracking
  • Professional UI with tabbed interface and validation
  • Comprehensive TypeScript interfaces for settings structure
  • Future-ready API integration patterns documented

December 2024 - Enhanced Form Node Configuration

Status: Completed

Completely redesigned form task configuration with step-by-step workflow:

  • 3-Step Configuration Process: Form selection, data mapping, and field conditions
  • Bidirectional Data Mapping: Input and output variable mapping between process and forms
  • Dynamic Field Conditions: Complex conditional logic for field behavior (readonly, hidden, required, optional)
  • Professional UI Design: Consistent with enterprise BPM standards
  • Auto-Save Mechanisms: Reliable data persistence throughout configuration

December 2024 - 4-Point Connection System

Status: Completed

Enhanced node connection system to prevent edge overlaps and improve visual clarity:

  • Universal 4-Point System: All nodes support top, bottom, left, right connection points
  • Intelligent Handle Display: Handles appear on hover with smooth transitions
  • Color-Coded Connections: Green for outputs, blue for inputs
  • Smart Edge Routing: Automatic routing to prevent visual overlaps
  • Enhanced User Experience: Improved connection feedback and visual indicators

December 2024 - Variable System Enhancements

Status: Completed

Improved variable management with simplified scope handling:

  • Unified Variable Management: Streamlined global variable system
  • Enhanced Variable Manager UI: Professional interface with search, filtering, and type indicators
  • Template Integration: Variables properly loaded from process templates
  • Reactive Updates: Real-time synchronization between variable manager and node configurations

Variable System

1. Global Variables

{
  name: 'string',
  type: 'string|number|boolean|object|array',
  defaultValue: any,
  description: 'string',
  scope: 'global',
  isRequired: boolean,
  isReadOnly: boolean
}

2. Process Variables

{
  name: 'string',
  type: 'string|number|boolean|object|array',
  defaultValue: any,
  description: 'string',
  scope: 'process',
  isRequired: boolean,
  isReadOnly: boolean,
  direction: 'in|out|inout' // for process arguments
}

3. Task/Form Arguments

{
  name: 'string',
  type: 'string|number|boolean|object|array',
  defaultValue: any,
  description: 'string',
  direction: 'in|out|inout',
  isRequired: boolean,
  validation: {
    rules: [],
    customValidation: 'string' // custom validation script
  }
}

Core Components Improvements

1. Start Event

{
  type: 'start',
  data: {
    description: 'Process start point',
    triggerType: 'manual', // manual, scheduled
    schedule: null, // for scheduled triggers
    variables: {
      input: [], // process input arguments
      output: [] // process output arguments
    },
    globalVariables: [] // global variables used in this process
  }
}

2. End Event

{
  type: 'end',
  data: {
    description: 'Process end point',
    resultType: 'success', // success, error
    variables: {
      input: [], // variables required for end event
      output: [] // variables to be returned
    },
    returnValues: [] // values to return to calling process
  }
}

3. Task

{
  type: 'task',
  data: {
    description: 'A general task',
    assignee: '',
    taskType: 'manual', // manual, automated
    priority: 'medium', // low, medium, high
    dueDate: null,
    variables: {
      input: [], // task input arguments
      output: [] // task output arguments
    },
    notifications: {
      onAssign: true,
      onComplete: true
    }
  }
}

4. Form Task

{
  type: 'form',
  data: {
    description: 'Form submission task',
    formId: null,
    formName: null,
    formSettings: {
      allowDraft: true,
      autoSave: true
    },
    variables: {
      input: [], // form input arguments
      output: [] // form output arguments
    },
    dataMapping: {
      input: [], // map process variables to form
      output: [] // map form to process variables
    }
  }
}

5. Gateway

{
  type: 'gateway',
  data: {
    description: 'Decision gateway',
    conditions: [],
    defaultPath: 'Default',
    gatewayType: 'exclusive', // exclusive, parallel
    variables: {
      input: [], // variables needed for conditions
      output: [] // variables to pass to next node
    },
    timeout: {
      enabled: false,
      duration: 0
    }
  }
}

New Core Components

1. Script Task

{
  type: 'script',
  data: {
    description: 'Execute custom script',
    scriptType: 'javascript',
    script: '',
    variables: {
      input: [], // script input arguments
      output: [] // script output arguments
    },
    timeout: 30 // seconds
  }
}

Implementation Priority

Phase 1 - Essential Improvements

  1. Implement basic variable system
    • Global variables
    • Process variables
    • Task/Form arguments
  2. Add basic trigger types to Start Event
  3. Add result types to End Event
  4. Add task priorities and due dates
  5. Add form settings for drafts and auto-save

Phase 2 - Enhanced Features

  1. Add variable validation system
  2. Add data mapping for forms
  3. Add script task component
  4. Add timeout handling
  5. Add notifications system

Phase 3 - Advanced Features

  1. Add subprocess component
  2. Add advanced gateway conditions
  3. Add process templates
  4. Add process versioning
  5. Add process analytics

Variable System Features

1. Variable Types

  • String
  • Number
  • Boolean
  • Object
  • Array
  • Date
  • File
  • Custom types

2. Variable Scopes

  • Global (accessible across all processes)
  • Process (accessible within a process)
  • Task/Form (accessible within a task/form)
  • Local (accessible within a script)

3. Variable Operations

  • Create/Delete
  • Read/Write
  • Copy/Move
  • Transform
  • Validate
  • Persist

4. Variable Passing

  • Process to Process
  • Task to Task
  • Form to Process
  • Script to Process
  • Gateway Conditions

Notes

  • Keep improvements focused on essential functionality
  • Maintain backward compatibility
  • Ensure easy maintenance
  • Document all new features
  • Add proper validation
  • Include error handling
  • Implement proper variable scoping
  • Add variable type checking
  • Include variable persistence

Future Considerations

  • Process templates
  • Process versioning
  • Process analytics
  • Advanced notifications
  • Custom validations
  • Process documentation
  • Process testing
  • Process deployment
  • Variable encryption
  • Variable versioning
  • Variable dependencies

Last updated: June 10, 2024