...
Table of Contents | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
|
What is the Forms Framework?
The PIPEFORCE Forms Framework is a forms framework which allows you to declaratively create and design data entry and data preview web forms without programming knowledge required.
...
Model: Form Data
This optional JSON contains the values to initially be displayed in the form.Model: Form Schema
This is a JSON Schema and describes the fields of your form (the data structure).View: Form Config
This JSON brings together all parts and defines the layout of your form (the look & feel and position of the fields).Controller: Pipeline
Finally, you create a pipeline which that listens to the form submit. After such a submit, the pipeline gets called and can handle the form submit. It can further process the submitted data.
The model and the view documents will be are loaded by the form generator which is implemented in the portal. It will render and show a form to the user based on the input documents:
...
Let’s have a look to all of these parts step by step below.
The Form Data (Model)
The Form Data is a JSON document which provides the data to be displayed in the form.
...
Drawio | ||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
The Input Data (initial form data)
There can be an optional input data (A), which is the data to be shown initially to a form when it gets loaded. This input data is provided as a JSON document. For example, in case data must be loaded from a database in order to edit it in the form, then this data from the database will be converted to JSON and will become the input data to the form. The input data structure must comply with the Form Schema (D).
...
In case a form has no input data (which means input config is set to null or doesn't exist and no request parameter was set), then it will be an empty form which can be initially filled with data from the user.
The Output Data
After the user has clicked the submit button of the form (B), the fields of the form will be written back into a JSON document which is then the output data (C) which also must comply with the Form Schema (D).
...
The JSON format of the output is the same as the format of the input model and must comply with the Form Schema.
The Form Schema (Model)
For more details go to: /wiki/spaces/DEV/pages/2482176001
The Form Schema document describes the fields' structure of a Form Model using the JSON Schema specification. For example the type of the field, validation rules, the title and so on.
...
Code Block | ||
---|---|---|
| ||
{ "type": "object", "properties": { "firstName": { "type": "string", "description": "Add our first name here", "minLength": 2 }, "lastName": { "type": "string" }, "age": { "type": "integer" }, "cv": { "type": "object", "properties": { "name": { "type": "string" }, "contentLength": { "type": "number" }, "contentType": { "type": "string" }, "contentEncoding": { "type": "string" }, "content": { "type": "string" } } } }, "required": [ "firstName", "lastName", "age" ] } |
The Form Config (View)
For more details go to: /wiki/spaces/DEV/pages/2482798727
...
Code Block | ||
---|---|---|
| ||
{ "title": "Add person", "description": "Add a new person", "schema": "$uri:property:global/app/myapp/object/person/v1/schema", "input":"$uri:property:global/app/myapp/object/person/v1/instance/67b07f3c-e006-4bec-a790-ef25b9fe97df", "output": "global/app/myapp/object/person/v1/instance/${var.property.uuid}", "layout": { "orientation": "vertical", "items": [ { "orientation": "horizontal", "items": [ { "field": "firstName" }, { "field": "lastName" }] }, { "field": "age" }, { "field": "cv" } ] } } |
The Pipeline (Controller)
For more details , see:
go to: Form Listening Pipeline (Controller)
After the form has been submitted by the user, the output data will be stored in the property store and then a property.created
or property.updated
event will be fired by the property store.
...
The pipeline belongs to the “controller” part of the MVC form framework.
Here is an example of such a pipeline listening to the event property.created
:
Code Block | ||
---|---|---|
| ||
pipeline:
- event.listen:
eventKey: property.created
filter: ${body.target.path.contains('global/app/myapp/object/person/v1/instance')}
- mail.send:
to: name@email.tld
subject: "Apllication form was submitted"
messsage: |
The application form was submitted:
${body.target} |
The pipeline listens to all property.created
events and in case a property was created which matches the given filter, it will be executed and can then further process the form output data which are provided in the body.