# Process Builder

## Table of Contents

1. [Accessing Process Builder](#accessing-process-builder)
2. [Process Builder Interface](#process-builder-interface)
3. [Process Components](#process-components)
4. [Creating Your First Process](#creating-your-first-process)
5. [Process Builder Features](#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](03-form-management.md)*

*Next Chapter: [Process Management](05-process-management.md)*