What is the Forms Framework?

The PIPEFORCE Forms Framework is a framework which allows you to create and design data entry and data preview web forms without programming knowledge required.

The form framework works with the MVC pattern (= model, view, controller) which separates data, view and logic parts from each other.

In order to cover this pattern and to create such a form in PIPEFORCE, you need these documents in your app:

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 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 view documents are loaded by the form generator implemented in the portal. It will render and show a form to the user based on the input documents:

After the user has edited the form and clicked the submit button of the form, the form fields and their values will be rendered to a JSON document called the “form output model” (output data). This model is then stored to the output location, which is typically a as property in the property store.

The property store then fires a property.created event. A pipeline can listen to this event and handle the form submit controller logic accordingly. For this, also see how to create an event listening pipeline, here: https://logabit.atlassian.net/wiki/spaces/PA/pages/2545287223 .

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.

It belongs to the “model” part of the MVC form framework.

The whole form framework is about loading this data (A), displaying it in a form (B), validating it, copying the values from the form fields into the output data (C) and storing the final output data to the property store by default. The structure of the input data and output data is defined by the same Form Schema (D):

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).

Here is an example of such an input data JSON:

{
  "firstName": "Max",
  "lastName": "Huber",
  "age": 48,
  "cv": {
    "name": "cv-max-huber.pdf",
    "contentLength": 243,
    "contentType": "application/pdf",
    "contentEncoding": "base64",
    "content": "YWRzYXNhc2ZzZCBmc2R.....BkZmRzZmRzIHNzc2Rmcw=="  
  }
}

The input data can be loaded to the form framework in different ways:

Via the input attribute in the Form Config (see below) which is a custom uri pointing to the data to be loaded. This custom uri can point to a
- … property to be loaded from the property store. For example:
  "input": "$uri:property:global/app/myapp/data/mydata"
- … pipeline which will be executed and returns the input data. For example:
  "input": "$uri:pipeline:global/app/myapp/pipeline/mypipeline"
- … command which will be executed and returns the input data. For example:
  "input": "$uri:command:my.command"
Via HTTP request parameters whereas each request parameter name must have the same name as the form field. For example a request parameter like this ?firstName="Max" will set the value Max on a field with id firstName. Also complex (nested) elements can be set this way in JSON format whereas this value must be url encoded. In case there exists already a form input data, then a request parameter can overwrite values from this data afterwards. In case no field with this iname from request exists, nothing happens.

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).

This output data finally will be send to the target sink which is configured by the output parameter in the Form Config. This is typically a location in the property store. For example:
"output": "$uri:property:global/app/myapp/data/mymodel"

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: https://logabit.atlassian.net/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.

It belongs to the “model” part of the MVC form framework.

Here is an example of such a Form Schema JSON:

{
  "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: https://logabit.atlassian.net/wiki/spaces/DEV/pages/2482798727

The Form Config is the central configuration file of a form.

It belongs to the “view” part of the MVC form framework.

It defines things like:

How the fields of a form must be positioned in the view (= the layout).
Where to load and write the form model from / to.
Where to load the schema of the form from.
What to do, after a form has been submitted.
Title, description, type and other settings of the form.

Here is an example of such a Form Config:

{
  "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 go to: https://logabit.atlassian.net/wiki/spaces/PA/pages/2594865154

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.

A pipeline can listen to such an event and then further process the form submit.

The pipeline belongs to the “controller” part of the MVC form framework.