986 lines
No EOL
35 KiB
HTML
986 lines
No EOL
35 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PowerOn Workflow Designer - Platform Level Architecture</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: #333;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.header {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.header h1 {
|
|
color: #2c3e50;
|
|
font-size: 2.5em;
|
|
margin-bottom: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.header p {
|
|
color: #7f8c8d;
|
|
text-align: center;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.workflow-designer {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 15px;
|
|
background: linear-gradient(90deg, #667eea, #764ba2);
|
|
border-radius: 10px;
|
|
margin-bottom: 20px;
|
|
color: white;
|
|
}
|
|
|
|
.toolbar h2 {
|
|
font-size: 1.5em;
|
|
margin: 0;
|
|
}
|
|
|
|
.toolbar-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #3498db;
|
|
color: white;
|
|
}
|
|
|
|
.btn-success {
|
|
background: #27ae60;
|
|
color: white;
|
|
}
|
|
|
|
.btn-warning {
|
|
background: #f39c12;
|
|
color: white;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.main-content {
|
|
display: grid;
|
|
grid-template-columns: 250px 1fr 300px;
|
|
gap: 20px;
|
|
height: 600px;
|
|
}
|
|
|
|
.palette {
|
|
background: #f8f9fa;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
border: 2px solid #e9ecef;
|
|
}
|
|
|
|
.palette h3 {
|
|
color: #495057;
|
|
margin-bottom: 15px;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.palette-section {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.palette-section h4 {
|
|
color: #6c757d;
|
|
margin-bottom: 10px;
|
|
font-size: 0.9em;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.palette-item {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 6px;
|
|
padding: 8px 12px;
|
|
margin-bottom: 8px;
|
|
cursor: grab;
|
|
transition: all 0.3s ease;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.palette-item:hover {
|
|
background: #e3f2fd;
|
|
border-color: #2196f3;
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
.palette-item.dragging {
|
|
opacity: 0.5;
|
|
transform: rotate(5deg);
|
|
}
|
|
|
|
.canvas {
|
|
background: white;
|
|
border-radius: 10px;
|
|
border: 2px solid #e9ecef;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.canvas-grid {
|
|
background-image:
|
|
linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.workflow-node {
|
|
position: absolute;
|
|
background: white;
|
|
border: 2px solid #3498db;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
min-width: 150px;
|
|
cursor: move;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.workflow-node:hover {
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.workflow-node.task {
|
|
border-color: #3498db;
|
|
background: linear-gradient(135deg, #3498db, #2980b9);
|
|
color: white;
|
|
}
|
|
|
|
.workflow-node.action {
|
|
border-color: #e74c3c;
|
|
background: linear-gradient(135deg, #e74c3c, #c0392b);
|
|
color: white;
|
|
}
|
|
|
|
.workflow-node.condition {
|
|
border-color: #f39c12;
|
|
background: linear-gradient(135deg, #f39c12, #e67e22);
|
|
color: white;
|
|
}
|
|
|
|
.workflow-node.integration {
|
|
border-color: #9b59b6;
|
|
background: linear-gradient(135deg, #9b59b6, #8e44ad);
|
|
color: white;
|
|
}
|
|
|
|
.node-header {
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.node-content {
|
|
font-size: 0.8em;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.connection-line {
|
|
position: absolute;
|
|
background: #3498db;
|
|
height: 2px;
|
|
transform-origin: left center;
|
|
z-index: 1;
|
|
}
|
|
|
|
.properties-panel {
|
|
background: #f8f9fa;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
border: 2px solid #e9ecef;
|
|
}
|
|
|
|
.properties-panel h3 {
|
|
color: #495057;
|
|
margin-bottom: 15px;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.property-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.property-group h4 {
|
|
color: #6c757d;
|
|
margin-bottom: 10px;
|
|
font-size: 0.9em;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.property-item {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 6px;
|
|
padding: 8px 12px;
|
|
margin-bottom: 8px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.property-label {
|
|
font-weight: 500;
|
|
color: #495057;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.property-value {
|
|
color: #6c757d;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.execution-monitor {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.monitor-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.status-dot.running {
|
|
background: #27ae60;
|
|
}
|
|
|
|
.status-dot.completed {
|
|
background: #3498db;
|
|
}
|
|
|
|
.status-dot.waiting {
|
|
background: #f39c12;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 8px;
|
|
background: #e9ecef;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #27ae60, #2ecc71);
|
|
border-radius: 4px;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.step-list {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.step-item {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin-bottom: 10px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.step-item:hover {
|
|
border-color: #3498db;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.step-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.step-title {
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.step-status {
|
|
font-size: 0.8em;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.step-status.completed {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.step-status.running {
|
|
background: #d1ecf1;
|
|
color: #0c5460;
|
|
}
|
|
|
|
.step-status.waiting {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
|
|
.step-details {
|
|
font-size: 0.85em;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.content-section {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.content-section h2 {
|
|
color: #2c3e50;
|
|
margin-bottom: 20px;
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
.content-section h3 {
|
|
color: #34495e;
|
|
margin: 25px 0 15px 0;
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
.content-section p {
|
|
margin-bottom: 15px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.feature-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.feature-list li {
|
|
background: #f8f9fa;
|
|
border-left: 4px solid #3498db;
|
|
padding: 12px 15px;
|
|
margin-bottom: 10px;
|
|
border-radius: 0 6px 6px 0;
|
|
}
|
|
|
|
.code-block {
|
|
background: #2c3e50;
|
|
color: #ecf0f1;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.9em;
|
|
overflow-x: auto;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.mermaid {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.main-content {
|
|
grid-template-columns: 200px 1fr 250px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.main-content {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto 1fr auto;
|
|
}
|
|
|
|
.palette {
|
|
order: 1;
|
|
}
|
|
|
|
.canvas {
|
|
order: 2;
|
|
height: 400px;
|
|
}
|
|
|
|
.properties-panel {
|
|
order: 3;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<h1>🌐 PowerOn Workflow Designer</h1>
|
|
<p>Platform Level: Building Custom Workflows for "myWorld"</p>
|
|
</div>
|
|
|
|
<!-- Workflow Designer Interface -->
|
|
<div class="workflow-designer">
|
|
<div class="toolbar">
|
|
<h2>🏠 Document Processing Pipeline</h2>
|
|
<div class="toolbar-buttons">
|
|
<button class="btn btn-primary">💾 Save</button>
|
|
<button class="btn btn-success">▶️ Run</button>
|
|
<button class="btn btn-warning">📤 Export</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-content">
|
|
<!-- Component Palette -->
|
|
<div class="palette">
|
|
<h3>📦 Components</h3>
|
|
|
|
<div class="palette-section">
|
|
<h4>🎯 Tasks</h4>
|
|
<div class="palette-item" draggable="true">📄 Document Processing</div>
|
|
<div class="palette-item" draggable="true">📧 Email Processing</div>
|
|
<div class="palette-item" draggable="true">📊 Data Analysis</div>
|
|
<div class="palette-item" draggable="true">🔍 Content Analysis</div>
|
|
</div>
|
|
|
|
<div class="palette-section">
|
|
<h4>⚡ Actions</h4>
|
|
<div class="palette-item" draggable="true">🔗 SharePoint Upload</div>
|
|
<div class="palette-item" draggable="true">📤 Send Email</div>
|
|
<div class="palette-item" draggable="true">🌐 API Call</div>
|
|
<div class="palette-item" draggable="true">💾 Database Save</div>
|
|
</div>
|
|
|
|
<div class="palette-section">
|
|
<h4>🔀 Conditions</h4>
|
|
<div class="palette-item" draggable="true">❓ If/Then</div>
|
|
<div class="palette-item" draggable="true">🔄 Switch</div>
|
|
<div class="palette-item" draggable="true">🔄 Loop</div>
|
|
</div>
|
|
|
|
<div class="palette-section">
|
|
<h4>🔌 Integrations</h4>
|
|
<div class="palette-item" draggable="true">🔗 SharePoint</div>
|
|
<div class="palette-item" draggable="true">📧 Outlook</div>
|
|
<div class="palette-item" draggable="true">💬 Teams</div>
|
|
<div class="palette-item" draggable="true">☁️ OneDrive</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Canvas -->
|
|
<div class="canvas">
|
|
<div class="canvas-grid">
|
|
<!-- Sample Workflow Nodes -->
|
|
<div class="workflow-node task" style="top: 50px; left: 50px;">
|
|
<div class="node-header">📄 Document Processing</div>
|
|
<div class="node-content">Extract text from uploaded files</div>
|
|
</div>
|
|
|
|
<div class="workflow-node action" style="top: 50px; left: 300px;">
|
|
<div class="node-header">🔗 SharePoint Upload</div>
|
|
<div class="node-content">Upload processed files to SP</div>
|
|
</div>
|
|
|
|
<div class="workflow-node action" style="top: 50px; left: 550px;">
|
|
<div class="node-header">📤 Send Email</div>
|
|
<div class="node-content">Notify team of completion</div>
|
|
</div>
|
|
|
|
<div class="workflow-node condition" style="top: 200px; left: 300px;">
|
|
<div class="node-header">❓ Approval Required?</div>
|
|
<div class="node-content">Check if approval needed</div>
|
|
</div>
|
|
|
|
<div class="workflow-node integration" style="top: 200px; left: 550px;">
|
|
<div class="node-header">💬 Teams Notification</div>
|
|
<div class="node-content">Send message to channel</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Properties Panel -->
|
|
<div class="properties-panel">
|
|
<h3>📋 Properties Panel</h3>
|
|
|
|
<div class="property-group">
|
|
<h4>🏷️ Node Properties</h4>
|
|
<div class="property-item">
|
|
<div class="property-label">Name:</div>
|
|
<div class="property-value">Document Processing Task</div>
|
|
</div>
|
|
<div class="property-item">
|
|
<div class="property-label">Type:</div>
|
|
<div class="property-value">Task</div>
|
|
</div>
|
|
<div class="property-item">
|
|
<div class="property-label">Status:</div>
|
|
<div class="property-value">Active</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property-group">
|
|
<h4>⚙️ Parameters</h4>
|
|
<div class="property-item">
|
|
<div class="property-label">Input:</div>
|
|
<div class="property-value">{file}</div>
|
|
</div>
|
|
<div class="property-item">
|
|
<div class="property-label">Output:</div>
|
|
<div class="property-value">{extracted_text}</div>
|
|
</div>
|
|
<div class="property-item">
|
|
<div class="property-label">Format:</div>
|
|
<div class="property-value">PDF, DOCX, TXT</div>
|
|
</div>
|
|
<div class="property-item">
|
|
<div class="property-label">Timeout:</div>
|
|
<div class="property-value">300 seconds</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property-group">
|
|
<h4>✅ Validation</h4>
|
|
<div class="property-item">
|
|
<div class="property-label">Retry:</div>
|
|
<div class="property-value">3 attempts</div>
|
|
</div>
|
|
<div class="property-item">
|
|
<div class="property-label">Required:</div>
|
|
<div class="property-value">Yes</div>
|
|
</div>
|
|
<div class="property-item">
|
|
<div class="property-label">Secure:</div>
|
|
<div class="property-value">Yes</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property-group">
|
|
<h4>🎛️ Actions</h4>
|
|
<div style="display: flex; gap: 8px;">
|
|
<button class="btn btn-primary" style="flex: 1;">Edit</button>
|
|
<button class="btn btn-warning" style="flex: 1;">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Execution Monitor -->
|
|
<div class="execution-monitor">
|
|
<div class="monitor-header">
|
|
<h3>📊 Workflow Execution Monitor</h3>
|
|
<div class="status-indicator">
|
|
<div class="status-dot running"></div>
|
|
<span>Running (Step 2/5)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 40%;"></div>
|
|
</div>
|
|
|
|
<div style="display: flex; justify-content: space-between; margin: 10px 0;">
|
|
<span>⏱️ Elapsed Time: 00:01:23</span>
|
|
<span>📊 Progress: 40% (2/5 steps completed)</span>
|
|
</div>
|
|
|
|
<div class="step-list">
|
|
<div class="step-item">
|
|
<div class="step-header">
|
|
<span class="step-title">✅ Step 1: Document Upload</span>
|
|
<span class="step-status completed">Completed</span>
|
|
</div>
|
|
<div class="step-details">
|
|
📁 File: report.pdf (2.3MB) | ⏱️ Duration: 00:00:05
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step-item">
|
|
<div class="step-header">
|
|
<span class="step-title">🔄 Step 2: Extract Content</span>
|
|
<span class="step-status running">Running</span>
|
|
</div>
|
|
<div class="step-details">
|
|
📄 Pages: 15 | 📊 Progress: 60% (9/15 pages processed) | ⏱️ Elapsed: 00:00:45
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step-item">
|
|
<div class="step-header">
|
|
<span class="step-title">⏳ Step 3: Analyze Content</span>
|
|
<span class="step-status waiting">Waiting</span>
|
|
</div>
|
|
<div class="step-details">
|
|
🔗 Dependencies: Step 2 completion | 📊 Estimated time: 00:01:30
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step-item">
|
|
<div class="step-header">
|
|
<span class="step-title">⏳ Step 4: Upload to SharePoint</span>
|
|
<span class="step-status waiting">Waiting</span>
|
|
</div>
|
|
<div class="step-details">
|
|
🔗 Dependencies: Step 3 completion | 📊 Estimated time: 00:00:20
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step-item">
|
|
<div class="step-header">
|
|
<span class="step-title">⏳ Step 5: Send Email Notification</span>
|
|
<span class="step-status waiting">Waiting</span>
|
|
</div>
|
|
<div class="step-details">
|
|
🔗 Dependencies: Step 4 completion | 📊 Estimated time: 00:00:10
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Platform Overview Content -->
|
|
<div class="content-section">
|
|
<h2>🎯 Platform Overview</h2>
|
|
<p>The chat process architecture provides a powerful foundation for building custom workflows that integrate with enterprise systems like SharePoint, Outlook, and other business applications. This platform enables users to automate their "myWorld" - their personal and professional digital environment.</p>
|
|
</div>
|
|
|
|
<!-- Platform Architecture -->
|
|
<div class="content-section">
|
|
<h2>🏗️ Platform Architecture</h2>
|
|
<p>The platform consists of several key layers that work together to provide a comprehensive workflow automation solution:</p>
|
|
|
|
<h3>Platform Layer Components:</h3>
|
|
<ul class="feature-list">
|
|
<li><strong>Workflow Model UI:</strong> Visual builder, template editor, visual editor, and parameter editor</li>
|
|
<li><strong>Integration Hub:</strong> SharePoint, Outlook, Web Services, Database, and API connectors</li>
|
|
<li><strong>Workflow Engine:</strong> Core engine, task scheduler, variable manager, and condition manager</li>
|
|
<li><strong>Business Logic:</strong> Rule engine, action library, and template library</li>
|
|
</ul>
|
|
|
|
<h3>Enterprise Systems Integration:</h3>
|
|
<ul class="feature-list">
|
|
<li><strong>Microsoft 365:</strong> SharePoint Online, Outlook 365, Teams, OneDrive, Excel Online, Power BI</li>
|
|
<li><strong>Custom Systems:</strong> CRM, ERP, HR, Finance, and Legal systems</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Workflow Model UI Components -->
|
|
<div class="content-section">
|
|
<h2>🎨 Workflow Model UI Components</h2>
|
|
|
|
<h3>1. Visual Workflow Builder</h3>
|
|
<ul class="feature-list">
|
|
<li><strong>Drag & Drop Interface:</strong> Visual workflow construction</li>
|
|
<li><strong>Node Types:</strong> Tasks, Conditions, Loops, Integrations</li>
|
|
<li><strong>Connection Types:</strong> Sequential, Parallel, Conditional</li>
|
|
<li><strong>Real-time Preview:</strong> Live workflow simulation</li>
|
|
<li><strong>Template Gallery:</strong> Pre-built workflow templates</li>
|
|
</ul>
|
|
|
|
<h3>2. Workflow Template Editor</h3>
|
|
<ul class="feature-list">
|
|
<li><strong>Parameterized Templates:</strong> Reusable workflow patterns</li>
|
|
<li><strong>Variable Substitution:</strong> Dynamic content insertion</li>
|
|
<li><strong>Conditional Logic:</strong> If-then-else workflows</li>
|
|
<li><strong>Action Libraries:</strong> Pre-built action collections</li>
|
|
</ul>
|
|
|
|
<h3>3. Integration Configuration</h3>
|
|
<ul class="feature-list">
|
|
<li><strong>Authentication Config:</strong> OAuth 2.0, API keys, certificates</li>
|
|
<li><strong>Endpoint Config:</strong> Service URLs, connection settings</li>
|
|
<li><strong>Mapping Config:</strong> Data transformation rules</li>
|
|
<li><strong>Test Connection:</strong> Validate integration setup</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Custom Workflow Examples -->
|
|
<div class="content-section">
|
|
<h2>🔧 Custom Workflow Examples</h2>
|
|
|
|
<h3>1. Document Approval Workflow</h3>
|
|
<p>A comprehensive document processing and approval system that integrates multiple enterprise systems.</p>
|
|
<div class="code-block">
|
|
Document Upload → SharePoint Upload → Extract Metadata → Route to Approver →
|
|
Decision Point → Finalize Document → Update SharePoint → Archive Document
|
|
</div>
|
|
|
|
<h3>2. Customer Onboarding Workflow</h3>
|
|
<p>Automated customer onboarding process with CRM integration and team collaboration.</p>
|
|
<div class="code-block">
|
|
New Customer Data → Validate Information → Create CRM Record → Generate Welcome Email →
|
|
Setup SharePoint Site → Assign Team Access → Schedule Kickoff Meeting → Send Welcome Package
|
|
</div>
|
|
|
|
<h3>3. Invoice Processing Workflow</h3>
|
|
<p>Intelligent invoice processing with OCR, validation, and approval routing.</p>
|
|
<div class="code-block">
|
|
Invoice Received → OCR Processing → Extract Data → Validate Invoice →
|
|
Decision Point → Route for Approval → Manager Approval → Process Payment → Update Accounting
|
|
</div>
|
|
</div>
|
|
|
|
<!-- "myWorld" Automation Scenarios -->
|
|
<div class="content-section">
|
|
<h2>🎯 "myWorld" Automation Scenarios</h2>
|
|
|
|
<h3>1. Personal Productivity</h3>
|
|
<ul class="feature-list">
|
|
<li><strong>Email Triage:</strong> Automatically categorize and route emails</li>
|
|
<li><strong>Meeting Preparation:</strong> Auto-generate meeting agendas and materials</li>
|
|
<li><strong>Document Organization:</strong> Automatic filing and tagging</li>
|
|
<li><strong>Task Prioritization:</strong> AI-driven task scheduling</li>
|
|
<li><strong>Knowledge Management:</strong> Automatic note organization</li>
|
|
</ul>
|
|
|
|
<h3>2. Team Collaboration</h3>
|
|
<ul class="feature-list">
|
|
<li><strong>Project Updates:</strong> Automatic status reporting</li>
|
|
<li><strong>Team Coordination:</strong> Meeting scheduling and follow-ups</li>
|
|
<li><strong>Document Collaboration:</strong> Version control and review processes</li>
|
|
<li><strong>Knowledge Sharing:</strong> Automatic documentation updates</li>
|
|
<li><strong>Progress Monitoring:</strong> Real-time dashboard updates</li>
|
|
</ul>
|
|
|
|
<h3>3. Business Processes</h3>
|
|
<ul class="feature-list">
|
|
<li><strong>Lead Management:</strong> CRM integration and follow-up automation</li>
|
|
<li><strong>Campaign Management:</strong> Marketing automation and tracking</li>
|
|
<li><strong>Employee Onboarding:</strong> HR process automation</li>
|
|
<li><strong>Invoice Processing:</strong> Financial workflow automation</li>
|
|
<li><strong>Contract Management:</strong> Legal document automation</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Integration Connectors -->
|
|
<div class="content-section">
|
|
<h2>🔌 Integration Connectors</h2>
|
|
|
|
<h3>1. SharePoint Connector</h3>
|
|
<div class="code-block">
|
|
class SharePointConnector:
|
|
- uploadDocument(site, library, file)
|
|
- createListItem(list, data)
|
|
- updateListItem(list, id, data)
|
|
- searchDocuments(query)
|
|
- createSite(siteName, template)
|
|
- managePermissions(site, users, permissions)
|
|
</div>
|
|
|
|
<h3>2. Outlook Connector</h3>
|
|
<div class="code-block">
|
|
class OutlookConnector:
|
|
- sendEmail(recipients, subject, body, attachments)
|
|
- createMeeting(attendees, subject, start, end, location)
|
|
- processInbox(filters, actions)
|
|
- manageCalendar(events, reminders)
|
|
- createTask(subject, dueDate, priority)
|
|
</div>
|
|
|
|
<h3>3. Teams Connector</h3>
|
|
<div class="code-block">
|
|
class TeamsConnector:
|
|
- sendMessage(channel, message)
|
|
- createChannel(team, channelName)
|
|
- scheduleMeeting(team, meeting)
|
|
- shareFile(channel, file)
|
|
- createPoll(channel, question, options)
|
|
</div>
|
|
|
|
<h3>4. Web Services Connector</h3>
|
|
<div class="code-block">
|
|
class WebServicesConnector:
|
|
- makeAPIRequest(endpoint, method, data)
|
|
- handleAuthentication(authType, credentials)
|
|
- processResponse(response, mapping)
|
|
- handleErrors(error, retryLogic)
|
|
- rateLimit(requests, limits)
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Platform Benefits -->
|
|
<div class="content-section">
|
|
<h2>🚀 Platform Benefits</h2>
|
|
|
|
<h3>1. For End Users</h3>
|
|
<ul class="feature-list">
|
|
<li><strong>No-Code/Low-Code:</strong> Visual workflow building</li>
|
|
<li><strong>Template Library:</strong> Pre-built solutions</li>
|
|
<li><strong>Integration Ready:</strong> Connect to existing systems</li>
|
|
<li><strong>AI-Powered:</strong> Intelligent automation suggestions</li>
|
|
<li><strong>Mobile Friendly:</strong> Work from anywhere</li>
|
|
</ul>
|
|
|
|
<h3>2. For Organizations</h3>
|
|
<ul class="feature-list">
|
|
<li><strong>Scalable:</strong> Handle complex workflows</li>
|
|
<li><strong>Secure:</strong> Enterprise-grade security</li>
|
|
<li><strong>Compliant:</strong> Audit trails and governance</li>
|
|
<li><strong>Cost Effective:</strong> Reduce manual work</li>
|
|
<li><strong>Flexible:</strong> Adapt to changing needs</li>
|
|
</ul>
|
|
|
|
<h3>3. For Developers</h3>
|
|
<ul class="feature-list">
|
|
<li><strong>Extensible:</strong> Add custom connectors</li>
|
|
<li><strong>API-First:</strong> Programmatic access</li>
|
|
<li><strong>Plugin Architecture:</strong> Modular development</li>
|
|
<li><strong>Testing Tools:</strong> Comprehensive testing framework</li>
|
|
<li><strong>Documentation:</strong> Complete API documentation</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Drag and drop functionality for palette items
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const paletteItems = document.querySelectorAll('.palette-item');
|
|
const canvas = document.querySelector('.canvas-grid');
|
|
|
|
paletteItems.forEach(item => {
|
|
item.addEventListener('dragstart', function(e) {
|
|
this.classList.add('dragging');
|
|
e.dataTransfer.setData('text/plain', this.textContent);
|
|
});
|
|
|
|
item.addEventListener('dragend', function() {
|
|
this.classList.remove('dragging');
|
|
});
|
|
});
|
|
|
|
canvas.addEventListener('dragover', function(e) {
|
|
e.preventDefault();
|
|
});
|
|
|
|
canvas.addEventListener('drop', function(e) {
|
|
e.preventDefault();
|
|
const nodeType = e.dataTransfer.getData('text/plain');
|
|
const rect = canvas.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
|
|
// Create new workflow node
|
|
const newNode = document.createElement('div');
|
|
newNode.className = 'workflow-node task';
|
|
newNode.style.position = 'absolute';
|
|
newNode.style.left = x + 'px';
|
|
newNode.style.top = y + 'px';
|
|
|
|
const nodeHeader = document.createElement('div');
|
|
nodeHeader.className = 'node-header';
|
|
nodeHeader.textContent = nodeType;
|
|
|
|
const nodeContent = document.createElement('div');
|
|
nodeContent.className = 'node-content';
|
|
nodeContent.textContent = 'New node created from palette';
|
|
|
|
newNode.appendChild(nodeHeader);
|
|
newNode.appendChild(nodeContent);
|
|
canvas.appendChild(newNode);
|
|
});
|
|
|
|
// Make existing nodes draggable
|
|
const workflowNodes = document.querySelectorAll('.workflow-node');
|
|
workflowNodes.forEach(node => {
|
|
node.addEventListener('mousedown', function(e) {
|
|
if (e.target === this) {
|
|
this.style.cursor = 'grabbing';
|
|
const startX = e.clientX - this.offsetLeft;
|
|
const startY = e.clientY - this.offsetTop;
|
|
|
|
function onMouseMove(e) {
|
|
this.style.left = (e.clientX - startX) + 'px';
|
|
this.style.top = (e.clientY - startY) + 'px';
|
|
}
|
|
|
|
function onMouseUp() {
|
|
this.style.cursor = 'grab';
|
|
document.removeEventListener('mousemove', onMouseMove);
|
|
document.removeEventListener('mouseup', onMouseUp);
|
|
}
|
|
|
|
document.addEventListener('mousemove', onMouseMove.bind(this));
|
|
document.addEventListener('mouseup', onMouseUp.bind(this));
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |