ui-workflow-builder
Design visual workflow processes with step-by-step forms and approvals for SAP entity types, enabling structured data handling and approval chains.
Instructions
Creates visual workflow processes with step-by-step forms and approvals
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| entityType | Yes | SAP entity type for the workflow | |
| steps | Yes | Workflow step definitions | |
| workflowName | Yes | Name of the workflow process |
Implementation Reference
- src/tools/ui/ui-workflow-builder-tool.ts:124-174 (registration)Tool registration with MCP server, including title, description, input schema, and handler function reference.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"); }
- Comprehensive input schema using Zod for validating workflow configuration including steps, transitions, roles, notifications, 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") };
- Primary handler function that orchestrates workflow building: input validation, auth check, structure validation, step enhancement, UI generation, SAP integration, and formatted response with HTML/CSS/JS for interactive workflow interface.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}` }] }; } }