Md Afiq Iskandar
e4548647b5
- Added comprehensive documentation covering key features, user guides, and best practices for the Corrad ProcessMaker platform. - Introduced new API endpoints for serving documentation files dynamically. - Enhanced the navigation structure to include a dedicated documentation section for improved accessibility. - Updated the Nuxt configuration to optimize the development environment and ensure proper handling of dependencies. - Included new dependencies in package.json to support documentation rendering and processing. - Improved the user interface for the documentation page, enhancing the overall user experience.
465 lines
20 KiB
Markdown
465 lines
20 KiB
Markdown
# Process Builder
|
|
|
|
*Design professional BPMN-compliant workflows with visual drag-and-drop tools for complex business process automation.*
|
|
|
|
## Table of Contents
|
|
|
|
1. [Getting Started](#getting-started)
|
|
2. [Process Builder Interface](#process-builder-interface)
|
|
3. [Core Process Components](#core-process-components)
|
|
4. [Advanced Components](#advanced-components)
|
|
5. [Creating Your First Process](#creating-your-first-process)
|
|
6. [Advanced Process Features](#advanced-process-features)
|
|
7. [Best Practices](#best-practices)
|
|
|
|
---
|
|
|
|
## 🚀 Getting Started
|
|
|
|
### **🎯 Accessing Process Builder**
|
|
|
|
**Multiple Access Methods:**
|
|
|
|
1. **📱 From Main Menu**:
|
|
- Click **"Process Builder"** in the navigation sidebar
|
|
- Select **"Create New Process"** to start fresh
|
|
- Or **"Manage Processes"** to work with existing workflows
|
|
|
|
2. **🏠 From Dashboard**:
|
|
- Navigate to the main dashboard
|
|
- Locate **"Processes"** section
|
|
- Click **"Build New Process"** or **"View All Processes"**
|
|
|
|
3. **⚡ Quick Actions**:
|
|
- Use keyboard shortcut `Ctrl + N` for new process
|
|
- Access via **"Recent Processes"** for quick editing
|
|
|
|
### **🎨 Starting a New Process**
|
|
|
|
**Process Creation Steps:**
|
|
1. **📝 Process Details**:
|
|
- Enter descriptive **process name** (e.g., "Zakat Application Workflow")
|
|
- Add comprehensive **description** explaining the workflow purpose
|
|
- Select **process category** (HR, Finance, Operations, etc.)
|
|
- Choose **template** (optional) or start from scratch
|
|
|
|
2. **⚙️ Initial Configuration**:
|
|
- Set **process variables** that will be used throughout the workflow
|
|
- Configure **user roles** and permissions
|
|
- Define **process triggers** (manual start, scheduled, API-triggered)
|
|
|
|
3. **✅ Create Process**:
|
|
- Click **"Create Process"** to open the visual designer
|
|
- Start building your workflow immediately
|
|
|
|
> **💡 Pro Tip**: Use descriptive names and detailed descriptions to help team members understand the process purpose at a glance.
|
|
|
|
## 🖥️ Process Builder Interface
|
|
|
|
### **🎛️ Interface Layout Overview**
|
|
|
|
**Three-Panel Design:**
|
|
|
|
| Panel | Purpose | Key Features |
|
|
|-------|---------|-------------|
|
|
| **📚 Left Panel** | Component Library | Drag-and-drop components, search, categories |
|
|
| **🎨 Center Canvas** | Visual Design Area | Workflow canvas, grid alignment, zoom controls |
|
|
| **⚙️ Right Panel** | Properties & Config | Component settings, variables, connections |
|
|
|
|
### **📚 Left Panel - Component Library**
|
|
|
|
**Component Categories:**
|
|
- **🏁 Core Components**: Start/End points, Form tasks, Decision points
|
|
- **🔧 Integration**: API calls, Database queries, Web services
|
|
- **📊 Business Logic**: Business rules, Script tasks, Calculations
|
|
- **📢 Communication**: Notifications, Email, SMS alerts
|
|
- **🎨 Design Elements**: Swimlanes, Annotations, Visual aids
|
|
- **⚡ Advanced**: Sub-processes, Timer events, Error handling
|
|
|
|
**Search & Organization:**
|
|
- **🔍 Quick Search**: Type component name to find instantly
|
|
- **🏷️ Filter by Category**: Show only specific component types
|
|
- **⭐ Favorites**: Mark frequently used components
|
|
- **📚 Recent**: Access recently used components quickly
|
|
|
|
### **🎨 Center Canvas - Visual Design Area**
|
|
|
|
**Canvas Features:**
|
|
- **📐 Grid System**: Snap-to-grid alignment for professional layouts
|
|
- **🔍 Zoom Controls**: Zoom from 25% to 500% for detailed editing
|
|
- **🖱️ Pan Navigation**: Click and drag to navigate large processes
|
|
- **📏 Rulers**: Pixel-perfect positioning guides
|
|
- **🎯 Auto-Layout**: Intelligent component arrangement suggestions
|
|
|
|
**Canvas Tools:**
|
|
- **↩️ Undo/Redo**: Full history tracking with `Ctrl+Z` / `Ctrl+Y`
|
|
- **📋 Copy/Paste**: Duplicate components and sub-workflows
|
|
- **🗑️ Delete**: Remove components with `Delete` key
|
|
- **🔗 Quick Connect**: Smart connection suggestions between components
|
|
|
|
### **⚙️ Right Panel - Properties & Configuration**
|
|
|
|
**Configuration Tabs:**
|
|
- **🏷️ General**: Component name, description, and basic settings
|
|
- **⚙️ Properties**: Component-specific configuration options
|
|
- **🔗 Connections**: Input/output connections and data mapping
|
|
- **📊 Variables**: Process variables and data flow configuration
|
|
- **🎨 Appearance**: Visual styling and display options
|
|
|
|
### **🔝 Top Toolbar - Process Controls**
|
|
|
|
**Primary Actions:**
|
|
- **💾 Save**: Auto-save enabled, manual save with `Ctrl+S`
|
|
- **👁️ Preview**: Test process flow in simulation mode
|
|
- **🚀 Publish**: Make process available for execution
|
|
- **📊 Analytics**: View process performance metrics
|
|
- **⚙️ Settings**: Global process configuration
|
|
|
|
**Navigation Tools:**
|
|
- **📱 Device Preview**: Test on mobile, tablet, desktop views
|
|
- **🔍 Find**: Search for specific components or text
|
|
- **📐 Alignment**: Align and distribute components professionally
|
|
- **📂 Process History**: Access version control and change history
|
|
|
|
### **⌨️ Keyboard Shortcuts**
|
|
|
|
**Essential Shortcuts:**
|
|
| Shortcut | Action |
|
|
|----------|--------|
|
|
| `Ctrl + S` | Save process |
|
|
| `Ctrl + Z` | Undo last action |
|
|
| `Ctrl + Y` | Redo action |
|
|
| `Delete` | Delete selected component |
|
|
| `Ctrl + A` | Select all components |
|
|
| `Ctrl + D` | Duplicate selected component |
|
|
| `Ctrl + F` | Find in process |
|
|
| `Space + Drag` | Pan canvas |
|
|
| `Ctrl + 0` | Fit to screen |
|
|
| `Ctrl + +/-` | Zoom in/out |
|
|
|
|
## 🧩 Core Process Components
|
|
|
|
*Essential building blocks for creating professional business workflows with BPMN compliance.*
|
|
|
|
### **🏁 Process Flow Control**
|
|
|
|
**🟢 Start Point** - *Process Entry Gate*
|
|
- **🎯 Purpose**: Define where your business process begins
|
|
- **📍 How to Add**: Drag **"Start Point"** from Core Components
|
|
- **⚙️ Configuration Options**:
|
|
- Set descriptive process name and detailed description
|
|
- Configure automatic triggers (form submission, schedule, API call)
|
|
- Define initial process variables and their default values
|
|
- Set security permissions for process initiation
|
|
- **👁️ Visual**: Green circle with play arrow and "Start" label
|
|
- **📈 Analytics**: Track how often processes are initiated
|
|
- **💼 Business Scenarios**:
|
|
- **Employee Onboarding**: Trigger when HR submits new hire form
|
|
- **Purchase Requests**: Start when employee submits purchase request
|
|
- **Zakat Applications**: Begin when citizen submits Zakat application
|
|
- **Customer Complaints**: Initiate when complaint form is received
|
|
|
|
> **🔗 Connection Rule**: Start points can only have outgoing connections, never incoming ones.
|
|
|
|
**🔴 End Point** - *Process Completion Gate*
|
|
- **🎯 Purpose**: Define successful completion of your business process
|
|
- **📍 How to Add**: Drag **"End Point"** from Core Components
|
|
- **⚙️ Configuration Options**:
|
|
- Set completion conditions and success criteria
|
|
- Configure final actions (notifications, data updates, reports)
|
|
- Define process outcome variables and their final values
|
|
- Set cleanup actions for temporary data or resources
|
|
- **👁️ Visual**: Red circle with stop icon and "End" label
|
|
- **📊 Analytics**: Track completion rates and success metrics
|
|
- **💼 Business Scenarios**:
|
|
- **Approved Applications**: Process completed successfully
|
|
- **Rejected Requests**: Process ended with rejection outcome
|
|
- **Cancelled Orders**: Process terminated by user action
|
|
- **Expired Processes**: Process ended due to timeout
|
|
|
|
> **⚠️ Best Practice**: Every process should have at least one end point, but can have multiple end points for different outcomes.
|
|
|
|
**📝 Form Task** - *User Data Collection Point*
|
|
- **🎯 Purpose**: Collect user input through dynamic, intelligent forms
|
|
- **📍 How to Add**: Drag **"Form Task"** from Core Components
|
|
- **⚙️ Configuration Options**:
|
|
- **Form Selection**: Choose from existing forms or create new ones
|
|
- **User Assignment**: Assign to specific users, roles, or groups
|
|
- **Task Settings**: Set deadlines, priority levels, and instructions
|
|
- **Data Mapping**: Map form fields to process variables
|
|
- **Conditional Logic**: Show/hide fields based on previous inputs
|
|
- **Validation Rules**: Ensure data quality and completeness
|
|
- **👁️ Visual**: Blue rectangle with document icon and form name
|
|
- **📊 Analytics**: Track completion rates, response times, data quality
|
|
- **💼 Business Scenarios**:
|
|
- **Application Forms**: Collect customer or employee applications
|
|
- **Approval Forms**: Manager reviews and approval decisions
|
|
- **Verification Forms**: Document verification by officers
|
|
- **Feedback Forms**: Collect user feedback and satisfaction ratings
|
|
|
|
**Advanced Features:**
|
|
- **📱 Mobile Optimization**: Forms automatically adapt to mobile devices
|
|
- **💾 Auto-Save**: Progress saved automatically to prevent data loss
|
|
- **🔄 Version Control**: Track form changes and maintain consistency
|
|
- **🌐 Multi-Language**: Support for multiple languages and localization
|
|
|
|
**🔗 API Call** - *External System Integration*
|
|
- **🎯 Purpose**: Connect with external services, databases, and third-party systems
|
|
- **📍 How to Add**: Drag **"API Call"** from Integration Components
|
|
- **⚙️ Configuration Options**:
|
|
- **HTTP Methods**: GET, POST, PUT, DELETE, PATCH
|
|
- **URL Configuration**: Dynamic URLs with variable substitution
|
|
- **Authentication**: API keys, OAuth, Bearer tokens, Basic Auth
|
|
- **Request Headers**: Custom headers and content types
|
|
- **Request Body**: JSON, XML, form data with dynamic content
|
|
- **Response Handling**: Parse JSON/XML responses, error codes
|
|
- **Retry Logic**: Automatic retries with backoff strategies
|
|
- **Timeout Settings**: Configure request timeouts and fallbacks
|
|
- **👁️ Visual**: Purple rectangle with connection icon and API name
|
|
- **📊 Analytics**: Monitor success rates, response times, error patterns
|
|
- **💼 Business Scenarios**:
|
|
- **Identity Verification**: Check IC numbers with government databases
|
|
- **Payment Processing**: Integration with payment gateways
|
|
- **Credit Checks**: Verify financial information with banks
|
|
- **Address Validation**: Confirm addresses with postal services
|
|
- **SMS/Email Services**: Send notifications via external providers
|
|
|
|
**Advanced Features:**
|
|
- **🔄 Real-time Sync**: Keep data synchronized across systems
|
|
- **📊 Data Transformation**: Convert between different data formats
|
|
- **🔒 Security**: Encrypt sensitive data in transit
|
|
- **⚡ Caching**: Cache responses to improve performance
|
|
|
|
**💎 Decision Point** - *Intelligent Process Routing*
|
|
- **🎯 Purpose**: Create smart branching logic based on data conditions and business rules
|
|
- **📍 How to Add**: Drag **"Decision Point"** from Core Components
|
|
- **⚙️ Configuration Options**:
|
|
- **Condition Builder**: Visual condition creation with drag-and-drop
|
|
- **Logic Operators**: AND, OR, NOT for complex condition combinations
|
|
- **Comparison Types**: Equals, greater than, less than, contains, exists
|
|
- **Variable References**: Use process variables in conditions
|
|
- **Default Path**: Fallback route when no conditions are met
|
|
- **Path Labels**: Descriptive names for each decision branch
|
|
- **Priority Order**: Set evaluation order for multiple conditions
|
|
- **👁️ Visual**: Diamond shape with branching arrows and condition labels
|
|
- **📊 Analytics**: Track which paths are taken most frequently
|
|
- **💼 Business Scenarios**:
|
|
- **Approval Workflows**: Route based on amount thresholds
|
|
- **Risk Assessment**: Different paths for high/medium/low risk
|
|
- **Category Routing**: Route applications to appropriate departments
|
|
- **Eligibility Checks**: Determine qualification for services
|
|
|
|
**Advanced Decision Logic:**
|
|
- **📊 Score-Based Routing**: Calculate scores and route accordingly
|
|
- **🕐 Time-Based Decisions**: Route based on dates, business hours
|
|
- **👥 User-Based Logic**: Route based on user roles, permissions
|
|
- **📈 Data-Driven Decisions**: Use historical data for intelligent routing
|
|
|
|
**📢 Notification** - *Multi-Channel Communication Hub*
|
|
- **🎯 Purpose**: Send targeted communications via multiple channels with personalized content
|
|
- **📍 How to Add**: Drag **"Notification"** from Communication Components
|
|
- **⚙️ Configuration Options**:
|
|
- **Notification Types**: Info, warning, error, success, reminder
|
|
- **Delivery Channels**: In-app, email, SMS, push notifications, webhooks
|
|
- **Recipient Configuration**: Users, roles, groups, external emails/phones
|
|
- **Message Templates**: Rich HTML email templates, SMS templates
|
|
- **Personalization**: Dynamic content with user data and variables
|
|
- **Scheduling**: Immediate, delayed, or recurring notifications
|
|
- **Escalation Rules**: Automatic escalation if no response
|
|
- **Delivery Tracking**: Read receipts, delivery confirmations
|
|
- **👁️ Visual**: Orange rectangle with bell icon and notification type
|
|
- **📊 Analytics**: Track delivery rates, open rates, response rates
|
|
- **💼 Business Scenarios**:
|
|
- **Status Updates**: Inform users about application progress
|
|
- **Deadline Reminders**: Alert about approaching deadlines
|
|
- **Approval Requests**: Notify approvers of pending tasks
|
|
- **System Alerts**: Technical notifications and error reporting
|
|
- **Marketing Communications**: Promotional messages and updates
|
|
|
|
**Advanced Notification Features:**
|
|
- **🎨 Rich Content**: Images, attachments, formatted text
|
|
- **🌐 Multi-Language**: Automatic language detection and translation
|
|
- **⏰ Smart Timing**: Send at optimal times based on user preferences
|
|
- **📱 Cross-Platform**: Consistent messaging across all devices
|
|
|
|
**Business Rule**
|
|
- **How to Add**: Drag "Business Rule" from the Core Components category
|
|
- **Configuration**:
|
|
- Create rule groups with conditions
|
|
- Set actions for each rule
|
|
- Configure rule priority
|
|
- **Visual**: Rectangle with rule icon
|
|
- **Use Case**: Data validation, calculations, decision logic
|
|
- **Zakat Scenario**:
|
|
- **When to Use**: Calculate Zakat eligibility based on multiple criteria
|
|
- **Example**: "Pengiraan Kelayakan Zakat" business rule
|
|
- **Configuration**: Rule 1: Income < Had Kifayah, Rule 2: No luxury assets, Rule 3: Malaysian citizen
|
|
|
|
**Script Task**
|
|
- **How to Add**: Drag "Script Task" from the Core Components category
|
|
- **Configuration**:
|
|
- Enter JavaScript code
|
|
- Set input and output variables
|
|
- Configure error handling
|
|
- **Visual**: Rectangle with code icon
|
|
- **Use Case**: Data manipulation, calculations, custom logic
|
|
- **Zakat Scenario**:
|
|
- **When to Use**: Calculate monthly expenses or determine Zakat amount
|
|
- **Example**: "Pengiraan Perbelanjaan Bulanan" script task
|
|
- **Configuration**: Sum all monthly expenses, calculate average, determine eligibility
|
|
|
|
**HTML Content**
|
|
- **How to Add**: Drag "HTML Content" from the Core Components category
|
|
- **Configuration**:
|
|
- Enter HTML code
|
|
- Add CSS styling if needed
|
|
- Configure JavaScript for interactivity
|
|
- **Visual**: Rectangle with HTML icon
|
|
- **Use Case**: Rich content, embedded applications, custom UI
|
|
- **Zakat Scenario**:
|
|
- **When to Use**: Display Zakat calculation results or guidelines
|
|
- **Example**: "Keputusan Pengiraan Zakat" HTML content
|
|
- **Configuration**: Display formatted calculation results with charts and explanations
|
|
|
|
**Sub Process**
|
|
- **How to Add**: Drag "Sub Process" from the Core Components category
|
|
- **Configuration**:
|
|
- Select another process from the dropdown
|
|
- Configure data mapping between processes
|
|
- Set sub-process parameters
|
|
- **Visual**: Rectangle with sub-process icon
|
|
- **Use Case**: Modular process design, reusable workflows
|
|
- **Zakat Scenario**:
|
|
- **When to Use**: Separate verification process for complex applications
|
|
- **Example**: "Proses Pengesahan Dokumen" sub-process
|
|
- **Configuration**: Call document verification process with applicant data
|
|
|
|
## 🎨 Advanced Components
|
|
|
|
*Sophisticated tools for complex business logic, integration, and process optimization.*
|
|
|
|
### **🧠 Business Logic & Automation**
|
|
|
|
**Horizontal Swimlane**
|
|
- **How to Add**: Drag "Horizontal Swimlane" from the Design Elements category
|
|
- **Configuration**:
|
|
- Set lane name and description
|
|
- Assign roles or departments
|
|
- Configure visual styling
|
|
- **Use Case**: Department separation, role-based organization
|
|
- **Zakat Scenario**:
|
|
- **When to Use**: Separate different departments in Zakat processing
|
|
- **Example**: "Bahagian Permohonan" and "Bahagian Pengesahan" swimlanes
|
|
- **Configuration**: Assign application officers and verification officers to respective lanes
|
|
|
|
**Vertical Swimlane**
|
|
- **How to Add**: Drag "Vertical Swimlane" from the Design Elements category
|
|
- **Configuration**:
|
|
- Set lane name and description
|
|
- Configure time-based organization
|
|
- Set visual styling
|
|
- **Use Case**: Time-based organization, sequential steps
|
|
- **Zakat Scenario**:
|
|
- **When to Use**: Organize process by time periods
|
|
- **Example**: "Minggu 1", "Minggu 2", "Minggu 3" time-based lanes
|
|
- **Configuration**: Track application processing time across weeks
|
|
|
|
**Text Annotation**
|
|
- **How to Add**: Drag "Text Annotation" from the Design Elements category
|
|
- **Configuration**:
|
|
- Enter explanatory text
|
|
- Position the annotation
|
|
- Configure text styling
|
|
- **Use Case**: Documentation, instructions, notes
|
|
- **Zakat Scenario**:
|
|
- **When to Use**: Add explanatory notes to process steps
|
|
- **Example**: "Nota: Had Kifayah = RM2,208 (2024)" annotation
|
|
- **Configuration**: Position near decision point, use smaller font for notes
|
|
|
|
## Creating Your First Process
|
|
|
|
**Step-by-Step Instructions:**
|
|
|
|
1. **Start Process Builder**
|
|
- Navigate to Process Builder
|
|
- Click "Create New Process"
|
|
- Enter process name and description
|
|
|
|
2. **Add Start Point**
|
|
- Drag "Start Point" to the canvas
|
|
- Position it at the top of your workflow
|
|
|
|
3. **Add Form Task**
|
|
- Drag "Form Task" below the start point
|
|
- Click the component to configure
|
|
- Select a form from the dropdown
|
|
- Assign to appropriate users or roles
|
|
|
|
4. **Add Decision Point**
|
|
- Drag "Decision Point" after the form task
|
|
- Configure conditions (e.g., approval status)
|
|
- Set paths for different outcomes
|
|
|
|
5. **Add End Points**
|
|
- Drag "End Point" for each decision path
|
|
- Configure completion actions
|
|
|
|
6. **Connect Components**
|
|
- Click and drag from component edges to create connections
|
|
- Ensure all paths lead to end points
|
|
|
|
7. **Test Your Process**
|
|
- Click "Preview" to test the workflow
|
|
- Verify all connections and conditions
|
|
|
|
8. **Save and Publish**
|
|
- Click "Save" to save your process
|
|
- Click "Publish" to make it available for execution
|
|
|
|
## Process Builder Features
|
|
|
|
**Visual Canvas**
|
|
- **How to Use**: Drag components from left panel to canvas
|
|
- **Connections**: Click and drag from component edges to create flow
|
|
- **Resizing**: Use handles to resize components
|
|
- **Repositioning**: Drag components to move them
|
|
|
|
**Component Configuration**
|
|
- **How to Access**: Click any component on the canvas
|
|
- **Settings Panel**: Opens on the right side
|
|
- **Configuration Options**: Properties, labels, behavior, connections
|
|
|
|
**Variable Management**
|
|
- **How to Access**: Click "Variables" tab in the right panel
|
|
- **Add Variables**: Click "Add Variable" and configure
|
|
- **Variable Types**: Text, number, date, boolean, array
|
|
- **Default Values**: Set initial values for variables
|
|
|
|
**Conditional Logic**
|
|
- **How to Create**: Use Decision Point components
|
|
- **Condition Builder**: Click "Add Condition" in decision settings
|
|
- **Logic Operators**: Use AND/OR for complex conditions
|
|
- **Default Path**: Set fallback path for unmatched conditions
|
|
|
|
**Form Integration**
|
|
- **How to Connect**: Use Form Task components
|
|
- **Form Selection**: Choose from your saved forms
|
|
- **User Assignment**: Assign to specific users or roles
|
|
- **Data Mapping**: Configure how form data flows through the process
|
|
|
|
**API Integration**
|
|
- **How to Configure**: Use API Call components
|
|
- **HTTP Methods**: GET, POST, PUT, DELETE
|
|
- **Request Configuration**: URL, headers, body
|
|
- **Response Handling**: Set output variables and error handling
|
|
|
|
**Save & Version Control**
|
|
- **Save**: Click "Save" button regularly
|
|
- **History**: Access process history to view previous versions
|
|
- **Publish**: Click "Publish" to make process available for execution
|
|
|
|
---
|
|
|
|
*Previous Chapter: [Form Management](03-form-management.md)*
|
|
|
|
*Next Chapter: [Process Management](05-process-management.md)* |