@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

``bash
npm install @optimajet/workflow-forms-manager
`

Dependencies

This package requires the following peer dependencies:

`bash
npm install react react-dom
`

Quick Start

`jsx
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 (
apiUrl="https://your-api.example.com/forms"
licenseKey="your-license-key" // Optional
onError={handleError}
/>
)
}

export default App
`

API Reference

$3

| 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` | No | Custom fetch function for API requests |

Features in Detail

$3

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

$3

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

$3

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: support@optimajet.com
- Website: https://workflowengine.io/

License

See EULA for license information.

Author

Optimajet

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