For Dashboard Designers Reference FormView
Friday, November 11, 2022 12:54 PMFormView
Label: :IA_Function
Property: type: FormView
Inherits from: Function and View
The FormView Function renders a form according to the given specification in JSON format.
The form can consist of various input widgets such as text boxes, textareas, file widgets, dropdowns; and some action buttons. Changes on input widgets and presses on action buttons trigger events, which the users can use for their custom logic.
Function parameters
We are making use of the JSONForms library for this function.
The schema
, uischema
, and data
parameters are being relayed directly to JSONForms,
and are well-documented in the official JSONForms docs: JSONForms examples is a
good place to start.
Key | Description | Default value | Possible values |
---|---|---|---|
actions.[action_name].index |
Index of the action button named [action_name] | Number | |
actions.[action_name].icon |
Icon of the action button named [action_name] | String | |
actions.[action_name].label |
Label of the action button named [action_name] | String | |
changeDelay |
Amount of delay time in milliseconds before form change events are fired | 500 | Positive Number |
data |
Check out the JSONForms examples | Object | |
schema |
Check out the JSONForms examples | Object | |
uischema |
Check out the JSONForms examples | Object |
Outgoing triggers
A FormView has the following events:
Each of these events generates its own event data object. The structure of these event data objects is given below.
Type: change
Occurrence: Triggered when a user changes the data of any input widget on the form.
Additional event properties (besides the inherited properties):
Key | Description | Possible values |
---|---|---|
field |
Name of the input field on which the change has occurred | String |
old |
Previous value of the subject form field | any |
new |
Updated value of the subject form field | any |
data |
Full data of the form | Object |
Type: submit
Occurrence: Triggered when a user clicks on any of the action buttons.
Additional event properties (besides the inherited properties):
Key | Description | Possible values |
---|---|---|
action |
Name of the action, as specified by the user | String |
data |
Full data of the form. | Object |
Example
Below is an example FormView setup. Check out the JSONForms examples for more.
schema:evaluate
: full
schema
:
{
"type": "object",
"properties": {
"name": {
"type": "string",
"minLength": 3
},
"photo": {
"type": "string",
"file": true
},
"description": {
"type": "string"
},
"rating": {
"type": "integer",
"maximum": 5
},
"done": {
"type": "boolean"
},
"due_date":{
"type": "string",
"format": "date"
},
"comments": {
"type": "array",
"items": {
"type": "object",
"properties": {
"message": {
"type": "string"
},
"date": {
"type": "string",
"format": "date"
},
"falan": {
"type": "string"
}
}
}
},
"recurrence": {
"type": "string",
"enum":["Never","Daily","Weekly","Monthly"]
},
"recurrence_interval":{
"type": "integer"
}
},
"required": ["name"]
}
uischema:evaluate
: full
uischema
:
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": {
"$ref": "#/properties/name"
}
},
{
"type": "Control",
"scope": {
"$ref": "#/properties/photo"
}
},
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": {
"$ref": "#/properties/due_date"
}
},
{
"type": "Control",
"scope": {
"$ref": "#/properties/done"
}
}
]
},
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": {
"$ref": "#/properties/recurrence"
}
},
{
"type": "Control",
"scope": {
"$ref": "#/properties/recurrence_interval"
},
"rule": {
"effect": "HIDE",
"condition": {
"scope": {
"$ref": "#/properties/recurrence"
},
"expectedValue": "Never"
}
}
}
]
},
{
"type": "Control",
"scope": {
"$ref": "#/properties/description"
},
"options": {
"multi":true
}
},
{
"type": "Control",
"scope": {
"$ref": "#/properties/rating"
}
},
{
"type": "Control",
"scope": {
"$ref": "#/properties/comments"
},
"options": {
"simple": false
}
}
]
}
data:evaluate
: full
data
:
{
"due_date": "2017-08-21",
"comments": [
{
"date": "2017-08-21",
"message": "This is an example message",
"falan": "asdf asdf sdf asd"
},
{
"date": "2017-08-21",
"message": "Get ready for booohay",
"falan": "asdf asdf sdf asd"
},
{
"date": "2017-08-21",
"message": "This is an example message",
"falan": "asdf asdf sdf asd"
},
{
"date": "2017-08-21",
"message": "Get ready for booohay",
"falan": "asdf asdf sdf asd"
}
]
}
actions.submit.icon
: rocket
actions.submit.index
: 0
actions.submit.label
: Submit
changeDelay
: 500