FormView

Labels: :IA_Function:IA_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
schema	Check out the JSONForms examples	Object
uischema	Check out the JSONForms examples	Object
data	Check out the JSONForms examples	Object
changeDelay	Amount of delay time in milliseconds before form change events are fired	500	Positive Number
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

Outgoing triggers

A FormView has the following events:

• change
• submit

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