@optimajet/workflow-forms-manager

A powerful drag-and-drop form builder component for React, built on top of the FormEngine Core. This library provides a complete form management solution for Workflow Engine, enabling visual form creation, editing, and version control.

Features

• Drag-and-Drop Form Builder — Visual form designer with intuitive interface
• Version Control — Built-in form versioning and history management
• Template Support — Create and manage reusable form templates
• RSuite Integration — Pre-built UI components based on RSuite
• Real-time Preview — See your forms as you build them
• JSON-Based Storage — Store and retrieve forms as JSON
• API Integration — Seamless integration with backend services
• Custom Fetch Support — Use your own fetch implementation
• Error Handling — Built-in error handling and reporting

Installation

npm install @optimajet/workflow-forms-manager

Dependencies

This package requires the following peer dependencies:

npm install react react-dom

Quick Start

import React from 'react'
import { FormsManager } from '@optimajet/workflow-forms-manager'
import '@optimajet/workflow-forms-manager/index.css'

function App() {
  const handleError = (error) => {
    console.error('Form Manager Error:', error)
  }

  return (
    <FormsManager
      apiUrl="https://your-api.example.com/forms"
      licenseKey="your-license-key" // Optional
      onError={handleError}
    />
  )
}

export default App

API Reference

FormsManagerProps

| Property | Type | Required | Description | |----------|-----------------------------------------------------------------|----------|-------------| | apiUrl | string | Yes | Base URL for the API endpoint used for form storage | | licenseKey | string | No | License key for commercial use | | onError | (error: string \| Error) => void | No | Callback function called when an error occurs | | customFetch | (input: RequestInfo, init?: RequestInit) => Promise<Response> | No | Custom fetch function for API requests |

Features in Detail

Form Builder Interface

The Forms Manager provides a complete drag-and-drop interface for creating forms:

• Component Palette — Browse and add form components
• Canvas — Design your form layout visually
• Properties Panel — Configure component properties and behavior
• Forms Tab — Manage multiple forms and versions

Version Management

Every form can have multiple versions, allowing you to:

• Create new versions of existing forms
• View and compare different versions
• Restore previous versions
• Track changes over time

Template System

Create reusable templates to speed up form creation:

• Save forms as templates
• Create new forms from templates
• Share templates across your organization

Built With

• @react-form-builder/core — Core form engine
• @react-form-builder/designer — Form designer component
• @react-form-builder/components-rsuite — RSuite components
• RSuite — UI component library

Documentation

• Workflow Engine Documentation
• Forms Sample
• FormEngine Core Documentation

Support

For issues and questions:

• Email: [email protected]
• Website: https://workflowengine.io/

License

See EULA for license information.

Author

Optimajet

• Website: https://optimajet.com/
• Homepage: https://workflowengine.io/