Intro

This tutorial is about

How to create a form in PIPEFORCE.

This tutorial is relevant for

Low-Code Developers who want to learn how to create and display web forms as a fundamental part of an application to accomplish several critical objectives like: Data collection, data review and data validation.

The final form will look similar to this:

Prerequisites

You need to have a developer account in a PIPEFORCE customer or trial instance.

PIPEFORCE instance should have version 9.5 or higher.

If you don’t have an account yet, just request it here: https://pipeforce.io/jetzt-testen/.

It is recommended to go through the Tutorial 01: Basic Concepts before, to get a better understanding of the PIPEFORCE basics.

Step 1: Create Form Schema

In this step you will create a Form Schema (= define the fields of a form)

Noteworthy

A Form Schema is a JSON Schema
A Form Schema defines all the fields and their data types of a form.

In order to create such a Form Schema, follow these instructions

Login to portal with a valid developer account.
Navigate to LOW CODE → Properties.
Click the plus + icon at the top.
Select App and create a new app with name: io.pipeforce.tutorial-03-forms.
Select this app and click again the plus + icon.
Now select Form Schema and create it inside this app with name: person.

The new schema was created and pre-filled with an example person schema.

Later, you can edit this form schema and remove, change or add data fields to your form.

For this tutorial, do not change anything and leave it as it is.

At this step you have created a Form Schema which defines the fields and their data types of the form.

For more information go to the public docs: Form Schema.

Step 2: Create Form Config

In this step we gonna create the Form Config and define the layout and configs parameters of a form

Noteworthy about the Form Config

It contains all form configuration settings like where the input data of the form comes from and needs to be written to (output).
It optionally defines layout customizations.
It optionally contains advanced validation rules.
It optionally contains advanced event handlers for advanced form logics.
The Form Config is a JSON file.

In order to create a simple Form Config, follow now these steps:

Go to LOW CODE -> Properties.
Select your app io.pipeforce.tutorial-03-forms in the tree.
Click the plus + icon.
Select Form Config.
Create a new Form Config with name: person
In the property tree, select your app and click on the plus icon + to create a new property inside.
Give a name to the Form Config then click Create.

A new Form Config was created for you with a pre-configured title and configuration.

Leave this Form Config as it is for now.

10. Since we did not specify any layout information here, the default layout will be used: All fields defined in the Form Schema will be displayed in vertical format.

This is how the Form Config JSON will look like:

{
  "id": "person",
  "title": "person",
  "public": false,
  "description": "",
  "schema": "$uri:property:global/app/io.pipeforce.tutorial-03-forms/schema/person",
  "output": "$uri:property:global/app/io.pipeforce.tutorial-03-forms/data/person/"
}

id = The unique id of this form. Can be any string.
title = The title to display on this form.
description = The description to display for this form.
public = Whether this form should be reachable without login.
schema = The path to the Form Schema to be used for this form. The prefix $uri:property: defines that the schema can be found in the property store.
output = The path to the location where to write the data of the submitted form as JSON. The prefix $uri:property: defines that the result will be written to the property store at this location.

For more details go to the public docs: Form Config.

At this step you have created a Form Config which defines the configuration and optionally layout customization, validation rules and script references.

Tutorial 03: Create a Form