Update Documentation and Configuration for Corrad ProcessMaker
- 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.
This commit is contained in:
parent
84156833a2
commit
e4548647b5
131
content/documentation/01-introduction-getting-started.md
Normal file
131
content/documentation/01-introduction-getting-started.md
Normal file
@ -0,0 +1,131 @@
|
||||
# Introduction & Getting Started
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Introduction](#introduction)
|
||||
2. [What is Business Process Management?](#what-is-business-process-management)
|
||||
3. [Key Differences from Low-Code Platforms](#key-differences-from-low-code-platforms)
|
||||
4. [Core Capabilities](#core-capabilities)
|
||||
5. [Getting Started](#getting-started)
|
||||
6. [System Access](#system-access)
|
||||
7. [First Steps](#first-steps)
|
||||
|
||||
---
|
||||
|
||||
## Introduction
|
||||
|
||||
**Corrad ProcessMaker is a Business Process Management (BPM) platform designed for creating, automating, and managing complex business workflows.** This is NOT a low-code application builder - it's a specialized tool for designing and executing business processes with visual workflow design, form integration, and process automation capabilities.
|
||||
|
||||
### What is Business Process Management?
|
||||
|
||||
Business Process Management focuses on:
|
||||
- **Process Design**: Creating visual workflows that represent business logic
|
||||
- **Process Automation**: Automating repetitive tasks and decision points
|
||||
- **Process Monitoring**: Tracking process execution and performance
|
||||
- **Process Optimization**: Identifying bottlenecks and improving efficiency
|
||||
|
||||
### Key Differences from Low-Code Platforms
|
||||
|
||||
| 🔄 **BPM Platform (ProcessMaker)** | 🛠️ **Low-Code Builder** |
|
||||
|----------------------------------|------------------------|
|
||||
| **Focus**: Workflow design and process automation | **Focus**: Application development and UI creation |
|
||||
| **Standards**: BPMN (Business Process Model and Notation) | **Standards**: Custom application development patterns |
|
||||
| **Core Elements**: Process flow, decision points, task routing | **Core Elements**: UI components, data models, screens |
|
||||
| **Target Users**: Business analysts, process designers | **Target Users**: Developers, citizen developers |
|
||||
| **Optimization**: Process monitoring, analytics, efficiency | **Optimization**: Rapid application development, deployment |
|
||||
| **Output**: Automated business workflows | **Output**: Custom applications and systems |
|
||||
|
||||
### Core Capabilities
|
||||
|
||||
#### 🎨 **Process Design & Automation**
|
||||
- **Visual Workflow Designer**: BPMN-compliant drag-and-drop interface
|
||||
- **Smart Decision Points**: Conditional routing and business logic
|
||||
- **Role-Based Task Assignment**: User and group management
|
||||
- **Data Flow Management**: Process variables and data mapping
|
||||
|
||||
#### 📝 **Dynamic Form Integration**
|
||||
- **Intelligent Form Builder**: Create adaptive data collection forms
|
||||
- **Seamless Process Integration**: Forms embedded directly in workflows
|
||||
- **Conditional Logic**: Show/hide fields based on user input
|
||||
- **Multi-Step Workflows**: Complex form sequences with validation
|
||||
|
||||
#### 📊 **Real-Time Execution & Monitoring**
|
||||
- **Live Process Tracking**: Monitor workflows as they execute
|
||||
- **Task Queue Management**: Automated assignment and routing
|
||||
- **Performance Analytics**: Detailed metrics and reporting
|
||||
- **Exception Handling**: Error management and recovery processes
|
||||
|
||||
#### 🔗 **Enterprise Integration**
|
||||
- **API Connectivity**: Connect to external systems and databases
|
||||
- **Business Rules Engine**: Complex decision-making capabilities
|
||||
- **Smart Notifications**: Multi-channel communication system
|
||||
- **Compliance & Audit**: Complete trail for regulatory requirements
|
||||
|
||||
> **💡 Purpose**: This guide provides comprehensive, step-by-step instructions for mastering ProcessMaker's core BPM features to design, implement, and optimize business processes effectively.
|
||||
|
||||
## 🚀 Getting Started
|
||||
|
||||
ProcessMaker is a **web-based platform** - no installation required! Access everything through your browser.
|
||||
|
||||
### 🔐 System Access
|
||||
|
||||
**Quick Login Process:**
|
||||
1. **Open Browser** → Use any modern web browser (Chrome, Firefox, Safari, Edge)
|
||||
2. **Navigate to URL** → Go to your organization's ProcessMaker instance
|
||||
3. **Enter Credentials** → Use your assigned username and password
|
||||
4. **Access Dashboard** → Click "Login" to enter the main interface
|
||||
|
||||
> **🔒 Security Note**: Contact your system administrator for login credentials and access permissions.
|
||||
|
||||
### 🗺️ Your First Tour
|
||||
|
||||
**Start with these key areas:**
|
||||
|
||||
#### 📊 **Dashboard** - *Your Control Center*
|
||||
- View system statistics and recent activity
|
||||
- Access quick actions for common tasks
|
||||
- Monitor active processes and pending tasks
|
||||
- Get an overview of your work queue
|
||||
|
||||
#### 📝 **Form Builder** - *Create Data Collection*
|
||||
- Design dynamic, intelligent forms
|
||||
- Add conditional logic and validation
|
||||
- Preview and test form functionality
|
||||
- Manage form templates and versions
|
||||
|
||||
#### ⚙️ **Process Builder** - *Design Workflows*
|
||||
- Create visual business workflows
|
||||
- Configure decision points and routing
|
||||
- Integrate forms and external systems
|
||||
- Test and publish process definitions
|
||||
|
||||
#### 📈 **Process Management** - *Monitor & Optimize*
|
||||
- Track active process instances
|
||||
- Analyze performance metrics
|
||||
- Manage cases and task assignments
|
||||
- Generate reports and insights
|
||||
|
||||
### 🎯 Recommended Learning Path
|
||||
|
||||
**Follow this sequence for optimal learning:**
|
||||
|
||||
| Step | Chapter | Focus | Time |
|
||||
|------|---------|-------|------|
|
||||
| **1** | Current Chapter | BPM concepts & platform overview | 15 min |
|
||||
| **2** | [Form Builder](02-form-builder.md) | Create your first form | 30 min |
|
||||
| **3** | [Process Builder](04-process-builder.md) | Design your first workflow | 45 min |
|
||||
| **4** | [Management](05-process-management.md) | Monitor and optimize | 20 min |
|
||||
| **5** | [Advanced Topics](06-faq-advanced-topics.md) | Complex scenarios | As needed |
|
||||
|
||||
### ✅ Quick Wins - First 30 Minutes
|
||||
|
||||
**New User Checklist:**
|
||||
- [ ] Log in and explore the dashboard
|
||||
- [ ] Browse existing forms and processes (if available)
|
||||
- [ ] Try the Form Builder with a simple contact form
|
||||
- [ ] Create a basic approval workflow in Process Builder
|
||||
- [ ] Review the help documentation and tooltips
|
||||
|
||||
---
|
||||
|
||||
**🎯 Next Step**: Ready to build forms? Continue to [**Form Builder Guide →**](02-form-builder.md)
|
||||
269
content/documentation/03-form-management.md
Normal file
269
content/documentation/03-form-management.md
Normal file
@ -0,0 +1,269 @@
|
||||
# Form Management
|
||||
|
||||
*Master the organization and administration of your forms with comprehensive management tools.*
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Accessing Form Management](#accessing-form-management)
|
||||
2. [Form Organization & Search](#form-organization--search)
|
||||
3. [Form Actions & Operations](#form-actions--operations)
|
||||
4. [Form Templates System](#form-templates-system)
|
||||
5. [Version Control & History](#version-control--history)
|
||||
6. [Form Collaboration](#form-collaboration)
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Accessing Form Management
|
||||
|
||||
**Multiple Access Methods:**
|
||||
|
||||
### 📋 **From Form Builder**
|
||||
1. Navigate to **Form Builder** from the main menu
|
||||
2. Click the **management dropdown** (⋮) in the header
|
||||
3. Select **"Manage Forms"**
|
||||
|
||||
### 🏠 **From Dashboard**
|
||||
1. Go to the main **Dashboard**
|
||||
2. Locate the **"Forms"** section
|
||||
3. Click **"View All Forms"** or **"Manage"**
|
||||
|
||||
### 🔗 **Direct Navigation**
|
||||
- Use breadcrumb navigation from any form-related page
|
||||
- Access via quick links in the system sidebar
|
||||
|
||||
> **💡 Pro Tip**: Bookmark the Form Management page for quick access during daily workflows.
|
||||
|
||||
## 📊 Form Organization & Search
|
||||
|
||||
### **📋 List View Interface**
|
||||
|
||||
**Table Columns:**
|
||||
| Column | Information Displayed |
|
||||
|--------|----------------------|
|
||||
| 📝 **Name** | Form title and identifier |
|
||||
| 📄 **Description** | Brief form purpose summary |
|
||||
| 🧩 **Components** | Number of form fields/components |
|
||||
| 👤 **Creator** | Form author information |
|
||||
| 📅 **Created** | Initial creation date |
|
||||
| 🔄 **Last Modified** | Most recent update timestamp |
|
||||
| 📊 **Status** | Draft, Active, Archived |
|
||||
| 📈 **Usage** | Number of submissions/responses |
|
||||
|
||||
**Sorting Options:**
|
||||
- **Alphabetical**: Sort by form name (A-Z or Z-A)
|
||||
- **Chronological**: Sort by creation or modification date
|
||||
- **Usage-Based**: Sort by most/least used forms
|
||||
- **Status-Based**: Group by draft, active, or archived status
|
||||
|
||||
### 🔍 **Advanced Search & Filtering**
|
||||
|
||||
**Search Capabilities:**
|
||||
- **Text Search**: Search by form name, description, or content
|
||||
- **Component Search**: Find forms containing specific field types
|
||||
- **Creator Search**: Filter by form author
|
||||
- **Tag Search**: Use custom tags for organization
|
||||
|
||||
**Filter Options:**
|
||||
- **📊 Status Filter**: Draft, Active, Archived, Deleted
|
||||
- **📅 Date Range**: Created or modified within specific periods
|
||||
- **👥 Creator Filter**: Forms by specific users or teams
|
||||
- **🏷️ Category Filter**: Organize by department or purpose
|
||||
- **📈 Usage Filter**: High, medium, or low usage forms
|
||||
|
||||
**Quick Actions:**
|
||||
- **🔄 Refresh**: Update form list with latest changes
|
||||
- **⚙️ View Options**: Toggle between list and card views
|
||||
- **📤 Export List**: Download form inventory as CSV/Excel
|
||||
- **🗑️ Bulk Actions**: Select multiple forms for batch operations
|
||||
|
||||
## ⚡ Form Actions & Operations
|
||||
|
||||
### **Primary Actions**
|
||||
|
||||
**✏️ Edit Form**
|
||||
- **Purpose**: Open form in Form Builder for modifications
|
||||
- **Access**: Click **"Edit"** button in actions column
|
||||
- **Features**: Full editing capabilities with auto-save
|
||||
- **Use Case**: Update form fields, logic, or design
|
||||
|
||||
**👁️ Preview Form**
|
||||
- **Purpose**: Test form functionality as an end user
|
||||
- **Access**: Click **"Preview"** button
|
||||
- **Features**: Interactive testing with validation
|
||||
- **Use Case**: Quality assurance before publishing
|
||||
|
||||
**📋 Duplicate Form**
|
||||
- **Purpose**: Create an exact copy for modification
|
||||
- **Process**:
|
||||
1. Click **"Duplicate"**
|
||||
2. Enter new form name
|
||||
3. Optionally modify description
|
||||
4. Click **"Create Copy"**
|
||||
- **Use Case**: Template-based form creation
|
||||
|
||||
### **Management Actions**
|
||||
|
||||
**📤 Export Form**
|
||||
- **Purpose**: Download form configuration for backup or sharing
|
||||
- **Formats**: JSON, PDF documentation, Excel template
|
||||
- **Process**: Click **"Export"** → Select format → Download
|
||||
- **Use Case**: Backup, migration, or documentation
|
||||
|
||||
**🗑️ Delete Form**
|
||||
- **Purpose**: Permanently remove form from system
|
||||
- **Process**:
|
||||
1. Click **"Delete"**
|
||||
2. Confirm deletion in popup
|
||||
3. Enter form name for verification
|
||||
4. Click **"Permanently Delete"**
|
||||
- **⚠️ Warning**: This action cannot be undone
|
||||
|
||||
**📦 Archive Form**
|
||||
- **Purpose**: Hide form from active list while preserving data
|
||||
- **Benefits**: Reduces clutter, maintains historical records
|
||||
- **Restoration**: Archived forms can be restored anytime
|
||||
- **Use Case**: Seasonal forms or outdated processes
|
||||
|
||||
## 🎨 Form Templates System
|
||||
|
||||
### **📚 Template Library**
|
||||
|
||||
**Accessing Templates:**
|
||||
1. **From Form Builder**: Click dropdown menu → **"Templates"**
|
||||
2. **From Form Management**: Click **"Browse Templates"**
|
||||
3. **During Creation**: Select **"Start from Template"** when creating new forms
|
||||
|
||||
**Template Categories:**
|
||||
- **📋 Common Forms**: Contact, Registration, Feedback
|
||||
- **💼 Business Forms**: Invoice, Purchase Order, HR Forms
|
||||
- **🏛️ Government Forms**: Applications, Permits, Licenses
|
||||
- **🎓 Educational Forms**: Enrollment, Assessment, Surveys
|
||||
- **🏥 Healthcare Forms**: Patient Intake, Medical Records
|
||||
- **🎪 Event Forms**: Registration, RSVP, Feedback
|
||||
|
||||
### **🛠️ Using Templates**
|
||||
|
||||
**Template Selection Process:**
|
||||
1. **Browse Categories**: Navigate through organized template sections
|
||||
2. **Preview Template**: Click **"Preview"** to see template structure
|
||||
3. **Template Details**: Review component count, features, and use cases
|
||||
4. **Select Template**: Click **"Use This Template"**
|
||||
5. **Customize**: Modify fields, labels, and logic as needed
|
||||
6. **Save**: Give your form a unique name and save
|
||||
|
||||
**Template Customization:**
|
||||
- **Add/Remove Fields**: Modify template structure
|
||||
- **Update Labels**: Change field names and descriptions
|
||||
- **Adjust Logic**: Modify conditional logic and validation
|
||||
- **Branding**: Apply your organization's styling
|
||||
- **Integration**: Connect with your specific systems
|
||||
|
||||
### **🏗️ Creating Custom Templates**
|
||||
|
||||
**From Existing Forms:**
|
||||
1. **Open Successful Form**: Select a well-designed form
|
||||
2. **Save as Template**: Click **"Save as Template"** in dropdown
|
||||
3. **Template Details**:
|
||||
- Enter descriptive template name
|
||||
- Add detailed description
|
||||
- Select appropriate category
|
||||
- Add tags for searchability
|
||||
4. **Configure Sharing**: Set template visibility (personal, team, organization)
|
||||
5. **Publish Template**: Make available for reuse
|
||||
|
||||
**Template Best Practices:**
|
||||
- **Generic Labels**: Use placeholder text that's easily customizable
|
||||
- **Modular Design**: Create templates that are easy to modify
|
||||
- **Clear Documentation**: Include usage instructions and examples
|
||||
- **Test Thoroughly**: Ensure template functionality before sharing
|
||||
- **Regular Updates**: Maintain templates based on user feedback
|
||||
|
||||
**Template Management:**
|
||||
- **📊 Usage Analytics**: Track how often templates are used
|
||||
- **🔄 Version Control**: Maintain template versions and updates
|
||||
- **👥 Sharing Settings**: Control template access and permissions
|
||||
- **📝 Feedback Collection**: Gather user feedback for improvements
|
||||
|
||||
## 🔄 Version Control & History
|
||||
|
||||
### **📈 Accessing Form History**
|
||||
|
||||
**Navigation Methods:**
|
||||
1. **From Form List**: Click **"History"** button in actions column
|
||||
2. **From Form Editor**: Click **"Version History"** in toolbar
|
||||
3. **From Form Details**: Select **"View History"** in info panel
|
||||
|
||||
### **📊 Version History Interface**
|
||||
|
||||
**History Timeline Display:**
|
||||
| Column | Information |
|
||||
|--------|-----------|
|
||||
| 🕐 **Timestamp** | Exact date and time of change |
|
||||
| 👤 **Author** | User who made the modification |
|
||||
| 📝 **Description** | Summary of changes made |
|
||||
| 🔢 **Version** | Version number (e.g., v1.2.3) |
|
||||
| 📊 **Change Type** | Major, Minor, or Patch changes |
|
||||
| 🏷️ **Tags** | Custom labels for version organization |
|
||||
|
||||
### **🔍 Version Analysis**
|
||||
|
||||
**Change Detection:**
|
||||
- **Field Changes**: Added, modified, or removed form fields
|
||||
- **Logic Updates**: Conditional logic and validation modifications
|
||||
- **Design Changes**: Layout, styling, and visual updates
|
||||
- **Settings Updates**: Form configuration and behavior changes
|
||||
|
||||
**Comparison Tools:**
|
||||
1. **Select Versions**: Choose two versions to compare
|
||||
2. **Side-by-Side View**: Visual comparison of differences
|
||||
3. **Highlight Changes**: Color-coded additions, modifications, deletions
|
||||
4. **Change Summary**: Quantified overview of modifications
|
||||
|
||||
### **⚡ Version Management Actions**
|
||||
|
||||
**🔄 Restore Previous Version**
|
||||
- **Process**:
|
||||
1. Select version to restore
|
||||
2. Click **"Restore This Version"**
|
||||
3. Confirm restoration in popup
|
||||
4. New version created with restored content
|
||||
- **Safety**: Original current version is preserved
|
||||
|
||||
**📋 Create Version Branch**
|
||||
- **Purpose**: Create alternative version for testing
|
||||
- **Use Case**: Experimental changes without affecting main form
|
||||
- **Merge**: Combine successful branches back to main version
|
||||
|
||||
**🏷️ Version Tagging**
|
||||
- **Tag Versions**: Add descriptive labels (e.g., "Production", "Testing")
|
||||
- **Quick Access**: Filter versions by tags
|
||||
- **Organization**: Group related versions together
|
||||
|
||||
## 👥 Form Collaboration
|
||||
|
||||
### **🤝 Team Collaboration Features**
|
||||
|
||||
**Multi-User Editing:**
|
||||
- **Real-time Sync**: Multiple users can view changes simultaneously
|
||||
- **Edit Locking**: Prevent conflicts during active editing
|
||||
- **Change Notifications**: Alert team members of modifications
|
||||
- **Comment System**: Add notes and feedback on form elements
|
||||
|
||||
**Permission Management:**
|
||||
- **View Only**: Read access to form structure and data
|
||||
- **Edit Access**: Modify form fields and configuration
|
||||
- **Admin Rights**: Full control including deletion and sharing
|
||||
- **Custom Roles**: Define specific permission sets
|
||||
|
||||
**Review Workflow:**
|
||||
- **Draft Submission**: Submit forms for review before publishing
|
||||
- **Approval Process**: Multi-level approval for form changes
|
||||
- **Feedback Loop**: Incorporate reviewer comments and suggestions
|
||||
- **Publishing Control**: Controlled release of form versions
|
||||
|
||||
---
|
||||
|
||||
**📚 Related Documentation:**
|
||||
- *Previous Chapter: [Form Builder →](02-form-builder.md)*
|
||||
- *Next Chapter: [Process Builder →](04-process-builder.md)*
|
||||
- *Advanced Topics: [FAQ & Advanced Topics →](06-faq-advanced-topics.md)*
|
||||
465
content/documentation/04-process-builder.md
Normal file
465
content/documentation/04-process-builder.md
Normal file
@ -0,0 +1,465 @@
|
||||
# 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)*
|
||||
113
content/documentation/README.md
Normal file
113
content/documentation/README.md
Normal file
@ -0,0 +1,113 @@
|
||||
# Corrad ProcessMaker Documentation
|
||||
|
||||
Welcome to the comprehensive documentation for Corrad ProcessMaker, a powerful Business Process Management (BPM) platform designed for creating, automating, and managing complex business workflows.
|
||||
|
||||
## 📚 Documentation Overview
|
||||
|
||||
This documentation is organized into focused chapters, each building upon the previous to provide you with a complete understanding of the platform.
|
||||
|
||||
### 🚀 [1. Introduction & Getting Started](01-introduction-getting-started.md)
|
||||
**Perfect for new users**
|
||||
- System overview and BPM concepts
|
||||
- Getting started guide and first steps
|
||||
- Key differences from low-code platforms
|
||||
- Core capabilities and features
|
||||
|
||||
### 📝 [2. Form Builder](02-form-builder.md)
|
||||
**Learn to create dynamic forms**
|
||||
- Form Builder interface and navigation
|
||||
- Complete form component catalog
|
||||
- Step-by-step form creation guide
|
||||
- Advanced form features and conditional logic
|
||||
|
||||
### 📋 [3. Form Management](03-form-management.md)
|
||||
**Organize and manage your forms**
|
||||
- Form management interface
|
||||
- Form templates and version history
|
||||
- Search, filter, and organization tools
|
||||
- Form sharing and collaboration
|
||||
|
||||
### ⚙️ [4. Process Builder](04-process-builder.md)
|
||||
**Design powerful business workflows**
|
||||
- Process Builder interface and tools
|
||||
- Complete process component catalog
|
||||
- Step-by-step process creation guide
|
||||
- BPMN standards and best practices
|
||||
|
||||
### 📊 [5. Process Management](05-process-management.md)
|
||||
**Monitor and optimize your processes**
|
||||
- Process dashboard and analytics
|
||||
- Case management and monitoring
|
||||
- Performance metrics and reporting
|
||||
- Process optimization techniques
|
||||
|
||||
### 💡 [6. FAQ & Advanced Topics](06-faq-advanced-topics.md)
|
||||
**Advanced scenarios and solutions**
|
||||
- Complex business scenarios
|
||||
- Technical implementation guides
|
||||
- Best practices and troubleshooting
|
||||
- Advanced configuration options
|
||||
|
||||
## 🎯 Quick Start Guide
|
||||
|
||||
Choose your path based on your experience level:
|
||||
|
||||
### 👋 **New to BPM?**
|
||||
1. Start with [**Introduction & Getting Started**](01-introduction-getting-started.md)
|
||||
2. Learn about [**Form Builder**](02-form-builder.md) basics
|
||||
3. Explore [**Process Builder**](04-process-builder.md) fundamentals
|
||||
|
||||
### 🔧 **Ready to Build?**
|
||||
1. Jump to [**Form Builder**](02-form-builder.md) for form creation
|
||||
2. Move to [**Process Builder**](04-process-builder.md) for workflow design
|
||||
3. Use [**Management**](05-process-management.md) for monitoring
|
||||
|
||||
### 🚀 **Advanced User?**
|
||||
1. Check [**FAQ & Advanced Topics**](06-faq-advanced-topics.md) for complex scenarios
|
||||
2. Review management chapters for optimization tips
|
||||
3. Explore integration and API capabilities
|
||||
|
||||
## 🏗️ What is Corrad ProcessMaker?
|
||||
|
||||
Corrad ProcessMaker is a **specialized Business Process Management (BPM) platform** that focuses on:
|
||||
|
||||
> **🎯 Core Focus**: Designing, automating, and managing complex business workflows with visual tools and BPMN standards.
|
||||
|
||||
### ✨ Key Capabilities
|
||||
|
||||
| Feature | Description |
|
||||
|---------|-------------|
|
||||
| 🎨 **Visual Process Design** | Drag-and-drop workflow designer with BPMN compliance |
|
||||
| 📝 **Dynamic Form Builder** | Create intelligent forms with conditional logic |
|
||||
| ⚡ **Process Automation** | Automated task assignment and workflow execution |
|
||||
| 📊 **Real-time Monitoring** | Live analytics and performance tracking |
|
||||
| 🔗 **System Integration** | API connectivity for external systems |
|
||||
| 👥 **Role Management** | Advanced user roles and permissions |
|
||||
|
||||
### 🆚 BPM vs Low-Code Platforms
|
||||
|
||||
**Corrad ProcessMaker (BPM)** | **Traditional Low-Code**
|
||||
---|---
|
||||
Workflow-first design | UI-first development
|
||||
BPMN standard compliance | Custom application patterns
|
||||
Process optimization focus | Rapid app development
|
||||
Business analyst friendly | Developer-oriented
|
||||
Process monitoring & analytics | General application features
|
||||
|
||||
## 📖 How to Navigate This Documentation
|
||||
|
||||
- **📖 Sequential Reading**: Follow chapters 1-6 for comprehensive learning
|
||||
- **🎯 Topic-Specific**: Jump directly to relevant sections using the navigation
|
||||
- **🔍 Reference Guide**: Use search and bookmarks for quick lookups
|
||||
- **💡 Problem-Solving**: Start with FAQ section for specific questions
|
||||
|
||||
## 🤝 Getting Help
|
||||
|
||||
- **Built-in Help**: Use the help tooltips and guides within the application
|
||||
- **Documentation Search**: Use Ctrl+K to quickly find information
|
||||
- **Best Practices**: Check the FAQ section for proven approaches
|
||||
- **Community**: Share your experiences and learn from others
|
||||
|
||||
---
|
||||
|
||||
> 💡 **Tip**: Each chapter includes practical examples and step-by-step guides to help you master the platform efficiently.
|
||||
407
docs/documentation/02-form-builder.md
Normal file
407
docs/documentation/02-form-builder.md
Normal file
@ -0,0 +1,407 @@
|
||||
# Form Builder
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Accessing Form Builder](#accessing-form-builder)
|
||||
2. [Form Builder Interface](#form-builder-interface)
|
||||
3. [Form Components](#form-components)
|
||||
4. [Creating Your First Form](#creating-your-first-form)
|
||||
5. [Form Builder Features](#form-builder-features)
|
||||
|
||||
---
|
||||
|
||||
## Accessing Form Builder
|
||||
|
||||
**Step-by-Step Instructions:**
|
||||
1. From the main menu, click **"Form Builder"**
|
||||
2. Click **"Create New Form"** button
|
||||
3. Enter a form name in the header field
|
||||
4. You're now ready to build your form
|
||||
|
||||
## Form Builder Interface
|
||||
|
||||
**Interface Layout:**
|
||||
- **Left Panel**: Component library with all available form components
|
||||
- **Center Canvas**: Drag-and-drop area where you build your form
|
||||
- **Right Panel**: Component settings and configuration panel
|
||||
- **Top Header**: Form name, save button, and preview toggle
|
||||
|
||||
**Navigation:**
|
||||
- Use the search bar in the component library to find specific components
|
||||
- Click components to add them to your form
|
||||
- Drag components to reposition them on the canvas
|
||||
|
||||
## Form Components
|
||||
|
||||
### Text Inputs Category
|
||||
|
||||
**Text Field**
|
||||
- **How to Add**: Drag "Text Field" from the Text Inputs category
|
||||
- **Configuration**:
|
||||
- Click the component to open settings
|
||||
- Set label, placeholder, and help text
|
||||
- Configure validation rules (required, min/max length)
|
||||
- **Use Case**: Names, titles, short descriptions
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Collecting applicant's full name, IC number, or address
|
||||
- **Example**: "Nama Penuh Pemohon" field for Zakat Asnaf application
|
||||
- **Configuration**: Set as required field with validation for Malaysian IC format
|
||||
|
||||
**Text Area**
|
||||
- **How to Add**: Drag "Text Area" from the Text Inputs category
|
||||
- **Configuration**:
|
||||
- Set label and placeholder text
|
||||
- Configure rows and character limits
|
||||
- Enable rich text formatting if needed
|
||||
- **Use Case**: Descriptions, comments, long-form content
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Collecting detailed reasons for Zakat application
|
||||
- **Example**: "Sebab Permohonan Zakat" field for explaining financial hardship
|
||||
- **Configuration**: Set minimum 50 characters, maximum 500 characters
|
||||
|
||||
**Number Field**
|
||||
- **How to Add**: Drag "Number Field" from the Text Inputs category
|
||||
- **Configuration**:
|
||||
- Set minimum and maximum values
|
||||
- Configure decimal places and step increments
|
||||
- Add validation rules
|
||||
- **Use Case**: Quantities, amounts, scores
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Collecting monthly income, number of dependents, or property values
|
||||
- **Example**: "Pendapatan Bulanan (RM)" field for income assessment
|
||||
- **Configuration**: Set minimum 0, maximum 50,000, 2 decimal places
|
||||
|
||||
**Email Field**
|
||||
- **How to Add**: Drag "Email Field" from the Text Inputs category
|
||||
- **Configuration**:
|
||||
- Set label and placeholder
|
||||
- Email validation is automatic
|
||||
- **Use Case**: Contact information, user registration
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Collecting applicant's email for notifications
|
||||
- **Example**: "Emel Pemohon" field for Zakat application updates
|
||||
- **Configuration**: Set as optional field with email format validation
|
||||
|
||||
**Password Field**
|
||||
- **How to Add**: Drag "Password Field" from the Text Inputs category
|
||||
- **Configuration**:
|
||||
- Set label and placeholder
|
||||
- Configure password strength requirements
|
||||
- **Use Case**: User authentication, account creation
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Creating secure login for Zakat portal
|
||||
- **Example**: "Kata Laluan" field for applicant account creation
|
||||
- **Configuration**: Set minimum 8 characters with strength indicator
|
||||
|
||||
**URL Field**
|
||||
- **How to Add**: Drag "URL Field" from the Text Inputs category
|
||||
- **Configuration**:
|
||||
- Set label and placeholder
|
||||
- URL validation is automatic
|
||||
- **Use Case**: Links, references, social media profiles
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Collecting social media profiles for verification
|
||||
- **Example**: "Profil Facebook" field for additional contact verification
|
||||
- **Configuration**: Set as optional field with URL validation
|
||||
|
||||
**Phone Field**
|
||||
- **How to Add**: Drag "Phone Field" from the Text Inputs category
|
||||
- **Configuration**:
|
||||
- Set label and placeholder
|
||||
- Configure phone number format
|
||||
- **Use Case**: Contact information, customer details
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Collecting applicant's contact number
|
||||
- **Example**: "Nombor Telefon" field for Zakat application contact
|
||||
- **Configuration**: Set Malaysian phone format (01X-XXXXXXX)
|
||||
|
||||
**Masked Input**
|
||||
- **How to Add**: Drag "Masked Input" from the Text Inputs category
|
||||
- **Configuration**:
|
||||
- Set custom mask pattern (e.g., ###-###-####)
|
||||
- Configure placeholder and help text
|
||||
- **Use Case**: Credit cards, social security numbers, postal codes
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Collecting IC number with proper formatting
|
||||
- **Example**: "Nombor IC" field with format 000000-00-0000
|
||||
- **Configuration**: Set mask pattern ###-###-#### for IC format
|
||||
|
||||
**Hidden Field**
|
||||
- **How to Add**: Drag "Hidden Field" from the Text Inputs category
|
||||
- **Configuration**:
|
||||
- Set default value
|
||||
- Note: This field is not visible to users
|
||||
- **Use Case**: Default values, system data, calculations
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Storing application date or system-generated values
|
||||
- **Example**: "Tarikh Permohonan" field automatically set to current date
|
||||
- **Configuration**: Set default value to current date/time
|
||||
|
||||
### Selection & Toggle Category
|
||||
|
||||
**Select Dropdown**
|
||||
- **How to Add**: Drag "Select Dropdown" from the Selection & Toggle category
|
||||
- **Configuration**:
|
||||
- Click component to open settings
|
||||
- Add options in the "Options" section
|
||||
- Set placeholder text
|
||||
- Configure validation
|
||||
- **Use Case**: Categories, status options, country selection
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Selecting Zakat category or state of residence
|
||||
- **Example**: "Kategori Zakat" dropdown with options: Asnaf, Fakir, Miskin, etc.
|
||||
- **Configuration**: Add options: Asnaf, Fakir, Miskin, Amil, Muallaf, Riqab, Gharimin, Fisabilillah
|
||||
|
||||
**Checkbox Group**
|
||||
- **How to Add**: Drag "Checkbox Group" from the Selection & Toggle category
|
||||
- **Configuration**:
|
||||
- Add multiple options in the settings
|
||||
- Set label and help text
|
||||
- Configure minimum/maximum selections
|
||||
- **Use Case**: Interests, skills, preferences
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Selecting multiple sources of income or types of assistance needed
|
||||
- **Example**: "Sumber Pendapatan" checkbox group
|
||||
- **Configuration**: Options: Gaji Tetap, Kerja Sampingan, Perniagaan, Sewa, Lain-lain
|
||||
|
||||
**Radio Group**
|
||||
- **How to Add**: Drag "Radio Group" from the Selection & Toggle category
|
||||
- **Configuration**:
|
||||
- Add mutually exclusive options
|
||||
- Set label and help text
|
||||
- Configure validation
|
||||
- **Use Case**: Gender, yes/no questions, priority levels
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Selecting marital status or employment status
|
||||
- **Example**: "Status Perkahwinan" radio group
|
||||
- **Configuration**: Options: Bujang, Berkahwin, Bercerai, Janda/Duda
|
||||
|
||||
**Switch Toggle**
|
||||
- **How to Add**: Drag "Switch Toggle" from the Selection & Toggle category
|
||||
- **Configuration**:
|
||||
- Set label and help text
|
||||
- Configure default state (on/off)
|
||||
- **Use Case**: Settings, feature enablement, consent
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Consent for data sharing or agreement to terms
|
||||
- **Example**: "Persetujuan Terma dan Syarat" toggle
|
||||
- **Configuration**: Set default to off, required for form submission
|
||||
|
||||
### Date & Pickers Category
|
||||
|
||||
**Date Picker**
|
||||
- **How to Add**: Drag "Date Picker" from the Date & Pickers category
|
||||
- **Configuration**:
|
||||
- Set label and help text
|
||||
- Configure date range limits
|
||||
- Set default date if needed
|
||||
- **Use Case**: Birth dates, appointment scheduling, deadlines
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Collecting birth date or application submission date
|
||||
- **Example**: "Tarikh Lahir" field for age verification
|
||||
- **Configuration**: Set maximum date to current date, minimum date to 1900
|
||||
|
||||
**Time Picker**
|
||||
- **How to Add**: Drag "Time Picker" from the Date & Pickers category
|
||||
- **Configuration**:
|
||||
- Set label and help text
|
||||
- Choose 12 or 24-hour format
|
||||
- Set time intervals
|
||||
- **Use Case**: Meeting times, business hours, schedules
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Scheduling Zakat interview appointments
|
||||
- **Example**: "Masa Temuduga" field for interview scheduling
|
||||
- **Configuration**: Set 24-hour format, intervals of 30 minutes
|
||||
|
||||
**Date & Time**
|
||||
- **How to Add**: Drag "Date & Time" from the Date & Pickers category
|
||||
- **Configuration**:
|
||||
- Set label and help text
|
||||
- Configure date and time limits
|
||||
- **Use Case**: Event scheduling, deadline tracking
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Scheduling Zakat verification appointments
|
||||
- **Example**: "Tarikh dan Masa Temuduga" field for home visits
|
||||
- **Configuration**: Set minimum date to current date, business hours only
|
||||
|
||||
**Range Slider**
|
||||
- **How to Add**: Drag "Range Slider" from the Date & Pickers category
|
||||
- **Configuration**:
|
||||
- Set minimum and maximum values
|
||||
- Configure step increments
|
||||
- Set default value
|
||||
- **Use Case**: Ratings, preferences, quantity selection
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Indicating monthly household income range
|
||||
- **Example**: "Julat Pendapatan Bulanan (RM)" slider
|
||||
- **Configuration**: Set range 0-10,000 RM, step 500 RM
|
||||
|
||||
**Color Picker**
|
||||
- **How to Add**: Drag "Color Picker" from the Date & Pickers category
|
||||
- **Configuration**:
|
||||
- Set label and help text
|
||||
- Configure default color
|
||||
- **Use Case**: Design preferences, theme selection
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Selecting preferred notification colors
|
||||
- **Example**: "Warna Notifikasi Pilihan" for personalized alerts
|
||||
- **Configuration**: Set default to blue (#3B82F6)
|
||||
|
||||
### Advanced & Upload Category
|
||||
|
||||
**File Upload**
|
||||
- **How to Add**: Drag "File Upload" from the Advanced & Upload category
|
||||
- **Configuration**:
|
||||
- Set accepted file types
|
||||
- Configure file size limits
|
||||
- Set maximum number of files
|
||||
- **Use Case**: Documents, images, attachments
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Uploading supporting documents for Zakat application
|
||||
- **Example**: "Dokumen Sokongan" field for IC, payslips, bank statements
|
||||
- **Configuration**: Accept PDF, JPG, PNG files, max 5MB per file, max 10 files
|
||||
|
||||
**Image Preview**
|
||||
- **How to Add**: Drag "Image Preview" from the Advanced & Upload category
|
||||
- **Configuration**:
|
||||
- Set image URL or upload image
|
||||
- Configure caption and alt text
|
||||
- Enable/disable zoom capability
|
||||
- **Use Case**: Product images, profile pictures, documentation
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Displaying Zakat calculation examples or guidelines
|
||||
- **Example**: "Contoh Pengiraan Zakat" image with calculation breakdown
|
||||
- **Configuration**: Show zoom capability, add caption explaining calculation
|
||||
|
||||
**Repeating Group**
|
||||
- **How to Add**: Drag "Repeating Group" from the Advanced & Upload category
|
||||
- **Configuration**:
|
||||
- Set group label and help text
|
||||
- Configure minimum and maximum items
|
||||
- Add fields within the group
|
||||
- **Use Case**: Family members, work experience, education history
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Collecting information about family members/dependents
|
||||
- **Example**: "Maklumat Ahli Keluarga" group for dependent details
|
||||
- **Configuration**: Min 1, max 10 family members, fields: Name, IC, Age, Relationship
|
||||
|
||||
**Dynamic List**
|
||||
- **How to Add**: Drag "Dynamic List" from the Advanced & Upload category
|
||||
- **Configuration**:
|
||||
- Set label and placeholder text
|
||||
- Configure item type (text, number, etc.)
|
||||
- Enable search, sorting, and bulk operations
|
||||
- **Use Case**: Skills, interests, inventory items
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Listing monthly expenses or sources of income
|
||||
- **Example**: "Senarai Perbelanjaan Bulanan" for expense tracking
|
||||
- **Configuration**: Text items, enable search, allow duplicates, max 20 items
|
||||
|
||||
**Data Table**
|
||||
- **How to Add**: Drag "Data Table" from the Advanced & Upload category
|
||||
- **Configuration**:
|
||||
- Define table columns and their types
|
||||
- Set validation rules for each column
|
||||
- Configure edit and delete permissions
|
||||
- **Use Case**: Employee records, inventory, financial data
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Tracking monthly income and expenses in tabular format
|
||||
- **Example**: "Jadual Pendapatan dan Perbelanjaan" table
|
||||
- **Configuration**: Columns: Month, Income (RM), Expenses (RM), Balance (RM), Remarks
|
||||
|
||||
**OTP Input**
|
||||
- **How to Add**: Drag "OTP Input" from the Advanced & Upload category
|
||||
- **Configuration**:
|
||||
- Set number of digits (typically 6)
|
||||
- Configure validation
|
||||
- **Use Case**: Two-factor authentication, verification codes
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: SMS verification for Zakat application submission
|
||||
- **Example**: "Kod Pengesahan SMS" field for application verification
|
||||
- **Configuration**: 6 digits, auto-focus, required validation
|
||||
|
||||
**File Dropzone**
|
||||
- **How to Add**: Drag "File Dropzone" from the Advanced & Upload category
|
||||
- **Configuration**:
|
||||
- Set accepted file types and size limits
|
||||
- Configure drag-and-drop text
|
||||
- Set maximum number of files
|
||||
- **Use Case**: Bulk file uploads, document management
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Bulk upload of multiple supporting documents
|
||||
- **Example**: "Seret Dokumen ke Sini" dropzone for multiple file uploads
|
||||
- **Configuration**: Accept PDF, JPG files, max 10MB total, drag-and-drop interface
|
||||
|
||||
**Button**
|
||||
- **How to Add**: Drag "Button" from the Advanced & Upload category
|
||||
- **Configuration**:
|
||||
- Set button text and type (submit, reset, button)
|
||||
- Choose button style and size
|
||||
- Configure custom actions if needed
|
||||
- **Use Case**: Submit, reset, custom actions
|
||||
- **Zakat Scenario**:
|
||||
- **When to Use**: Form submission or calculation triggers
|
||||
- **Example**: "Hantar Permohonan Zakat" submit button
|
||||
- **Configuration**: Primary style, large size, submit type
|
||||
|
||||
## Creating Your First Form
|
||||
|
||||
**Step-by-Step Instructions:**
|
||||
|
||||
1. **Start Form Builder**
|
||||
- Navigate to Form Builder
|
||||
- Click "Create New Form"
|
||||
- Enter a descriptive form name
|
||||
|
||||
2. **Add Basic Components**
|
||||
- Drag a "Text Field" for the name
|
||||
- Drag an "Email Field" for contact information
|
||||
- Drag a "Select Dropdown" for category selection
|
||||
|
||||
3. **Configure Components**
|
||||
- Click each component to open settings
|
||||
- Set appropriate labels and placeholders
|
||||
- Add validation rules where needed
|
||||
|
||||
4. **Add Advanced Components**
|
||||
- Drag a "File Upload" for attachments
|
||||
- Drag a "Text Area" for comments
|
||||
- Add a "Button" for form submission
|
||||
|
||||
5. **Test Your Form**
|
||||
- Click "Preview" to test the form
|
||||
- Fill out the form as an end user would
|
||||
- Verify all functionality works correctly
|
||||
|
||||
6. **Save Your Form**
|
||||
- Click "Save" button
|
||||
- Enter a descriptive name
|
||||
- Add a description for future reference
|
||||
|
||||
## Form Builder Features
|
||||
|
||||
**Drag & Drop Interface**
|
||||
- **How to Use**: Click and drag components from the left panel to the canvas
|
||||
- **Repositioning**: Drag components on the canvas to move them
|
||||
- **Resizing**: Use the resize handles to adjust component size
|
||||
|
||||
**Component Configuration**
|
||||
- **How to Access**: Click any component on the canvas
|
||||
- **Settings Panel**: Opens on the right side
|
||||
- **Configuration Options**: Labels, validation, conditional logic, styling
|
||||
|
||||
**Preview Mode**
|
||||
- **How to Access**: Click "Preview" button in the header
|
||||
- **Testing**: Fill out the form as an end user
|
||||
- **Exit Preview**: Click "Edit" to return to builder mode
|
||||
|
||||
**Save & Version Control**
|
||||
- **Save**: Click "Save" button regularly
|
||||
- **History**: Access form history to view previous versions
|
||||
- **Restore**: Click on any previous version to restore it
|
||||
|
||||
---
|
||||
|
||||
*Previous Chapter: [Introduction & Getting Started](01-introduction-getting-started.md)*
|
||||
|
||||
*Next Chapter: [Form Management](03-form-management.md)*
|
||||
128
docs/documentation/05-process-management.md
Normal file
128
docs/documentation/05-process-management.md
Normal file
@ -0,0 +1,128 @@
|
||||
# Process Management
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Accessing Process Management](#accessing-process-management)
|
||||
2. [Process Dashboard](#process-dashboard)
|
||||
3. [Managing Processes](#managing-processes)
|
||||
4. [Process Analytics](#process-analytics)
|
||||
5. [Case Management](#case-management)
|
||||
|
||||
---
|
||||
|
||||
## Accessing Process Management
|
||||
|
||||
**Step-by-Step Instructions:**
|
||||
1. Navigate to **Process Builder**
|
||||
2. Click **"Manage Processes"** in the header
|
||||
3. Or use the dashboard overview
|
||||
|
||||
## Process Dashboard
|
||||
|
||||
**Overview Metrics**
|
||||
- **Total Processes**: Number of all processes in the system
|
||||
- **Published vs Draft**: Count of published and draft processes
|
||||
- **Active Cases**: Currently running process instances
|
||||
- **Performance Metrics**: Completion rates and average times
|
||||
|
||||
**Performance Analytics**
|
||||
- **Completion Rates**: Percentage of successful process completions
|
||||
- **Average Times**: Time taken to complete processes
|
||||
- **Success Rates**: Overall process success metrics
|
||||
- **Bottleneck Analysis**: Identify slow or problematic steps
|
||||
|
||||
**Recent Activity**
|
||||
- **Latest Changes**: Recent process modifications
|
||||
- **Recent Executions**: Latest process instances
|
||||
- **User Activity**: Most active users and their actions
|
||||
|
||||
**Quick Actions**
|
||||
- **Create New Process**: Start building a new workflow
|
||||
- **View Active Cases**: Monitor currently running processes
|
||||
- **Access Analytics**: View detailed performance reports
|
||||
|
||||
## Managing Processes
|
||||
|
||||
**Process List View**
|
||||
- **Search & Filter**: Find processes by name, status, or category
|
||||
- **Status Tracking**: Draft, published, archived, deleted
|
||||
- **Category Organization**: HR, Finance, IT, Operations, etc.
|
||||
- **Sort Options**: By name, creation date, last modified
|
||||
|
||||
**Process Actions**
|
||||
- **Edit**: Click "Edit" to open process in Process Builder
|
||||
- **Duplicate**: Click "Duplicate" to create a copy
|
||||
- **Publish**: Click "Publish" to make process available for execution
|
||||
- **Archive**: Click "Archive" to move process to archived status
|
||||
- **Delete**: Click "Delete" and confirm to remove process
|
||||
- **Export**: Click "Export" to download process definition
|
||||
|
||||
**Process Templates**
|
||||
- **Template Library**: Browse pre-built process templates
|
||||
- **Template Categories**: Common business processes
|
||||
- **Custom Templates**: Save your processes as templates
|
||||
- **Template Import**: Import templates from other sources
|
||||
|
||||
**Process History**
|
||||
- **Version Control**: Track all process changes
|
||||
- **Change Log**: Who made changes and when
|
||||
- **Version Comparison**: Compare different versions
|
||||
- **Rollback**: Restore previous versions if needed
|
||||
|
||||
## Process Analytics
|
||||
|
||||
**Execution Metrics**
|
||||
- **Number of Cases**: Total process instances created
|
||||
- **Completion Rates**: Percentage of completed cases
|
||||
- **Average Time**: Time taken to complete processes
|
||||
- **Success Rates**: Percentage of successful completions
|
||||
|
||||
**Performance Data**
|
||||
- **Bottleneck Analysis**: Identify slow steps in processes
|
||||
- **User Performance**: Track user task completion rates
|
||||
- **Process Efficiency**: Measure process optimization opportunities
|
||||
- **Resource Utilization**: Monitor system and user resources
|
||||
|
||||
**User Activity**
|
||||
- **Most Active Users**: Users with highest task completion rates
|
||||
- **Task Completion Rates**: Individual user performance metrics
|
||||
- **User Workload**: Distribution of tasks across users
|
||||
- **Performance Trends**: Track user performance over time
|
||||
|
||||
**Trend Analysis**
|
||||
- **Process Usage**: Track which processes are used most
|
||||
- **Time Trends**: Analyze process usage over time
|
||||
- **Seasonal Patterns**: Identify recurring patterns
|
||||
- **Growth Metrics**: Track system adoption and usage
|
||||
|
||||
## Case Management
|
||||
|
||||
**Active Cases**
|
||||
- **View Running Cases**: See currently active process instances
|
||||
- **Case Details**: Individual case information and progress
|
||||
- **Case Status**: Track current status of each case
|
||||
- **Case Timeline**: View chronological case events
|
||||
|
||||
**Case Actions**
|
||||
- **Assign Tasks**: Reassign tasks to different users
|
||||
- **Suspend Cases**: Pause process execution temporarily
|
||||
- **Resume Cases**: Restart suspended processes
|
||||
- **Cancel Cases**: Terminate process execution
|
||||
|
||||
**Task Management**
|
||||
- **Pending Tasks**: View tasks waiting for user action
|
||||
- **Task Assignment**: Assign tasks to specific users
|
||||
- **Task Notifications**: Alert users about new or overdue tasks
|
||||
- **Task History**: Track task completion and performance
|
||||
|
||||
**Case Monitoring**
|
||||
- **Real-time Updates**: Live status updates for active cases
|
||||
- **Progress Tracking**: Monitor case progression through steps
|
||||
- **Exception Handling**: Identify and handle process exceptions
|
||||
- **Performance Monitoring**: Track case completion times
|
||||
|
||||
---
|
||||
|
||||
*Previous Chapter: [Process Builder](04-process-builder.md)*
|
||||
|
||||
*Next Chapter: [FAQ - Advanced Topics](06-faq-advanced-topics.md)*
|
||||
135
docs/documentation/06-faq-advanced-topics.md
Normal file
135
docs/documentation/06-faq-advanced-topics.md
Normal file
@ -0,0 +1,135 @@
|
||||
# FAQ - Advanced Topics
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Complex Business Scenarios](#complex-business-scenarios)
|
||||
2. [Technical Implementation](#technical-implementation)
|
||||
3. [Best Practices](#best-practices)
|
||||
|
||||
---
|
||||
|
||||
## Complex Business Scenarios
|
||||
|
||||
**Q: How do I implement approval workflows with multiple approvers in a hierarchical structure?**
|
||||
|
||||
A: Use Decision Point components to create approval chains. Configure each decision point with conditions based on approval amounts or roles. For Zakat scenarios, you might have: Level 1 (RM1,000-RM5,000) → Officer approval, Level 2 (RM5,001-RM10,000) → Supervisor approval, Level 3 (RM10,001+) → Manager approval. Use Business Rule components to determine approval levels based on application amounts.
|
||||
|
||||
**Q: How can I pass user-specific data to dynamically generated forms in subsequent process steps?**
|
||||
|
||||
A: Use Process Variables to store user data from initial forms and pass them to subsequent Form Task components. Configure the form to pre-populate fields using the stored variables. For example, in a Zakat application: Store applicant details in variables during initial submission, then use those variables to pre-fill verification forms for officers.
|
||||
|
||||
**Q: How do I implement conditional form fields that appear based on previous user selections?**
|
||||
|
||||
A: Use the Conditional Logic feature in Form Builder. Select any component, go to the Conditional Logic section, and configure conditions. For Zakat applications: If user selects "Berpencen" in employment status, show "Jumlah Pencen" field; if "Bekerja Sendiri", show "Pendapatan Perniagaan" field.
|
||||
|
||||
**Q: How can I integrate external systems (like JPN for IC verification) into my processes?**
|
||||
|
||||
A: Use API Call components in Process Builder. Configure the API endpoint, authentication, request/response handling, and error management. For Zakat scenarios: Create API calls to JPN for IC verification, bank systems for account validation, or government databases for income verification.
|
||||
|
||||
**Q: How do I implement parallel processing where multiple tasks can be completed simultaneously?**
|
||||
|
||||
A: Use multiple Form Task components connected to the same Decision Point. Configure each task to be assigned to different users or roles. For Zakat processing: Simultaneously assign document verification to one officer, income verification to another, and home visit scheduling to a third officer.
|
||||
|
||||
**Q: How can I implement dynamic task assignment based on workload or expertise?**
|
||||
|
||||
A: Use Business Rule components to determine task assignment logic. Configure rules based on user availability, expertise, or current workload. For Zakat scenarios: Assign complex cases to senior officers, simple cases to junior officers, or route based on applicant location.
|
||||
|
||||
**Q: How do I handle process exceptions and create alternative paths when standard procedures fail?**
|
||||
|
||||
A: Use Decision Point components with error handling conditions. Configure API Call components with "Continue on Error" options and create alternative paths. For Zakat applications: If IC verification fails, route to manual verification; if income verification fails, request additional documents.
|
||||
|
||||
**Q: How can I implement time-based escalations for overdue tasks?**
|
||||
|
||||
A: Use Notification components with time-based triggers. Configure escalation rules in Business Rule components. For Zakat processing: If verification task is not completed within 3 days, automatically escalate to supervisor and send reminder notifications.
|
||||
|
||||
**Q: How do I implement data validation across multiple process steps?**
|
||||
|
||||
A: Use Business Rule components at each critical decision point. Configure validation rules that check data consistency across steps. For Zakat applications: Validate that income declared in initial form matches supporting documents in verification step.
|
||||
|
||||
**Q: How can I implement audit trails and compliance tracking for sensitive processes?**
|
||||
|
||||
A: Use the built-in audit logging features. Configure process variables to track all changes and decisions. For Zakat processing: Log all approval decisions, document uploads, verification results, and final outcomes for compliance reporting.
|
||||
|
||||
**Q: How do I implement role-based access control for different process stages?**
|
||||
|
||||
A: Configure user roles and permissions in the system settings. Assign specific roles to Form Task components. For Zakat workflows: Assign application submission to public users, verification to officers, approval to supervisors, and final review to managers.
|
||||
|
||||
**Q: How can I implement process analytics and performance monitoring for continuous improvement?**
|
||||
|
||||
A: Use the Process Analytics dashboard to track key metrics. Monitor completion times, bottleneck identification, and user performance. For Zakat processing: Track average processing time, approval rates, rejection reasons, and officer productivity for process optimization.
|
||||
|
||||
## Technical Implementation
|
||||
|
||||
**Q: How do I configure complex business rules with multiple conditions?**
|
||||
|
||||
A: Use Business Rule components with rule groups. Create multiple rule groups with different priorities. Configure conditions using AND/OR logic. For Zakat eligibility: Rule Group 1 (Income < Had Kifayah), Rule Group 2 (No luxury assets), Rule Group 3 (Malaysian citizen), with appropriate actions for each group.
|
||||
|
||||
**Q: How do I implement custom JavaScript logic in Script Task components?**
|
||||
|
||||
A: Write JavaScript code in the Script Task configuration. Use input variables from previous steps and set output variables for subsequent steps. For Zakat calculations: Calculate monthly expenses, determine eligibility percentage, or compute Zakat amount based on income and assets.
|
||||
|
||||
**Q: How do I configure API authentication and error handling?**
|
||||
|
||||
A: In API Call components, configure authentication headers, request/response mapping, and error handling paths. Set up retry logic and alternative paths for failed API calls. For external integrations: Use API keys, OAuth tokens, or certificate-based authentication as required by the external system.
|
||||
|
||||
**Q: How do I implement process variables and data flow between components?**
|
||||
|
||||
A: Define process variables in the Variables tab. Use these variables in component configurations and form field mappings. For data flow: Store form data in variables, pass them between components, and use them in decision conditions or API calls.
|
||||
|
||||
**Q: How do I configure conditional form logic for dynamic field display?**
|
||||
|
||||
A: In Form Builder, select any component and go to Conditional Logic section. Set conditions based on other field values. For complex forms: Use multiple conditions with AND/OR logic to show/hide fields based on user selections.
|
||||
|
||||
## Best Practices
|
||||
|
||||
**Q: What are the best practices for process design and optimization?**
|
||||
|
||||
A:
|
||||
- **Keep processes simple**: Avoid overly complex workflows
|
||||
- **Use clear naming**: Name components and variables descriptively
|
||||
- **Test thoroughly**: Preview and test processes before publishing
|
||||
- **Document decisions**: Use annotations to explain complex logic
|
||||
- **Monitor performance**: Regularly review analytics for bottlenecks
|
||||
- **Version control**: Save versions before major changes
|
||||
|
||||
**Q: How do I ensure data security and compliance in sensitive processes?**
|
||||
|
||||
A:
|
||||
- **Role-based access**: Assign appropriate permissions to users
|
||||
- **Audit logging**: Enable comprehensive audit trails
|
||||
- **Data encryption**: Ensure sensitive data is encrypted
|
||||
- **Compliance tracking**: Log all decisions and actions
|
||||
- **Regular reviews**: Conduct periodic security assessments
|
||||
|
||||
**Q: What are the best practices for form design and user experience?**
|
||||
|
||||
A:
|
||||
- **Logical flow**: Arrange fields in logical order
|
||||
- **Clear labels**: Use descriptive field labels and help text
|
||||
- **Validation**: Implement appropriate validation rules
|
||||
- **Responsive design**: Ensure forms work on all devices
|
||||
- **Progress indicators**: Show progress in multi-step forms
|
||||
|
||||
**Q: How do I optimize process performance and reduce bottlenecks?**
|
||||
|
||||
A:
|
||||
- **Parallel processing**: Use parallel tasks where possible
|
||||
- **Efficient routing**: Minimize unnecessary decision points
|
||||
- **Resource allocation**: Balance workload across users
|
||||
- **Monitoring**: Track performance metrics regularly
|
||||
- **Continuous improvement**: Use analytics to identify optimization opportunities
|
||||
|
||||
**Q: What are the best practices for API integration and external system connectivity?**
|
||||
|
||||
A:
|
||||
- **Error handling**: Implement robust error handling and retry logic
|
||||
- **Authentication**: Use secure authentication methods
|
||||
- **Rate limiting**: Respect API rate limits and quotas
|
||||
- **Monitoring**: Track API call success rates and response times
|
||||
- **Documentation**: Maintain clear documentation of integrations
|
||||
|
||||
---
|
||||
|
||||
*Previous Chapter: [Process Management](05-process-management.md)*
|
||||
|
||||
*Back to [Documentation Home](README.md)*
|
||||
@ -45,4 +45,15 @@ export default [
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
header: "Documentation",
|
||||
description: "Learn how to use the platform",
|
||||
child: [
|
||||
{
|
||||
title: "Documentation",
|
||||
path: "/documentation",
|
||||
icon: "material-symbols:book",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -22,18 +22,18 @@ export default defineNuxtConfig({
|
||||
app: {
|
||||
pageTransition: { name: "page", mode: "out-in" },
|
||||
},
|
||||
vite:{
|
||||
server:{
|
||||
vite: {
|
||||
server: {
|
||||
watch: {
|
||||
usePolling: true,
|
||||
interval: 1000,
|
||||
},
|
||||
},
|
||||
optimizeDeps: {
|
||||
include: ['vue-toastification'],
|
||||
include: ["vue-toastification"],
|
||||
},
|
||||
ssr: {
|
||||
noExternal: ['vue-toastification'],
|
||||
noExternal: ["vue-toastification"],
|
||||
},
|
||||
},
|
||||
head: {
|
||||
|
||||
@ -64,6 +64,7 @@
|
||||
"jsonwebtoken": "^8.5.1",
|
||||
"jspdf": "^3.0.1",
|
||||
"luxon": "^3.1.0",
|
||||
"marked": "^16.1.1",
|
||||
"maska": "^1.5.0",
|
||||
"pinia": "^2.1.6",
|
||||
"prettier": "^3.3.3",
|
||||
@ -88,5 +89,6 @@
|
||||
"vue3-click-away": "^1.2.4",
|
||||
"vue3-dropzone": "^2.0.1",
|
||||
"vuedraggable": "^4.1.0"
|
||||
}
|
||||
},
|
||||
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
||||
}
|
||||
|
||||
1112
pages/documentation/index.vue
Normal file
1112
pages/documentation/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
13
server/api/documentation/[file].get.js
Normal file
13
server/api/documentation/[file].get.js
Normal file
@ -0,0 +1,13 @@
|
||||
import fs from 'fs'
|
||||
import path from 'path'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const { file } = event.context.params
|
||||
const docsDir = path.resolve(process.cwd(), 'content/documentation')
|
||||
const filePath = path.join(docsDir, file)
|
||||
if (!file.endsWith('.md') || !fs.existsSync(filePath)) {
|
||||
return { error: 'File not found' }
|
||||
}
|
||||
const content = fs.readFileSync(filePath, 'utf-8')
|
||||
return { content }
|
||||
})
|
||||
9
server/api/documentation/index.get.js
Normal file
9
server/api/documentation/index.get.js
Normal file
@ -0,0 +1,9 @@
|
||||
import fs from 'fs'
|
||||
import path from 'path'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const docsDir = path.resolve(process.cwd(), 'content/documentation')
|
||||
const files = fs.readdirSync(docsDir)
|
||||
.filter(file => file.endsWith('.md'))
|
||||
return files
|
||||
})
|
||||
@ -6389,6 +6389,11 @@ make-dir@^3.1.0, make-dir@~3.1.0:
|
||||
dependencies:
|
||||
semver "^6.0.0"
|
||||
|
||||
marked@^16.1.1:
|
||||
version "16.1.1"
|
||||
resolved "https://registry.yarnpkg.com/marked/-/marked-16.1.1.tgz#a7839dcf19fa5e349cad12c561f231320690acd4"
|
||||
integrity sha512-ij/2lXfCRT71L6u0M29tJPhP0bM5shLL3u5BePhFwPELj2blMJ6GDtD7PfJhRLhJ/c2UwrK17ySVcDzy2YHjHQ==
|
||||
|
||||
maska@^1.5.0:
|
||||
version "1.5.2"
|
||||
resolved "https://registry.yarnpkg.com/maska/-/maska-1.5.2.tgz#ebc7e5165aab623814828b246b2334077841980e"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user