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