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.
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.
- 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
``bash`
npm install @optimajet/workflow-forms-viewer
This package requires the following peer dependencies:
`bash`
npm install react
`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
/>
}
`
| Property | Type | Required | Description |
|----------|-------------------------------------------------------------------------------------------------------------------------------------------------|----------|-------------|
| getForms | () => Form[] \| Promise