Components JSON Schema

Every component that can be rendered within a form also adheres to a JSON schema definition used to describe how that component behaves within the form. Every component that is rendered within a form shares a common schema that is used to represent the component as it is rendered within the form. Here are the common parameters that all components share.

Common Parameters

Property	Description	Value	Required	Default
type	The type of component	address	yes	address
key	The API key for this field.	any string	yes
label	The HTML label to give this component	any string	no
placeholder	The text to show in the input before they type.	any string	no
input	Determines if this is an input from the user.	true or false	yes	true
tableView	Determines if this field will show in the data tables output.	true or false	no	true
multiple	If this field should collect multiple values, creating an array of values.	true or false	no	false
protected	If the value of this field should be shown to the end user via API once it is saved.	true or false	no	false
prefix	The prefix text to put in front of the input	Any string	no
suffix	The suffix text to put after the input	Any string	no
defaultValue	The default value to provide to this component.	Depends based on the component	no
clearOnHide	If the value of this field should be cleared when it is conditionally hidden.	true or false	no	true
unique	Validates if this field should be unique amongst other submissions in the same form.	true or false	no	false
persistent	Determines if the value of this field should be saved as persistent.	true or false	no	true
hidden	Determines if this field should be hidden from view by default. This can be overridden with the conditionals.	true or false	no	false
validate	Determines validation criteria for this component	Object with the following properties. required - If the field is required minLength - For text input, this checks the minimum length of text for valid input maxLength - For text inputs, this checks the maximum length of text for valid input pattern - For text input, this checks the text agains a Regular expression pattern. custom - A custom javascript based validation or a JSON object for using JSON Logic	no	{required: false}
conditional	Determines when this component should be added to the form for both processing and input.	Object with the following properties. show - If the field should show if the condition is true when - The field API key that it should compare its value against to determine if the condition is triggered. eq - The value that should be checked against the comparison component json - The JSON Logic to determine if this component is conditionally available.	no
errors	Allows customizable errors to be displayed for each component when an error occurs. This is an object with the following keys required min max minLength maxLength invalid_email invalid_date pattern custom	An object where the keys are provided in previous cell, and the values are the strings you wish to display. Each string has the {{ field }} to use within the string. Example. {"required": "{{ field }} is required. Try again."}	no
logic	Allows changing the component definition in reaction to data entered in a form. For example, changing a field to required, disabled or hidden when a value is entered.	An object that contains a trigger object and an array of action objects.

logic: {
  trigger: {}
  actions: []
}

Trigger

Trigger object - The trigger object contains a type and definition property. The definition property is different depending on the trigger type. When evaluated to true it will then apply the actions.

Options are:

Simple Trigger:

{
  type: 'simple',
  simple: {
    when: 'triggerFieldKey',
    eq: 'Value to equal',
    show: true // To trigger or not when the value is equal
  }
}

Javascript Trigger

{
  type: 'javascript',
  javascript: 'result = customJavascriptReturningFalsyValue;'
}

JSON Logic Trigger

{
  type: 'json',
  json: '' // JSON Logic object that returns true or false.
}

Actions

Action object - a definition of an action to be applied to a component when the trigger evaluated to true. There are various options for the action type.

Property action

The property action will change a property on the component and then redraw the component to ensure the property change is applied.

{
  type: 'property',
  property: {
    type: 'boolean|string', // If the property is a boolean, set 'boolean'. Otherwise set 'string'.
    value: 'validate.required', // The path to the property on the component definition.
  },
  state: true|false // If type is boolean, set to true or false.
  text: 'The text is {{ myfield }}' // If type is string, the string to assign. Can use interpolation with available variables of row, data, component and result (returned from trigger).
}

Value action

The value action will set the value of the component when the trigger evaluated to true.

{
  type: 'value',
  value: 'javascript that returns the new value' // Can use interpolation with available variables of row, data, component and result (returned from trigger).
}

Validation action

This action is in development. It will trigger custom validation on the field.

| no ||

Below is a list of all Form Components and the JSON schema specification for each component. The following components are allowed.

• Address
• Button
• Checkbox
• Columns
• Container
• Content
• Currency
• Custom
• DataGrid
• DateTime
• Day
• Email
• FieldSet
• File
• Form
• Hidden
• HTML Element
• Number
• Panel
• Password
• Phone Number
• Radio
• Resource
• Select
• Select Boxes
• Signature
• Survey
• Table
• TextArea
• TextField
• Time
• Well