Md Afiq Iskandar
e4548647b5
- Added comprehensive documentation covering key features, user guides, and best practices for the Corrad ProcessMaker platform. - Introduced new API endpoints for serving documentation files dynamically. - Enhanced the navigation structure to include a dedicated documentation section for improved accessibility. - Updated the Nuxt configuration to optimize the development environment and ensure proper handling of dependencies. - Included new dependencies in package.json to support documentation rendering and processing. - Improved the user interface for the documentation page, enhancing the overall user experience.
295 lines
11 KiB
Markdown
295 lines
11 KiB
Markdown
# 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)* |