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

License

MIT

Author

Optimajet

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