@optimajet/workflow-forms-viewer

A lightweight React component for rendering and executing forms created with Workflow Engine. This library provides a complete solution for displaying forms, handling user input, validation, and form submission.

Features

- JSON-First Rendering — Render forms from JSON definitions
- Multi-Form Support — Display multiple forms with tabbed navigation
- Custom Tabs — Provide your own tab renderer for custom UI
- Form Execution — Built-in form submission and execution handling
- Save Draft — Support for saving form data as drafts
- Validation — Built-in form validation with Zod
- RSuite Integration — Pre-styled components based on RSuite
- Flexible Architecture — Customizable form viewer properties
- Error Handling — Comprehensive error handling and reporting

Installation

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

Dependencies

This package requires the following peer dependencies:

`bash
npm install react
`

Quick Start

`jsx
import React from 'react'
import {Form, FormKey, FormsViewer} from '@optimajet/workflow-forms-viewer'

export function UserForm({apiUrl}: AppProps) {

const {id} = useParams()
const {selectedUser} = useAppState()
const showError = useShowError()

const getForm = useCallback(async (formKey: FormKey) => {
...
}, [apiUrl])

const getForms = useCallback(async () => {
...
}, [apiUrl, id, selectedUser])

const saveForm = useCallback(async (processId: string, formKey: FormKey, data: Record) => {
...
}, [apiUrl, selectedUser])

const executeForm = useCallback(async (processId: string, formKey: FormKey, commandName: string, data: Record) => {
...
}, [apiUrl, selectedUser])

return executeForm={executeForm}
/>

}
`

API Reference

$3

| Property | Type | Required | Description |
|----------|-------------------------------------------------------------------------------------------------------------------------------------------------|----------|-------------|
| getForms | () => Form[] \| Promise | Yes | Handler to retrieve list of available forms |
| getForm | (formKey: FormKey) => string \| Promise | Yes | Handler to retrieve form definition by key |
| saveForm | (processId: string, formKey: FormKey, data: Record) => SaveFormResponse \| Promise | Yes | Handler to save form data (draft) |
| executeForm | (processId: string, form: FormKey, commandName: string, data: Record) => ExecuteFormResponse \| Promise | Yes | Handler to execute/submit form |
| onError | (error: string \| Error) => void | Yes | Error handler callback |
| onSuccess | (message: string) => void | Yes | Success handler callback |
| tabsRenderer | (props: TabsRendererProps) => React.ReactElement | No | Custom tabs renderer component |
| formViewerProps | OmittedFormViewerProps` | No | Additional props for FormViewer component |

Built With

- @react-form-builder/core — Core form engine
- @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

MIT

Author

Optimajet

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