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

Process Builder

Table of Contents

1. Accessing Process Builder
2. Process Builder Interface
3. Process Components
4. Creating Your First Process
5. Process Builder Features

---

Accessing Process Builder

Step-by-Step Instructions:

1. From the main menu, click "Process Builder"
2. Click "Create New Process" button
3. Enter a process name and description
4. Click "Create" to start building

Process Builder Interface

Interface Layout:

• Left Panel: Component library with process components
• Center Canvas: Visual workflow design area
• Right Panel: Component configuration and properties
• Top Toolbar: Save, publish, and navigation controls

Navigation:

• Zoom: Use mouse wheel or zoom controls
• Pan: Click and drag on empty canvas areas
• Select: Click components to select and configure them

Process Components

Core Components

Start Point

• How to Add: Drag "Start Point" from the Core Components category
• Configuration:
  • Set process name and description
  • Configure trigger conditions if needed
• Visual: Green circle with "Start" label
• Use Case: Process entry point, trigger events
• Zakat Scenario:
  • When to Use: Beginning of Zakat application process
  • Example: "Permohonan Zakat Asnaf" process start
  • Configuration: Trigger when user submits Zakat application form

End Point

• How to Add: Drag "End Point" from the Core Components category
• Configuration:
  • Set completion conditions
  • Configure final actions
• Visual: Red circle with "End" label
• Use Case: Process completion, final states
• Zakat Scenario:
  • When to Use: Completion of Zakat approval or rejection process
  • Example: "Permohonan Diluluskan" or "Permohonan Ditolak" end points
  • Configuration: Send final notification to applicant

Form Task

• How to Add: Drag "Form Task" from the Core Components category
• Configuration:
  • Click component to open settings
  • Select a form from the dropdown
  • Assign to users or roles
  • Set task description and instructions
• Visual: Rectangle with form icon
• Use Case: Data collection, user input, approvals
• Zakat Scenario:
  • When to Use: Zakat application form submission or verification forms
  • Example: "Borang Permohonan Zakat Asnaf" form task
  • Configuration: Assign to Zakat officers, set deadline for completion

API Call

• How to Add: Drag "API Call" from the Core Components category
• Configuration:
  • Set HTTP method (GET, POST, PUT, DELETE)
  • Enter API URL
  • Configure request headers and body
  • Set output variable name
  • Configure error handling
• Visual: Rectangle with API icon
• Use Case: Integrate with external systems, fetch data
• Zakat Scenario:
  • When to Use: Verify applicant's IC with JPN or check bank account details
  • Example: "Pengesahan IC dengan JPN" API call
  • Configuration: POST request to JPN API, validate IC number authenticity

Decision Point

• How to Add: Drag "Decision Point" from the Core Components category
• Configuration:
  • Click component to open settings
  • Add conditions for different paths
  • Set default path for fallback
  • Configure condition logic (AND/OR)
• Visual: Diamond shape with decision icon
• Use Case: Conditional routing, approval workflows
• Zakat Scenario:
  • When to Use: Determine if applicant qualifies for Zakat based on income
  • Example: "Pendapatan < Had Kifayah?" decision point
  • Configuration: If monthly income < RM2,208 (Had Kifayah), proceed to approval; else reject

Notification

• How to Add: Drag "Notification" from the Core Components category
• Configuration:
  • Set notification type (info, warning, error)
  • Choose recipient type (user, role, email)
  • Enter subject and message
  • Configure delivery options (in-app, email, SMS)
• Visual: Rectangle with notification icon
• Use Case: Status updates, reminders, alerts
• Zakat Scenario:
  • When to Use: Notify applicant about application status or request additional documents
  • Example: "Notifikasi Status Permohonan" notification
  • Configuration: Send SMS and email to applicant with application status update

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

Design Elements

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