@optimajet/workflow-forms-viewer

@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

npm install @optimajet/workflow-forms-viewer

Dependencies

This package requires the following peer dependencies:

npm install react

Quick Start

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<string, unknown>) => {
  ...
  }, [apiUrl, selectedUser])

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

  return <FormsViewer getForm={getForm} getForms={getForms} onError={showError} onSuccess={showSuccess} saveForm={saveForm}
                      executeForm={executeForm}
  />

}

API Reference

FormsViewerProps

Property	Type	Required	Description
getForms	() => Form[] | Promise<Form[]>	Yes	Handler to retrieve list of available forms
getForm	(formKey: FormKey) => string | Promise<string>	Yes	Handler to retrieve form definition by key
saveForm	(processId: string, formKey: FormKey, data: Record<string, unknown>) => SaveFormResponse | Promise<SaveFormResponse>	Yes	Handler to save form data (draft)
executeForm	(processId: string, form: FormKey, commandName: string, data: Record<string, unknown>) => ExecuteFormResponse | Promise<ExecuteFormResponse>	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: [e-mail]
• Website: https://workflowengine.io/

License

MIT

Author

Optimajet

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