Md Afiq Iskandar 1448aef0ed Add Form Builder Agent Documentation and Import/Export Functionality
- Introduced new documentation files: `agent-example-usage.md`, `agent-instructions-form-generator.md`, and `form-builder-json-structure.md` to provide comprehensive guidance on using the Form Builder Agent, including example usage and JSON structure.
- Implemented import and export functionality in the form management interface, allowing users to upload JSON files and download forms as JSON.
- Enhanced the `manage.vue` component with modals for importing forms, including options for file upload and pasting JSON content, along with validation feedback.
- Developed a new API endpoint for importing forms, ensuring proper validation and processing of incoming JSON data.
- Updated the form management logic to handle JSON imports and exports seamlessly, improving user experience and form management capabilities.
2025-07-29 11:17:30 +08:00
..

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

  1. 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
  2. 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
  3. Process Deployment

    • Test process flows in development mode
    • Validate all connections and configurations
    • Deploy to production environment
    • Monitor process execution

For End Users

  1. Starting a Process

    • Access the process from the execution interface
    • Complete required forms step by step
    • Upload necessary documents
    • Submit for processing
  2. Task Management

    • View assigned tasks in inbox
    • Complete user tasks as they become available
    • Track process progress
    • Receive notifications on status changes

For Administrators

  1. System Configuration

    • Manage user roles and permissions
    • Configure API endpoints and integrations
    • Set up notification templates
    • Monitor system performance
  2. 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.