# 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)* 