- Updated VariableManager.vue to change variable type labels for clarity, replacing 'Int' and 'Decimal' with 'Number'. - Modified manager-approval-customScript.js to correct field references and enhance conditional logic for displaying the custom approved amount. - Enhanced manager-approval-form.json by adding 'readonly' attributes to several fields, ensuring they are non-editable during the approval process. - Revised travel-workflow-process.json to improve node connections and labels for better workflow clarity. - Updated travel-workflow-variables.json to refine variable descriptions and ensure consistency across the workflow. - Adjusted [id].vue to improve form data handling and loading states, enhancing user experience during workflow execution.
Corrad ProcessMaker Documentation
This documentation provides a comprehensive overview of the Corrad ProcessMaker system, its features, architecture, and usage guidelines.
System Overview
Corrad ProcessMaker is a sophisticated business process management (BPM) platform built with modern web technologies. It enables organizations to design, automate, and manage complex business workflows with an intuitive drag-and-drop interface. The system follows BPMN (Business Process Model and Notation) standards to create executable business processes.
Core Purpose
The platform serves as a complete solution for:
- Process Automation: Streamline business workflows with visual process design
- Form Management: Create dynamic, interactive forms with conditional logic
- Data Collection: Gather and process structured data through forms and APIs
- Workflow Execution: Run automated processes with user tasks and decision points
- Documentation Management: Handle document uploads, verification, and processing
Key Features
1. Visual Process Builder
- Drag-and-Drop Interface: Intuitive process design with BPMN-compliant elements
- Node Types: Start/End events, User Tasks, Service Tasks, Gateways, and Sub-processes
- Flow Control: Conditional branching, parallel execution, and loop handling
- Integration Points: API calls, script execution, and external service connections
2. Dynamic Form Builder
- Component Library: Comprehensive set of form components (text, select, radio, checkbox, date, file upload)
- Conditional Logic: Show/hide fields based on user input with visual condition builder
- Validation Rules: Built-in and custom validation with real-time feedback
- Multi-step Forms: Wizard-style forms with progress tracking
- Responsive Design: Mobile-friendly forms that adapt to different screen sizes
3. Process Execution Engine
- Task Management: Assign and track user tasks with role-based access
- Variable Management: Handle data flow throughout the process lifecycle
- API Integration: Connect with external services and databases
- Notification System: Automated alerts and status updates
- Audit Trail: Complete logging of process execution and user actions
4. Advanced Capabilities
- JavaScript API: Custom scripting for calculations and business logic
- File Handling: Secure document upload, storage, and verification
- Role-based Security: Granular permissions and access control
- Process Templates: Reusable process definitions and form templates
- Analytics: Process performance monitoring and reporting
Architecture
Technology Stack
- Frontend: Nuxt 3, Vue 3, TypeScript
- Backend: Node.js with Nitro server
- Database: MySQL/MariaDB with Prisma ORM
- UI Framework: Tailwind CSS with custom Rose UI components
- Form Engine: FormKit with custom extensions
- Process Visualization: Vue Flow for BPMN diagram rendering
- State Management: Pinia for reactive state handling
System Components
Frontend Architecture
├── components/ # Reusable Vue components
│ ├── process-flow/ # Process builder components
│ ├── formkit/ # Custom form components
│ └── rs-*/ # Rose UI component library
├── pages/ # Application routes and views
│ ├── process-builder/ # Process design interface
│ ├── form-builder/ # Form design interface
│ └── execution/ # Process execution views
├── stores/ # Pinia state management
├── composables/ # Reusable composition functions
└── plugins/ # Vue/Nuxt plugins
Backend Architecture
├── server/ # API endpoints and server logic
│ ├── api/ # REST API routes
│ ├── middleware/ # Server middleware
│ └── utils/ # Utility functions
├── prisma/ # Database schema and migrations
└── docs/ # Configuration and documentation
Configuration Files in docs/ Folder
The docs/
folder contains critical configuration files that define the system's behavior:
Form Configuration (docs/json/form/
)
formComponents.json
Contains the complete form structure definition for the Malaysian Asnaf (welfare recipient) registration system. This configuration includes:
- Section A: Personal information collection (name, ID type, citizenship, gender, race, education)
- Section B: Dependent information and family details
- Banking Information: Account details for payment processing
- Educational Background: School and institution information
- Conditional Logic: Field visibility rules based on user selections
Key features demonstrated:
- Multi-language support (Bahasa Malaysia)
- Complex conditional field display logic
- Validation rules for required fields
- Grid-based responsive layout
- Structured data collection for government processes
customScript.js
JavaScript code that implements dynamic form behavior:
- Field visibility control based on user selections
- Real-time conditional logic execution
- Form validation and data manipulation
- Integration with the FormKit JavaScript API
Process Configuration (docs/json/process-builder/
)
processDefinition.json
Defines the complete business process workflow structure including:
- Process Nodes: Forms, API calls, scripts, decision points
- Edge Connections: Flow between process steps
- Data Mapping: Variable assignments between steps
- Conditional Routing: Business rules for process flow
processVariables.json
Comprehensive variable definitions used throughout the process:
- Form Data Variables: User input from forms
- API Response Variables: Data from external service calls
- Calculation Variables: Computed values (e.g., Had Kifayah calculations)
- Status Variables: Process state and flow control
- Configuration Variables: System settings and constants
Key variable categories:
- Applicant personal information
- Financial data and calculations
- Document verification status
- Process flow control variables
- Error handling and notifications
How to Use the System
For Process Designers
-
Creating a New Process
- Navigate to Process Builder
- Drag nodes from the component palette
- Connect nodes with flow arrows
- Configure each node's properties
- Set up variables and data mapping
-
Designing Forms
- Access Form Builder interface
- Drag form components onto the canvas
- Configure field properties and validation
- Set up conditional logic rules
- Preview and test the form
-
Process Deployment
- Test process flows in development mode
- Validate all connections and configurations
- Deploy to production environment
- Monitor process execution
For End Users
-
Starting a Process
- Access the process from the execution interface
- Complete required forms step by step
- Upload necessary documents
- Submit for processing
-
Task Management
- View assigned tasks in inbox
- Complete user tasks as they become available
- Track process progress
- Receive notifications on status changes
For Administrators
-
System Configuration
- Manage user roles and permissions
- Configure API endpoints and integrations
- Set up notification templates
- Monitor system performance
-
Process Management
- Monitor active process instances
- Handle exceptions and errors
- Generate reports and analytics
- Maintain process templates
Use Cases
Malaysian Asnaf Registration System
The current configuration demonstrates a comprehensive welfare application system:
- Multi-step Application Process: Guided user journey through application stages
- Family Information Collection: Detailed dependent and household member data
- Financial Assessment: Had Kifayah (poverty line) calculations
- Document Verification: Upload and validation of supporting documents
- Decision Processing: Automated eligibility determination
- Approval Workflow: Multi-level review and approval process
General Business Processes
The platform supports various business scenarios:
- Employee Onboarding: HR processes with document collection and approvals
- Purchase Requests: Procurement workflows with budget approvals
- Customer Service: Ticket management and resolution processes
- Compliance Reporting: Regulatory submission and review processes
- Project Management: Task assignment and milestone tracking
Integration Capabilities
API Integration
- REST API endpoints for external system integration
- Real-time data synchronization
- Webhook support for event-driven processes
- Custom authentication and authorization
Database Connectivity
- Multiple database support through Prisma ORM
- Data migration and schema management
- Query optimization and caching
- Backup and recovery procedures
Third-party Services
- Email and SMS notification services
- Document storage and management systems
- Payment gateway integration
- Identity verification services
Security Features
Authentication & Authorization
- Multi-factor authentication support
- Role-based access control (RBAC)
- Session management and timeout
- API key management
Data Protection
- Encryption at rest and in transit
- PII (Personally Identifiable Information) protection
- Audit logging and compliance
- GDPR and data privacy compliance
Process Security
- Secure document handling
- Input validation and sanitization
- XSS and injection attack prevention
- Secure API communications
Development Guidelines
Code Structure
- Follow Vue 3 Composition API patterns
- Use TypeScript for type safety
- Implement component-based architecture
- Maintain clear separation of concerns
Best Practices
- Write comprehensive tests for business logic
- Document API endpoints and data models
- Follow consistent naming conventions
- Implement proper error handling
Configuration Management
- Use environment variables for sensitive data
- Maintain separate configurations for different environments
- Version control all configuration changes
- Document configuration dependencies
Support and Maintenance
System Monitoring
- Real-time performance monitoring
- Error tracking and alerting
- Process execution analytics
- User activity monitoring
Backup and Recovery
- Automated database backups
- Process definition versioning
- Configuration backup procedures
- Disaster recovery planning
Updates and Upgrades
- Regular security updates
- Feature enhancement releases
- Database migration procedures
- Backward compatibility maintenance
Conclusion
Corrad ProcessMaker provides a comprehensive solution for business process automation with its powerful visual design tools, dynamic form capabilities, and robust execution engine. The system's modular architecture and extensive configuration options make it suitable for a wide range of business applications, from simple approval workflows to complex multi-stage processes like the Malaysian Asnaf registration system demonstrated in this documentation.
The platform's strength lies in its ability to handle complex business logic while maintaining an intuitive user interface for both process designers and end users. With proper configuration and customization, it can adapt to virtually any business process automation requirement.