@optimajet/workflow-forms-manager

@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: [e-mail]
• Website: https://workflowengine.io/

License

See EULA for license information.

Author

Optimajet

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