diff --git a/doc/README.md b/doc/README.md
index 2e51819..da3538a 100644
--- a/doc/README.md
+++ b/doc/README.md
@@ -42,4 +42,6 @@ When contributing to this documentation:
## Contact
-If you have questions about this documentation or need help with the system, please contact the development team.
\ No newline at end of file
+If you have questions about this documentation or need help with the system, please contact the development team.
+
+Last updated: July 10, 2024
\ No newline at end of file
diff --git a/doc/process-builder/TECHNICAL_GUIDE.md b/doc/process-builder/TECHNICAL_GUIDE.md
index afcdd2a..643ab07 100644
--- a/doc/process-builder/TECHNICAL_GUIDE.md
+++ b/doc/process-builder/TECHNICAL_GUIDE.md
@@ -2,7 +2,7 @@
This document provides technical implementation details for developers working with the Process Builder system.
-> For user documentation and usage guidelines, please refer to [Process Builder Documentation](PROCESS_BUILDER_DOCUMENTATION.md)
+> For user documentation and usage guidelines, please refer to [Process Builder Documentation](USER_GUIDE.md)
## Architecture Overview
@@ -13,6 +13,7 @@ This document provides technical implementation details for developers working w
- **UI Framework**: Tailwind CSS
- **Icons**: Material Design Icons
- **Validation**: Zod
+- **Form Components**: FormKit
### Key Dependencies
```json
@@ -22,6 +23,7 @@ This document provides technical implementation details for developers working w
"@vue-flow/controls": "^1.1.2",
"@vue-flow/minimap": "^1.5.3",
"@pinia/nuxt": "^0.4.11",
+ "@formkit/nuxt": "^1.5.5",
"uuid": "^10.0.0",
"zod": "^3.22.2"
}
@@ -39,9 +41,14 @@ components/
│ ├── ProcessFlowCanvas.vue # Flow canvas
│ ├── ProcessFlowNodes.js # Custom node types
│ ├── FormSelector.vue # Form selection component
-│ └── GatewayConditionManager.vue # Gateway conditions UI
+│ ├── GatewayConditionManager.vue # Gateway conditions UI
+│ ├── ApiNodeConfiguration.vue # API node configuration
+│ ├── FormNodeConfiguration.vue # Form node configuration
+│ ├── BusinessRuleConfiguration.vue # Business rule configuration
+│ └── VariableManager.vue # Process variables manager
stores/
-└── processBuilder.js # State management
+├── processBuilder.js # State management
+└── variableStore.js # Variable state management
composables/
└── useProcessValidation.js # Process validation
types/
@@ -207,665 +214,765 @@ export const nodeTypes = markRaw({
});
```
-3. **FormSelector.vue**
-```vue
-
+
+### 3. GatewayConditionManager.vue
+
+The Gateway Condition Manager provides an enhanced UI for decision point configuration.
+
+```vue
+
+
+
+
+
+
+
+
+
+
Decision Point Configuration
+
+ Create multiple paths with conditions to direct process flow
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Add Path
+
+
+
+
+
+
Default Path
+
+ This path will be followed when no other path conditions are met
+
+
+
+
+
+
+```
+
+### 4. ApiNodeConfiguration.vue
+
+The API Node Configuration component provides a stepped interface for configuring API calls.
+
+```vue
+
+
+
+
+
+
+
+
+
+
API Configuration
+
+ Configure external API calls to integrate with other systems
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### 5. FormNodeConfiguration.vue
+
+The Form Node Configuration component provides a stepped interface for configuring form interactions.
+
+```vue
+
+
+
+
+
+
+
+
+
+
Form Configuration
+
+ Connect process flow with user forms for data collection and display
+
```
-### Gateway Condition Management
-```typescript
-// Handle condition update
-const handleConditionUpdate = (conditions) => {
- if (selectedNodeData.value && selectedNodeData.value.type === 'gateway') {
- // Update conditions in the node data
- selectedNodeData.value.data = {
- ...selectedNodeData.value.data,
- conditions: conditions
- };
-
- // Update edges with new condition outputs
- if (processStore.currentProcess?.edges) {
- const updatedEdges = processStore.currentProcess.edges.map(edge => {
- if (edge.source === selectedNodeData.value.id) {
- // Find matching condition group
- const matchingGroup = conditions.find(group => group.output === edge.label);
- if (!matchingGroup) {
- // If no matching group found, update edge label to default
- return {
- ...edge,
- label: selectedNodeData.value.data.defaultPath || 'Default'
- };
- }
- }
- return edge;
- });
-
- // Update edges in store
- processStore.currentProcess.edges = updatedEdges;
- }
-
- // Update the node in store
- updateNodeInStore();
- }
-};
-```
+## Best Practices for Development
-## Event Handling
+When developing new components or enhancing existing ones:
-### Node Events
-```typescript
-// Node selection
-function onNodeClick({ node }): void {
- try {
- // Create a plain object copy of the node to avoid reactivity issues
- const nodeData = {
- id: node.id,
- type: node.type,
- data: node.data ? JSON.parse(JSON.stringify(node.data)) : {},
- position: node.dimensions ? {
- x: node.dimensions.x || 0,
- y: node.dimensions.y || 0
- } : { x: 0, y: 0 }
- };
+1. **Consistent Design Pattern**:
+ - Follow the established design patterns for node configurations
+ - Use the same structure for headers, step indicators, and action buttons
+ - Maintain the color coding system for different node types
- selectedNode.value = nodeData;
- emit('nodeSelected', nodeData);
- } catch (error) {
- console.error('Error processing node data:', error);
- }
-}
+2. **Responsive Components**:
+ - Ensure all components work on various screen sizes
+ - Use responsive utilities from Tailwind
+ - Test on mobile and desktop views
-// Node deletion
-function onNodeDelete(event): void {
- // Check if we have a node in the event
- if (event && event.node) {
- removeNodes([event.node]);
- emit('nodesChange', nodes.value);
- }
-}
+3. **State Management**:
+ - Store node configuration in the appropriate Pinia store
+ - Use reactive Vue 3 patterns with `ref`, `computed`, etc.
+ - Implement proper validation before saving
-// Handle delete key press
-function onDeleteKeyPress(): void {
- const { getSelectedNodes, getSelectedEdges } = flowInstance.value;
- const selectedNodes = getSelectedNodes();
- const selectedEdges = getSelectedEdges();
-
- if (selectedNodes.length > 0) {
- removeNodes(selectedNodes);
- emit('nodesChange', nodes.value);
- }
-
- if (selectedEdges.length > 0) {
- removeEdges(selectedEdges);
- emit('edgesChange', edges.value);
- }
-}
-```
+4. **Accessibility**:
+ - Ensure all UI elements are keyboard accessible
+ - Use semantic HTML elements
+ - Maintain proper focus management in modals
-### Edge Events
-```typescript
-// Edge selection
-function onEdgeClick(event, edge): void {
- // Create a simplified copy of the edge data
- const edgeData = {
- id: edge.id,
- source: edge.source,
- target: edge.target,
- label: edge.label || '',
- sourceNode: nodes.value.find(node => node.id === edge.source),
- targetNode: nodes.value.find(node => node.id === edge.target)
- };
-
- emit('edgeSelected', edgeData);
-}
-
-// Edge deletion
-function onEdgeDelete(event): void {
- if (event && event.edge) {
- removeEdges([event.edge]);
- emit('edgesChange', edges.value);
- }
-}
-```
-
-## Development Guidelines
-
-### Best Practices
-1. Use Vue Flow's built-in features instead of custom implementations
-2. Handle all node/edge updates through the store
-3. Maintain proper typings for all components
-4. Follow Vue 3 Composition API patterns
-5. Implement proper validation for all process changes
-
-### Performance Considerations
-1. Use `markRaw` for node components
-2. Minimize reactive wrapping of node data
-3. Use proper key bindings for lists
-4. Implement efficient node filtering
-5. Optimize canvas rendering
-
-### Error Handling
-1. Validate all connections before creation
-2. Handle edge cases in node operations
-3. Provide meaningful error messages
-4. Implement proper error boundaries
-5. Log errors appropriately
+5. **Data Flow Visualization**:
+ - Use visual indicators to show data flow direction
+ - Provide clear feedback on how variables are used
+ - Highlight connections between nodes
---
-For user documentation and usage guidelines, please refer to [Process Builder Documentation](PROCESS_BUILDER_DOCUMENTATION.md).
+For user documentation and usage guidelines, please refer to [Process Builder Documentation](USER_GUIDE.md).
-Last updated: June 10, 2024
\ No newline at end of file
+Last updated: July 10, 2024
\ No newline at end of file
diff --git a/doc/process-builder/USER_GUIDE.md b/doc/process-builder/USER_GUIDE.md
index 1a9750a..8ecf862 100644
--- a/doc/process-builder/USER_GUIDE.md
+++ b/doc/process-builder/USER_GUIDE.md
@@ -59,11 +59,25 @@ Activities represent work performed in a process:
- Has both input and output handles
- Properties: Assignee, description
-- **Form Task** (Purple Icon)
+- **Form Task** (Emerald Icon)
- A task that requires form data
- Has both input and output handles
- - Properties: Form selection, description
+ - Step-by-step configuration workflow
+ - Properties: Form selection, data mapping
- Connects to forms created in the Form Builder
+ - Visualizes bidirectional data flow
+
+- **API Task** (Indigo Icon)
+ - Automated task that makes API calls
+ - Has both input and output handles
+ - Step-by-step configuration workflow
+ - Properties: Endpoint, method, headers, request/response mapping
+
+- **Business Rule Task** (Purple Icon)
+ - Executes custom business rules and logic
+ - Has both input and output handles
+ - Step-by-step configuration workflow
+ - Properties: Rule conditions, actions, and variables
- **Script Task** (Grey Icon)
- Automated task that executes code
@@ -78,9 +92,54 @@ Decision points control flow divergence and convergence:
- Has both input and output handles
- Shows the number of configured paths in a badge
- Displays path names within the diamond
+ - Enhanced configuration with visual flow indicators
- Properties: Conditions, default path, description
- Connection labels automatically match condition paths
+## Node Configuration UI
+
+All node configuration components follow a consistent design pattern for improved usability:
+
+### Common UI Elements
+- **Modal Headers**: Clear titles with descriptive text and appropriate icons
+- **Step Indicators**: Numbered workflow steps for complex configurations
+- **Quick Reference**: Help text and examples for common use cases
+- **Color-Coding**: Consistent color themes for each node type
+ - Purple for Business Rules
+ - Indigo for API Tasks
+ - Emerald for Form Tasks
+ - Blue for Variables
+
+### Form Task Configuration
+1. **Form Selection**: Choose from available forms or create a new one
+2. **Data Mapping**: Bidirectional mapping between process variables and form fields
+3. **Options**: Configure submission behavior and user experience
+
+### Business Rule Configuration
+1. **Rule Definition**: Create conditions based on process variables
+2. **Actions**: Define what happens when conditions are met
+3. **Testing**: Validate rules against sample data
+
+### API Task Configuration
+1. **Endpoint Definition**: Configure API URL, method, and authentication
+2. **Request Mapping**: Map process variables to API request parameters
+3. **Response Mapping**: Extract data from API responses into process variables
+
+### Decision Point Configuration
+1. **Path Creation**: Add multiple decision paths
+2. **Condition Building**: Create boolean conditions for each path
+3. **Default Path**: Configure fallback path when no conditions are met
+
+## Working with Variables
+
+The Variable Manager provides a central location to define and manage global process variables:
+
+- **Variable Types**: String, Int, Decimal, Object, DateTime, Date, Boolean
+- **Search**: Quickly find variables with the search functionality
+- **Organization**: Variables displayed in cards with type indicators
+- **Editing**: Easily edit or delete variables as needed
+- **Empty State**: Clear guidance when no variables exist
+
## Working with the Process Canvas
### Navigation
@@ -197,6 +256,96 @@ The Process Builder integrates with the Form Builder to allow forms to be attach
---
-For technical details about implementation and integration, please refer to the [Process Builder Technical Documentation](PROCESS_BUILDER_TECHNICAL_APPENDIX.md).
+For technical details about implementation and integration, please refer to the [Process Builder Technical Documentation](TECHNICAL_GUIDE.md).
-Last updated: June 10, 2024
\ No newline at end of file
+Last updated: July 10, 2024
+
+## Working with Business Rules
+
+Business Rules allow you to implement conditional logic in your process flows without writing code. They are essential for creating dynamic, data-driven processes.
+
+### Creating Business Rules
+
+To add business rule logic to your process:
+
+1. **Add a Business Rule Node**
+ - Drag the Business Rule component (purple icon) from the palette onto the canvas
+ - Connect it to the appropriate nodes in your process flow
+
+2. **Configure the Business Rule**
+ - Click on the Business Rule node to open its configuration panel
+ - Follow the three-step configuration process:
+
+#### Step 1: Select Variables
+- Choose which process variables will be used in your rule conditions
+- These variables must be defined in the Variable Manager before use
+- You can filter and search for variables by name or type
+- If you need a new variable, you can create one directly from this screen
+
+#### Step 2: Create Rule Conditions
+- Add one or more rules, each with its own set of conditions
+- For each condition, specify:
+ - The variable to evaluate
+ - The operator (equals, not equals, greater than, etc.)
+ - The comparison value
+- Multiple conditions within a rule are combined with AND logic
+- Multiple rules are evaluated independently (OR logic between rules)
+
+#### Step 3: Define Actions
+- For each rule, specify the action to take when its conditions are met
+- Action types include:
+ - Setting variable values
+ - Executing predefined functions
+ - Triggering process events
+- Configure action parameters based on the selected action type
+- Actions execute in the order they are defined
+
+### Testing Business Rules
+
+Before saving your business rules, you can test them with sample data:
+
+1. Click the "Test Rules" button at the bottom of the configuration panel
+2. Enter test values for each variable used in your conditions
+3. See which rules would trigger with the provided values
+4. Review the actions that would execute
+
+### Best Practices for Business Rules
+
+1. **Keep Rules Simple**
+ - Create multiple simple rules instead of one complex rule
+ - Name rules clearly to describe their purpose
+
+2. **Use Consistent Naming**
+ - Follow a naming convention for your variables
+ - Use descriptive names that indicate the variable's purpose
+
+3. **Document Your Logic**
+ - Add descriptions to rules to explain their business purpose
+ - Comment on complex conditions to clarify the logic
+
+4. **Test Thoroughly**
+ - Validate rules with various test cases
+ - Check edge cases and boundary conditions
+
+5. **Consider Performance**
+ - Rules are evaluated in the order they appear
+ - Place frequently triggered rules at the top for efficiency
+
+### Example Use Cases
+
+Business rules are useful in many scenarios, including:
+
+1. **Customer Segmentation**
+ - Route customers to different paths based on attributes like account size or loyalty status
+
+2. **Data Validation**
+ - Verify that data meets specific criteria before proceeding
+
+3. **Dynamic Assignment**
+ - Assign tasks to different teams based on request category, priority, or workload
+
+4. **Automated Decisions**
+ - Automatically approve or reject requests based on predefined criteria
+
+5. **Conditional Notifications**
+ - Send notifications only when specific conditions are met
\ No newline at end of file