92 lines
3.4 KiB
Markdown
92 lines
3.4 KiB
Markdown
# Using Forms
|
|
|
|
This feature allows you to create custom forms for collecting and
|
|
managing data within your workflows. Whether you need a simple
|
|
feedback form or a complex multi-step form, SpiffArena provides you
|
|
with the tools to build and integrate forms seamlessly.
|
|
|
|
With SpiffArena's form builder, you can start with basic form elements
|
|
and gradually add more advanced components as your form requirements
|
|
evolve.
|
|
Let's dive in and explore the possibilities of creating forms in
|
|
SpiffArena.
|
|
|
|
## Instructions on Creating Forms
|
|
|
|
Forms play a crucial role in capturing data, and SpiffArena offers a
|
|
powerful form-building capability. Here are the ways to create forms:
|
|
|
|
1. Leveraging JSON Schema
|
|
|
|
JSON Schema is an emerging standard for describing the structure of
|
|
data in a JSON file. JSON Schema forms the foundation for building
|
|
forms in SpiffArena.
|
|
|
|
To simplify the form creation process, we leverage the React JSON
|
|
Schema Form (RJSF) library. RJSF is a powerful tool that uses JSON
|
|
Schema as its basis. It enables you to create dynamic and interactive
|
|
forms with ease. The RJSF library is open source, free to use, and
|
|
follows the principles of open standards.
|
|
|
|
|
|
|
|
Please note that while this guide provides a basic understanding of
|
|
JSON Schema and RJSF, there is much more to explore. We encourage you
|
|
to refer to the official [RJSF documentation](https://rjsf-team.github.
|
|
io/react-jsonschema-form/docs/) for comprehensive details
|
|
and advanced techniques.
|
|
|
|
2. Using Form Builder
|
|
|
|
An alternative approach to creating JSON code is to utilize the form
|
|
builder feature, which allows you to easily create various fields
|
|
without the need for writing JSON manually.
|
|
|
|
However, it's important to
|
|
note that the form builder may have certain limitations in terms of
|
|
features and may not be as powerful as using the JSON editor directly.
|
|
|
|
While the form builder provides convenience and simplicity, using the
|
|
JSON editor offers greater flexibility and control over the form
|
|
structure.
|
|
|
|
|
|
|
|
|
|
## Basic Example for Using Forms
|
|
Now that you have a grasp of how to create forms in SpiffArena using
|
|
JSON Schema and RJSF, it's time to put your knowledge into action.
|
|
Lets cover the example of using forms process model in the basics.
|
|
|
|
The BPMN diagram initiates with a start event, which is followed by a
|
|
manual task aimed at providing a comprehensive understanding of web
|
|
forms and the various approaches to displaying them.
|
|
|
|
|
|
The expected output of the form during the process execution can be
|
|
observed in the attached image.
|
|
|
|
|
|
|
|
Moving forward, the diagram incorporates a user task specifically
|
|
designed for form display. Within the properties panel of the user
|
|
task, two essential files are included: a JSON Schema (containing the
|
|
form description in RSJF format) and a UI Schema (outlining the rules
|
|
for displaying the form based on the RSJF schema).
|
|
|
|
|
|
|
|
The anticipated output of the form when the process is executed can be
|
|
visualized in the attached image.
|
|
|
|
|
|
|
|
Following that, a manual task is included, offering a simple form
|
|
explanation. As users submit the form, the manual task will display
|
|
the respective explanation.
|
|
|
|
|
|
An attached image provides an overview of the expected form output
|
|
during the process execution.
|
|
|
|
 |