Forms and Workflow

Forms Plugin Overview

Forms Plugin is a solution that provides a ready-to-use API and UI connecting Workflow Engine with Form Engine. It lets you render and submit workflow-bound forms, validate and persist data, and execute available process commands.

Form Engine

Form Engine is a client-side library for creating web forms. It maps JSON to a dynamic HTML form and sends the results to your server. Learn more at formengine.io.

In this section, we’ll outline at a high level what the Forms Plugin is. Additionally, in the following sections we’ll cover how to connect it, what API capabilities it provides, and walk through a detailed example of integrating forms into a React application.

This figure shows a typical application structure with its frontend and backend parts. Sections highlighted in green are delivered as part of the Workflow Engine Forms Plugin package; the remaining parts must be implemented on your side.

1. End-user application. Your application into which you embed forms associated with workflow processes and available to end users.
2. Forms Viewer component. We provide this component to render forms to the end user. Put simply, it displays the form, the set of workflow commands associated with it, and a Save button to store the form without advancing it through the workflow. This React component, built on Optimajet Form Engine, is included in the Forms Plugin.
3. Form Controller. The Forms Viewer component communicates with the server through a dedicated controller. We designed the Forms Plugin so you can change the communication format. Don’t worry—the controller is simple, and you can copy it from the example that will be covered later.
4. Forms Plugin. The Forms Plugin handles all form-related requests. It processes both requests for executing forms and requests for saving form designs.
5. Workflow Runtime.
6. Workflow Database. All tables required for forms are included in the distribution.
7. Admin application. Your application where administrators or power users can create and edit forms in a visual editor.
8. Forms Manager component. The visual form editor. This React component, built on Optimajet Form Engine, is included in the Forms Plugin.
9. Designer Controller. The Forms Manager component saves form designs through this controller. If you’ve already connected Workflow Designer, nothing else is required—everything you need is already implemented.

Now, to make this concrete, here’s what it looks like.

Forms Manager component.

Key elements:

1. A list of all forms and their versions.
2. A form you can edit visually.
3. Settings for the selected component.

The Visual Form Builder used here has many features; see the documentation for a complete list.

Forms Viewer component.

Key elements:

1. The form itself, displayed to the user.
2. Multiple forms may be available to the user; if more than one form exists, they can choose which form to open.
3. Command buttons. At the moment, only one command Submit is available, so only one button is shown.
4. A Save button to store the form without advancing it through the workflow.

Core features of the Forms Plugin

• Provides a visual form editor embeddable in your application with the full capabilities of Optimajet Form Engine.
• Renders forms to the end user.
• Supports both client-side and server-side validation, which can be combined seamlessly.
• Stores form data in process parameters, meaning you don’t need to create additional tables in your database if you don’t want to.
• Is fully compatible with the Workflow Engine external parameters feature, so you can store form data in your existing tables—we’ll show how in the example.
• Controls access to forms via process commands, letting you manage form access in one place.
• Can be used with your own forms engine if you prefer.

📄️ How to connect

How to connect forms to Workflow Engine

📄️ Forms Plugin features

Forms Plugin features description

📄️ Sample project

Sample project for working with Forms Plugin