...
How the fields of a form must be positioned in the view (= the view / 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.
...
The form config must be stored in the property store inside the form subfolder of your app. For example:
| Code Block |
|---|
global/app/tld.domain.myapp/form/person |
All forms form configs inside the form folder will be automatically picked-up and shown in the forms overview of an app. For example, here you can see the form Add person automatically listed:
...
The form config contains different attributes in order to specify the form. All of these attributes are described in detail below.
title
| Info |
|---|
Status as of May 08th 23:
|
The title defines the title of the form to be displayed in the web ui and in other locations.
description
...
Tested and works as expected.
The description is optional and describes the intention of the form.
icon
...
...
Status as of May 08th 23:
Tested and works as expected.
Each form can have an individual icon. This value must be a code name from the Google Material Icons as listed here: https://fonts.google.com/icons
This value is optional. If not given, the icon with code name ballot is shown as default:
...
color
| Info |
|---|
Status as of May 08th 23:
|
The color of The color of the form icon. If not given, the secondary color is used, which depends on the style settings. By default this is a blue color like this:
...
Another example:
"color": "red-8"
...
schema
...
Status as of May 08th 23:
...
...
What is the default value in case this attribute is not given?
...
Which custom $uris are supported?
The schema defines a custom uri which is called in order to retrieve the JSON Form schema for this form (see Form Schema & Widgets ).
For example, the attribute could look like this:
| Code Block |
|---|
"schema": "$uri:property:global/app/tld.domain.myapp/object/person/v1/schema" |
...
| Code Block | ||
|---|---|---|
| ||
{
"type": "object",
"properties": {
"firstName": {
"type": "string",
"title": "First Name",
"description": "The first name of the person."
},
"lastName": {
"type": "string",
"title": "Last Name",
"description": "The last name of the person."
},
"age": {
"type": "number",
"title": "Age",
"description": "The age of the person."
},
"gender": {
"type": "string",
"title": "Gender",
"description": "The gender of the person.",
"enum": [
"male",
"female",
"neutral"
]
},
"birthDate": {
"type": "string",
"format": "date",
"title": "Date of birth",
"description": "The date of birth of the person."
}
}
} |
output
...
Status as of May 08th 23:
...
Is uri encoding still required?
...
The output defines the path in the property store where to store the data. The part %23%7Bvar.property.uuid%7D is the url encoded version of #{var.property.uuid}, which is a PE to return form data must be stored as JSON property after the form has been submitted. Example:
| Code Block |
|---|
input": "global/app/tld.domain.myapp/object/person/v1/instance/${vars.property.uuid}" |
The PE variable will be interpreted at server side and will be replaced by the uuid of the property to form its path.
input
| Note |
|---|
Status as of May 08th 23:
|
The input attribute defines a custom uri which is called to retrieve the input data for the form in order to set predefined values on the form fields. For example, the input parameter could look like this in order to load a JSON property from the property store:
| Code Block |
|---|
"input": "$uri:property:global/app/myapp/object/person/v1/instance/fe97df" |
Which returns a form model (= dataset) as JSON to be edited like this:.
The form handling pipeline can listen to a property.created event on this path then in order to get informed when a new property was created on this path:
| Code Block |
|---|
pipeline:
- event.listen:
eventKey: property.created
filter: ${body.target.path.contains('/tld.domain.myapp/object/person/v1/instance/')} |
The same way it works with property.updated event.
Also see:
input
The input attribute defines a PIPEFORCE URI which is called to retrieve the initial input data for the form in order to set predefined values on the form widgets. For example, the input parameter could look like this in order to load a JSON property from the property store:
| Code Block |
|---|
"input": "$uri:property:global/app/tld.domain.myapp/object/person/v1/instance/fe97df" |
Which could return a form data (= model) as JSON to be edited similar to this:
| Code Block | ||
|---|---|---|
| ||
{
"firstName": "Alice",
"lastName": "Smith",
"age": 20,
"gender": "female",
"birthDate": "2003/05/01"
} |
forwardOnSuccess
| Status | ||||
|---|---|---|---|---|
|
onSuccess instead.This attribute defines an URL, or a path relative to the portal in order to forward to after the form has been submitted successfully. In case the submit caused an error, the form will stay at current location in order to display the error. In case this attribute is not given, the form will show the default submit success message.
onSuccess
| Status | ||||
|---|---|---|---|---|
|
This defines what should happen in case the form was successfully submitted. This is optional. If not defined, the default success message and icon will be shown:
forward
Forwards to a URL or a path relative to the portal. In case the submit caused an error, the form will stay at current location in order to display the error:
| Code Block | ||
|---|---|---|
| ||
{
"onSuccess": {
"action": "forward",
"url": "http://target/url"
}
} |
action- must be set toforward.url- The URL or the path relative to the portal where to forward after success.
message
Shows a text message and an icon in case the form was successfully submitted.
| Code Block | ||
|---|---|---|
| ||
{
"firstNameonSuccess": "Alice", {
"lastNameaction": "Smithmessage",
"agetext": 20"$uri:i18n:successMessage",
"gendericon": "femaledone",
"birthDatecolor": "2003/05/01"
} |
forwardOnSuccess
| Note | ||||||||
|---|---|---|---|---|---|---|---|---|
Status as of May 08th 23:
|
...
green"
}
} |
action- Must be set tomessage.text- Can contain a static text or an i18n key. If not given, the default text will be shown.icon- Must be a code name from the Google Material Icons as listed here: https://fonts.google.com/icons . If not given, the default icon will be shown.color- Defines the color of the icon. If not given, the default icon color will be shown.
layout
TODO
type
TODO
Internationalization (i18n)
...