Workflow JSON Builder

A beautiful, modern web application for building card-based workflow JSON configurations with a visual interface.

🚀 Features

• Visual Workflow Builder: Intuitive tree-based interface for managing workflows
• 10+ Card Types: Support for all action types including SEND_TEMPLATE, SEND_TEXT, SET_TIMER, CONDITIONAL, and more
• Dynamic Forms: Type-specific forms that show only relevant fields
• Live JSON Preview: Real-time syntax-highlighted JSON output
• Import/Export: Save and load workflow configurations
• Modern UI: Dark mode with glassmorphism effects and smooth animations
• No Build Required: Pure HTML/CSS/JavaScript - just open and use

📋 Getting Started

1. Open index.html in your web browser
2. Configure workflow metadata (name, channel ID, execution mode)
3. Add departments using the ➕ button
4. Add steps to departments
5. Add actions to steps
6. Configure each action with the dynamic form editor
7. Export your workflow JSON

🎯 Supported Card Types

Communication Actions

• SEND_TEMPLATE: Send WhatsApp template messages with buttons
• SEND_TEXT: Send plain text messages with variable support
• SEND_ESCALATION: Send escalation messages to supervisors

Timer Actions

• SET_TIMER: Create a timer that triggers after specified minutes
• CANCEL_TIMER: Cancel a previously set timer

Flow Control

• WAIT_FOR_EVENT: Wait for user actions or timer events
• CONDITIONAL: Execute different actions based on conditions
• MOVE_NEXT: Move to the next department
• TRIGGER_DEPARTMENT_STEP: Trigger a specific step in another department

Data Actions

• UPDATE_TICKET_FIELD: Update ticket field values

📝 JSON Structure

The builder generates JSON matching this structure:

{
  "workFlowConfig": {
    "uid": "...",
    "channelId": 1265,
    "workflowName": "My Workflow",
    "executionMode": "SEQUENTIAL",
    "active": true,
    "metaData": { ... }
  },
  "departmentConfigs": [
    {
      "uid": "...",
      "departmentName": "Department Name",
      "departmentOrder": 1,
      "metaData": { "actions": [] },
      "departmentSteps": [
        {
          "uid": "...",
          "stepKey": "STEP_KEY",
          "stepOrder": 1,
          "metaData": {
            "actions": [
              {
                "type": "SEND_TEMPLATE",
                "templateKey": "...",
                "payload": {
                  "sendTo": "{{variable_mobileNumber}}"
                },
                "templateTexts": [ ... ]
              }
            ]
          }
        }
      ]
    }
  ]
}

💡 Usage Tips

Dynamic Send To

The payload.sendTo field supports:

• Static phone numbers: "919095613252"
• Variables: "{{variable_mobileNumber}}" or "{{initiator_mobile_number}}"

Template Texts

When configuring SEND_TEMPLATE or SEND_ESCALATION:

• Use componentType: "body" for message body variables
• Use componentType: "QUICK_REPLY" for interactive buttons
• Add metaData with event and buttonName for buttons

Wait for Events

Map events to next steps:

• Button clicks: "ACK_CLICKED" → "ACKNOWLEDGE_SUCCESS"
• Timer events: "TIMER_TASK_TIMEOUT" → "TIMEOUT_STEP"

Conditionals

Use CONDITIONAL actions to branch logic:

• Set condition with field, operator, value, and module
• Define onTrue and onFalse actions (can be nested actions)

Variables in Text

Use double curly braces for variables:

• {{variable.ticket.patient_name}}
• {{variable.ticket.patient_id}}
• {{variable_mobileNumber}}

🎨 UI Overview

• Left Panel: Workflow structure tree (departments → steps → actions)
• Center Panel: Dynamic editor for selected item
• Right Panel: Live JSON preview with syntax highlighting
• Top Bar: Workflow metadata and action buttons

🔧 Development

This is a standalone web application with no dependencies or build process.

File Structure

workflowJsonBuilder/
├── index.html              # Main HTML file
├── styles.css              # All styles and design system
├── js/
│   ├── cardSchemas.js      # Card type definitions
│   ├── workflowState.js    # State management
│   ├── uiManager.js        # UI rendering
│   ├── cardEditor.js       # Dynamic form generation
│   └── app.js              # Application entry point
├── examples/
│   └── sample-workflow.json # Example workflow
└── README.md               # This file

📦 Export/Import

• Export: Downloads workflow as JSON file
• Import: Load existing workflow JSON
• Copy: Copy JSON to clipboard
• Clear: Reset entire workflow

🎯 Best Practices

1. Naming: Use clear, descriptive names for departments and steps
2. Step Keys: Use UPPERCASE_WITH_UNDERSCORES for step keys
3. Timer Keys: Use descriptive timer keys to avoid conflicts
4. Events: Document event names in your workflow design
5. Testing: Test exported JSON in your workflow engine

🐛 Troubleshooting

• JSON not updating: Make sure to save changes after editing
• Import fails: Verify JSON structure matches expected format
• Missing fields: Check that all required fields are filled

📄 License

This project is open source and available for use.

---

Built with ❤️ for workflow automation