Interface Designer

Visual form builder with drag-and-drop interaction:

Widget Library (left sidebar):

• Input widgets (text, number, date, dropdown)

• Layout widgets (container, tabs, accordion)

• Display widgets (label, image, table)

• Advanced widgets (file upload, signature, maps)

Design Canvas (center):

• Drop zone for widgets

• Visual editing (resize, reposition)

• Property inspector for configuration

• Preview mode to test behavior

Properties Panel (right):

• Widget-specific configuration

• Data binding to workflow

• Validation rules

• Styling options

Workflow Designer

Visual workflow orchestration connecting process steps:

Workflow Steps:

• Human tasks (approvals, reviews)

• Service calls (REST APIs, database queries)

• Business rules (conditions, calculations)

• Notifications (email, SMS)

Visual Flow:

• Drag workflow steps onto canvas

• Connect with arrows to define sequence

• Configure step parameters

• Test workflow execution

Two-Way Binding

The magic: changes in Interface Designer automatically reflected in Workflow Designer and vice versa:

• Add form field → Available in workflow as variable

• Create workflow output → Can be displayed in form

• Modify data model → Both views update

JSON-Based Persistence

Applications saved as JSON configuration:

{
  "interface": {
    "widgets": [
      {
        "type": "textInput",
        "id": "employeeName",
        "label": "Employee Name",
        "required": true,
        "validation": "^[A-Za-z\\s]+$"
      }
    ]
  },
  "workflow": {
    "steps": [
      {
        "type": "humanTask",
        "name": "managerApproval",
        "assignee": "manager",
        "form": "approvalForm"
      }
    ]
  }
}

This meant:

• Applications are data, not code

• Easy to version control

• Export/import between environments

• Extend via configuration, not custom development

Technical Implementation

Architecture Evolution

Phase 1: jQuery (2012-2013)

• Started with jQuery and jQuery UI

• Drag-and-drop with jQuery UI Sortable

• DOM manipulation for rendering

Why jQuery initially:

• Fast to prototype

• Mature drag-and-drop libraries

• Team expertise

Why we migrated:

• jQuery couldn't scale to complex applications

• DOM manipulation became unmaintainable

• State management was chaotic

• Performance issues with large forms

Phase 2: React Migration (2014)

• Rebuilt with React and Redux

• Component-based architecture

• Declarative rendering

• Predictable state management

Why React:

• Component model aligned with widget architecture

• Virtual DOM solved performance issues

• Redux made state predictable

• Easier to test and maintain

Widget Architecture

Every widget followed this pattern:

class TextInputWidget extends React.Component {
  render() {
    const { label, required, value, onChange } = this.props;
    
    return (
      <div className="widget-container">
        <label>
          {label}
          {required && <span className="required">*</span>}
        </label>
        <input
          type="text"
          value={value}
          onChange={onChange}
          required={required}
        />
      </div>
    );
  }
}

Widget Registry:

• Central registry of available widgets

• Widgets self-describe their properties

• Drag-and-drop creates widget instances

• Properties panel generated from widget schema

Drag-and-Drop Implementation

Used HTML5 Drag & Drop API with React:

// Simplified drag-and-drop logic
const handleDragStart = (e, widgetType) => {
  e.dataTransfer.setData('widgetType', widgetType);
};

const handleDrop = (e) => {
  const widgetType = e.dataTransfer.getData('widgetType');
  const newWidget = createWidget(widgetType);
  dispatch(addWidget(newWidget));
};

Challenges:

• HTML5 drag-and-drop API is inconsistent across browsers

• Had to add polyfills for IE support

• Touch devices required separate implementation

State Management with Redux

Application state structure:

{
  interface: {
    widgets: [...],
    layout: {...},
    selectedWidget: null
  },
  workflow: {
    steps: [...],
    connections: [...],
    variables: [...]
  },
  preview: {
    mode: 'design' | 'preview',
    testData: {...}
  }
}