Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Table of Contents
minLevel1
maxLevel3
outlinefalse
typelist
printablefalse

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
mVer2
zoom1
simple0
inComment0
custContentId2546040833
pageId2545451358
lbox1
diagramDisplayNameUnbenanntes Diagramm-1690358780619.drawio
contentVer2
revision2
baseUrlhttps://logabit.atlassian.net/wiki
diagramNameUnbenanntes Diagramm-1690358780619.drawio
pCenter0
width661
links
tbstyle
height485

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
languagejson
{
  "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
languagejson
{
  "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
languageyaml
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.