Dynamic Fields
- PIPEFORCE
Since Version 9.0
What are Dynamic Fields?
In some situations it is required that a set of fields can be added to or removed from a form, dynamically. For this, you can use the dynamic fields feature of the Forms Framework. Here you can define a set of fields which can be added and removed by pressing a button. See this example:
In order to use this feature, follow the steps below:
Step 1: Adjust the Form Schema
Dynamic fields require the array JSON schema type for its fields. See the address field in this Form Schema and its settings:
{
"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."
},
"address": {
"type": "array",
"piStyle": {
"label": "Add Address",
"dynamicfield": true
},
"title": "Address Details",
"description": "The Address details of the person.",
"items": {
"type": "object",
"properties": {
"city": {
"type": "string",
"title": "City",
"description": "City"
},
"state": {
"type": "string",
"title": "State",
"description": "State"
}
}
},
"maxItems": 5
}
}
}As you can see, the address field in this schema is of type array. Additionally, it contains the piStyle attribute with:
label: Defines the label of the add-button.dynamicfield: Enables the dynamic field feature for this field in the form.
Inside the properties attribute, the fields to be added / removed dynamically are defined. See JSON Schema specification on more details how to configure such nested properties.
Also note the maxItems attribute. This is also a JSON Schema specific settings which is used here to limit the max number of dynamic field rows to 5.
Step 2: Adjust the layout of the dynamic fields
In the Form Config you can specify how to layout the fields inside a dynamic field row. See this example:
{
"id": "person",
"title": "Person",
"public": false,
"description": "",
"schema": "$uri:property:global/app/io.pipeforce.myapp/schema/person",
"output": "$uri:property:global/app/io.pipeforce.myapp/data/person/#{property.uuid}",
"layout": {
"orientation": "vertical",
"items": [
{
"orientation": "horizontal",
"items": [
{
"field": "firstName",
"validation": [
{
"type": "js",
"rule": "!!val",
"message": "First Name is required!"
}
]
},
{
"field": "lastName",
"validation": [
{
"type": "js",
"rule": "!!val",
"message": "Last Name is required!"
}
]
}
]
},
{
"field": "address",
"item": [
{
"field": "city",
"validation": [
{
"type": "js",
"rule": "!!val",
"message": "City is required!"
},
{
"type": "js",
"rule": "val.length >= 4",
"message": "At least 4 chars are reuqired!"
}
]
},
{
"field": "state",
"validation": [
{
"type": "js",
"rule": "!!val",
"message": "State is required!"
}
]
}
]
}
]
}
}As you can see the dynamic field address is used as any other field in the layout section. Additionally all children fields which must be shown are displayed here. Also the standard validation rules are supported on these children fields.
Step 3: Submit the data
After you have submit a form with dynamic fields, all the dynamic field values will result in a JSON array. See this example JSON generated from a form submit with dynamic fields:
{
"firstName": "Sam",
"lastName": "Harsh",
"address": [
{
"city": "New York",
"state": "USA"
},
{
"city": "Munich",
"state": "Germany"
}
]
}