corrad-bp/content/documentation/04-process-builder.md

Process Builder

Design professional BPMN-compliant workflows with visual drag-and-drop tools for complex business process automation.

Table of Contents

1. Getting Started
2. Process Builder Interface
3. Core Process Components
4. Advanced Components
5. Creating Your First Process
6. Advanced Process Features
7. 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

Next Chapter: Process Management