ui-workflow-builder
Design visual workflow processes with step-by-step forms and approvals for SAP entity types, enabling structured business process automation.
Instructions
Creates visual workflow processes with step-by-step forms and approvals
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| workflowName | Yes | Name of the workflow process | |
| steps | Yes | Workflow step definitions | |
| entityType | Yes | SAP entity type for the workflow |
Implementation Reference
- Comprehensive Zod input schema defining all parameters for creating UI workflows including steps, transitions, roles, notifications, escalation, and integrations.
const UIWorkflowBuilderSchema = { workflowType: z.string().describe("Type of workflow (e.g., 'approval', 'onboarding', 'order-processing')"), title: z.string().describe("Workflow title"), description: z.string().optional().describe("Workflow description"), steps: z.array(z.object({ id: z.string().describe("Unique step identifier"), name: z.string().describe("Step display name"), description: z.string().optional().describe("Step description"), component: z.enum(['form', 'approval', 'notification', 'decision', 'data-entry', 'review', 'custom']).describe("Step component type"), config: z.object({ entityType: z.string().optional().describe("SAP entity type for data operations"), formFields: z.array(z.object({ name: z.string(), label: z.string(), type: z.string(), required: z.boolean().optional(), validation: z.record(z.any()).optional() })).optional().describe("Form fields for form components"), approvers: z.array(z.object({ role: z.string(), required: z.boolean().optional(), escalationTime: z.number().optional() })).optional().describe("Approvers for approval components"), conditions: z.array(z.object({ field: z.string(), operator: z.enum(['equals', 'not_equals', 'greater_than', 'less_than', 'contains']), value: z.any() })).optional().describe("Conditions for decision components"), template: z.string().optional().describe("Custom template for notifications"), dataSource: z.object({ entitySet: z.string().optional(), query: z.record(z.any()).optional() }).optional().describe("Data source configuration") }).optional().describe("Step-specific configuration"), validators: z.array(z.object({ type: z.enum(['required', 'format', 'business', 'approval']), config: z.record(z.any()).optional() })).optional().describe("Step validation rules"), actions: z.array(z.object({ type: z.enum(['validate', 'save', 'execute', 'navigate', 'notify', 'approve', 'reject']), target: z.string().optional(), condition: z.string().optional(), config: z.record(z.any()).optional() })).optional().describe("Step actions"), timeout: z.number().optional().describe("Step timeout in seconds"), parallel: z.boolean().optional().describe("Allow parallel execution") })).describe("Workflow steps"), transitions: z.record(z.record(z.string())).optional().describe("Step transition rules"), roles: z.array(z.object({ id: z.string(), name: z.string(), permissions: z.array(z.string()), steps: z.array(z.string()).optional().describe("Steps this role can access") })).optional().describe("Workflow roles and permissions"), persistence: z.enum(['localStorage', 'sessionStorage', 'server', 'sap']).optional().describe("Data persistence method"), notifications: z.object({ email: z.boolean().optional(), sms: z.boolean().optional(), push: z.boolean().optional(), sapInbox: z.boolean().optional() }).optional().describe("Notification settings"), escalation: z.object({ enabled: z.boolean(), timeouts: z.record(z.number()).optional(), escalationChain: z.array(z.string()).optional() }).optional().describe("Escalation configuration"), analytics: z.object({ trackStepTime: z.boolean().optional(), trackUserActions: z.boolean().optional(), generateReports: z.boolean().optional() }).optional().describe("Analytics configuration"), integration: z.object({ sapWorkflowService: z.boolean().optional(), externalApi: z.string().optional(), webhooks: z.array(z.object({ event: z.string(), url: z.string() })).optional() }).optional().describe("External system integration") }; - src/tools/ui/ui-workflow-builder-tool.ts:124-174 (registration)Tool registration method that registers 'ui-workflow-builder' with MCP server, including title, detailed description, input schema, and handler function.
public async register(): Promise<void> { this.mcpServer.registerTool( "ui-workflow-builder", { title: "UI Workflow Builder", description: `Create visual workflow processes with step-by-step forms and approvals. Features: - Visual workflow designer with drag-and-drop interface - Multiple step types (forms, approvals, decisions, notifications) - Role-based access control and permissions - Conditional branching and parallel execution - Integration with SAP Workflow Service - Email, SMS, and push notifications - Escalation and timeout handling - Real-time progress tracking - Analytics and reporting - Mobile-responsive design - Audit trail and compliance Required scope: ui.workflows Step Types: - form: Data entry forms with validation - approval: Multi-level approval processes - notification: Email/SMS notifications - decision: Conditional branching based on data - data-entry: Direct SAP data manipulation - review: Data review and verification - custom: Custom HTML/JavaScript components Workflow Types: - approval: Document/request approval flows - onboarding: Employee/customer onboarding - order-processing: Order fulfillment workflows - incident-management: Issue resolution processes - change-request: Change management workflows Examples: - Purchase approval: {"workflowType": "approval", "steps": [...]} - Employee onboarding: {"workflowType": "onboarding", "title": "New Employee Setup"} - Order processing: {"workflowType": "order-processing", "integration": {...}}`, inputSchema: UIWorkflowBuilderSchema }, async (args: Record<string, unknown>) => { return await this.handleWorkflowBuilding(args); } ); this.logger.info("✅ UI Workflow Builder tool registered successfully"); } - Primary handler function that executes the tool: validates input, checks authorization, validates workflow structure, enhances steps, generates UI components, integrates SAP features, and returns formatted response with HTML/CSS/JS.
private async handleWorkflowBuilding(args: unknown): Promise<any> { try { // Validate input parameters const params = z.object(UIWorkflowBuilderSchema).parse(args); this.logger.info(`🔄 Building workflow: ${params.title} (${params.workflowType}) with ${params.steps.length} steps`); // Check authentication and authorization const authCheck = await this.checkUIAccess('ui.workflows'); if (!authCheck.hasAccess) { return { content: [{ type: "text", text: `❌ Authorization denied: ${authCheck.reason || 'Access denied for UI workflow building'}\n\nRequired scope: ui.workflows` }] }; } // Step 1: Validate workflow structure const validationResult = await this.validateWorkflowStructure(params); if (!validationResult.valid) { return { content: [{ type: "text", text: `❌ Workflow validation failed:\n${validationResult.errors.join('\n')}` }] }; } // Step 2: Prepare workflow steps with enhanced configurations const enhancedSteps = await this.enhanceWorkflowSteps(params.steps); // Step 3: Create transition rules const transitionRules = this.createTransitionRules(enhancedSteps, params.transitions); // Step 4: Create workflow configuration const workflowConfig: WorkflowConfig = { workflowType: params.workflowType, steps: enhancedSteps, transitions: transitionRules, persistence: params.persistence || 'localStorage' }; // Step 5: Generate workflow UI const workflowResult = await this.componentLibrary.generateWorkflowBuilder(workflowConfig); // Step 6: Add SAP-specific enhancements const enhancedResult = await this.enhanceWorkflowResult(workflowResult, params); // Step 7: Prepare response const response = this.createWorkflowResponse(enhancedResult, params, enhancedSteps); this.logger.info(`✅ Workflow '${params.title}' built successfully`); return { content: [ { type: "text", text: `# ${params.title}\n\n` + `${params.description || `Visual ${params.workflowType} workflow with step-by-step process`}\n\n` + `## Workflow Overview:\n` + `- Type: ${params.workflowType}\n` + `- Steps: ${params.steps.length}\n` + `- Roles: ${params.roles?.length || 0}\n` + `- Persistence: ${params.persistence || 'localStorage'}\n` + `- Notifications: ${this.getNotificationSummary(params.notifications)}\n` + `- Escalation: ${params.escalation?.enabled ? '✅' : '❌'}\n\n` + `## Workflow Steps:\n` + params.steps.map((step, index) => `${index + 1}. **${step.name}** (${step.component})\n ${step.description || 'No description'}` ).join('\n') + '\n\n' + `## Features:\n` + `- Visual Progress Indicator: ✅\n` + `- Role-based Access Control: ${params.roles?.length ? '✅' : '❌'}\n` + `- Conditional Branching: ${enhancedSteps.some(s => s.transitions) ? '✅' : '❌'}\n` + `- Integration: ${params.integration ? Object.keys(params.integration).join(', ') : 'None'}\n` + `- Analytics: ${params.analytics?.trackStepTime ? '✅' : '❌'}\n\n` + `Start the workflow by clicking the 'Begin Process' button in the generated interface.` }, { type: "resource", data: response, mimeType: "application/json" } ] }; } catch (error) { this.logger.error(`❌ Failed to build workflow`, error as Error); return { content: [{ type: "text", text: `❌ Failed to build workflow: ${(error as Error).message}` }] }; } } - src/middleware/authentication-validator.ts:123-129 (registration)Scope mapping registration for UI tools in authentication validator, mapping 'ui-workflow-builder' to required 'ui.workflows' scope.
const scopeMapping: Record<string, string> = { 'ui-form-generator': 'ui.forms', 'ui-data-grid': 'ui.grids', 'ui-dashboard-composer': 'ui.dashboards', 'ui-workflow-builder': 'ui.workflows', 'ui-report-builder': 'ui.reports', }; - src/middleware/mcp-auth.ts:613-618 (registration)Scope mapping for authorization in MCP auth manager, defining 'ui-workflow-builder' requires 'ui.workflows' scope.
'ui-form-generator': 'ui.forms', 'ui-data-grid': 'ui.grids', 'ui-dashboard-composer': 'ui.dashboards', 'ui-workflow-builder': 'ui.workflows', 'ui-report-builder': 'ui.reports', };