FormView

Enterprise Edition

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:

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