What is the Form Config?
The Form Config is the central configuration file of a form. 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 how such a form config could look like:
{
"title": "Add person",
"description": "Add a new person",
"schema": "$uri:property.list?filter=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": "gender"
},
{
"field": "birthDate"
}
]
}
}
The form config must be stored in the property store inside the form subfolder of your app. For example:
global/app/myapp/form/person
All forms 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:
Configuration Attributes
The form config contains different attributes in order to specify the form. All of these attributes are described in detail below.
title
Status as of May 08th 23:
Tested and works as expected.
The title defines the title of the form to be displayed in the web ui and in other locations.
description
Status as of May 08th 23:
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
Status as of May 08th 23:
Tested and works as expected.
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:
The color value can be a hex color value like this:"color": "#FFA500"
Or it can be a constant selected from the Quasar color palette. See here:
https://quasar.dev/style/color-palette/
For example you could use the color palette value “green” like this:"color": "green"
Another example:
"color": "red-8"
schema
Status as of May 08th 23:
Testing required. Does it work as expected?
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 schema for this form.
For example, the attribute could look like this:
"schema": "$uri:property:global/app/myapp/object/person/v1/schema"
Which returns a JSON schema like this:
{
"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?
What is the default value in case this attribute is not defined?
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 the uuid of the property to form its path.
input
Status as of May 08th 23:
Testing is required. Does it work as expected?
What is the default value if not specified?
What custom $uris are supported here?
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:
"input": "$uri:property:global/app/myapp/object/person/v1/instance/fe97df"
Which returns a form model (= dataset) as JSON to be edited like this:
{
"firstName": "Alice",
"lastName": "Smith",
"age": 20,
"gender": "female",
"birthDate": "2003/05/01"
}
forwardOnSuccess
Status as of May 08th 23:
PI-4414 - Getting issue details... STATUS
The forward 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.
layout
TODO
type
TODO
Internationalization (i18n)
TODO
Special Form Types
Document Understand Form
TODO
Variable substitution
Request parameters
Status as of May 08th 2023:
Not implemented yet
Documentation needs to be finalized here once implementation has been finished
It is possible to use request parameters in the form config attributes as placeholders like this:
"input": "$uri:command:workflow.history.tasks?taskId=${request.param.myTaskId}"
In order to set the taskId dynamically, one could call the form like this:
form?myTaskId=someTaskId
After the placeholder has been replaced, the input parameter will look like this:
$uri:command:workflow.history.tasks?taskId=someTaskId
These attributes in the form config support request parameter variable substitution:
inputoutputschema
Property attributes (PEL)
Status as of May 08th 2023:
It needs to be specified better how this works
It needs to be added whether encoding is required any longer
Think about to use # for server side placeholders (PEL) and $ for client side (for example ${request.param.abc} )
It is also possible to specify a PEL inside some of the config attributes. This way the PEL will be executed at server side and the result will be used to form the final config value. For example:
"output": "global/app/myapp/object/person/v1/instance/#{var.property.uuid}"
In this example the PEL #{var.property.uuid} will be resolved to the UUID of the property which is about to be created when sending this output.
Form Scripting
TODO: Add final description here. See here and add parts of it to this documentation which are finalized: https://logabit.atlassian.net/wiki/spaces/DEV/pages/846233616/PRD11+-+Forms#P1:-Form-script
Internal Script
Use script as a config in form configuration.
{
"id": "person",
"title": "person",
"public": false,
"description": "",
"schema": "$uri:property:global/app/neel/object/person/v1/schema",
"output": "$uri:property:global/app/neel/object/person/v1/instance/#{property.uuid}",
"script":{
"onload":"alert('PipeForce-neel')",
"onblur":"if (src === 'firstName') { alert(data[src]); console.log('name =>',data[src]) }"
},
"layout":{
"items":[
{
"field":"firstName"
},
{
"field":"lastName"
}
]
}
}
External Script
Step-1: You have to define path inside script as below given example.
You will get the information about form-data, form-schema, form-layout and source from where the event is triggered below are the param names
data, schema, layout, src
data - you will get form model in JSON format
schema - you will get the form schema document in JSON format
layout - you will get then layout config in JSON format
src - it will give the form field name - for better understanding find attached video
value - it will give the current value of the element - use for onchange event only
Find the attached video for how to use script in form
{
"id": "person",
"title": "person",
"public": false,
"description": "",
"schema": "$uri:property:global/app/pi-4685/object/person/v1/schema",
"output": "$uri:property:global/app/pi-4685/object/person/v1/instance/#{property.uuid}",
"script":{
"path":"$uri:property:global/app/pi-4685/form/script"
},
"layout":{
"items":[
{
"orientation":"horizontal",
"items":[
{ "field":"firstName" },
{ "field":"lastName" },
{
"field":"gender",
"class":"col col-md-5"
}
]
}
]
}
}
Step-2: You have to define script as below example. It will support only these events and add only those events required. For this follow example 2.
(function () {
function onload(data, schema, layout, src) {
alert('PipeForce PI-4685')
}
function onunload(data, schema, layout, src) {
alert('PipeForce PI-4685 unload')
}
function onkey(data, schema, layout, src) {
console.log('key down')
}
function onkeyup(data, schema, layout, src) {
console.log(data[src])
}
function onkeypress(data, schema, layout, src) {
console.log('key press')
}
function onchange(data, schema, layout, src,value) {
if(src == 'gender') console.log('value selecting')
}
function onsubmit(data, schema, layout, src) {
console.log('Click event')
}
function onfocus(data, schema, layout, src) {
alert('on focus')
}
// Mouse events
function onmouseoup(data, schema, layout, src) {
console.log('mouse up')
}
function onmousemove(data, schema, layout, src) {
console.log('mouse move')
}
function onmouseover(data, schema, layout, src) {
alert('mouse over')
}
function onmouseout(data, schema, layout, src) {
console.log('mouse out')
}
function onscroll(data, schema, layout, src) {
console.log('scrolling')
}
function onresize(data, schema, layout, src) {
console.log('resized')
}
return {
onload,onunload,onchange,onfocus,onkey,onkeyup,onkeypress,onscroll, onresize,
onsubmit, onmouseup, onmousemove, onmouseover, onmouseout
};
})()
Example 2
(function () {
function onload(data, schema, layout, src) {
// Add your code here.
}
function onchange(data, schema, layout, src,value) {
// Add your code here.
}
return { onload, onchange }
})()
Example 3: How to call the Pipeline using scriptiam.group.members?name=ALs – its example
(function () {
function onchange(data, schema, layout, src,value) {
pi.pipeline('iam.group.members?name=ALs').then((res)=>{
debugger
})
}
return { onchange }
})()
https://quasar.dev/vue-components/select#qselect-api
https://quasar.dev/vue-components/input#qinput-api
Add Comment