Demo

JSON

Top level

Key Values Description
fields
Mandatory
Array of Fields
String
The array of objects containing the fields configuration
submit_button_text
Default: Submit
Button text
String
The text to display on the submit button.
cancel_button_text
Default: Cancel
Button text
String
The text to display on the cancel button.
hide_validation
Default: true
true/false
Boolean
Whether or not to show the valid state on inputs.
button_orientation
Default: right
left/right
Options
The orientation to display the button controls.
form_controls_id
Automatically generated
An Element ID
String
JsonForm automatically handles specifying and creating the IDs needed for Form generation.
If you want to override the placement of the Form Controls, use this key.

Fields key

The entire Fields key is an array of objects. The various configuration keys of the object is outlined below. The fields will be inserted in the order they are in the array.

Key Values Description
id
Mandatory
field_id
String
The ID for this field which will be used on the generated response payload
name
Mandatory
Field Name
String
Display name of the field that will be shown to the user
type
Mandatory
field, html, value
String
The type of field. field: An input field, specify parameters in field key. html: Injects HTML, value: stores a value to return in response
field
Mandatory for type=field
Field keys
Object
The configuration object for the Field type
html
Mandatory for type=html
HTML
String
The HTML to inject
value
Mandatory for type=value
Anything
Anything
The value to store only to return in the response

Field keys

The configuration keys to use when building a field object within the top level object fields.

Key Values Default Description
type Input type
String
text The type of input to use for this field
required true/false
Boolean
true Whether or not this field is required
readonly true/false
Boolean
false Whether or not this field is read only
options
Mandatory for type=select or type=radio
Array of options
Array
[] All the options to display for an select/radio input
placeholder Anything
String
None The value to show in the placeholder
default_value Anything
String
None The value to prefill the field with
use_validate_callback true/false
Boolean
false Whether or not to use specified validate_callback to validate the value on input
inline true/false
Boolean
false Whether to display the radio fields as inline versus vertical.
width Grid column width
1-12
12 The width of the input.
rows Number
Number
3 The number of rows to display in the textarea
helptext Anything
Anything
None Help text to display along with the input
size large/normal/small
Options
normal The size of the input (only applies to certain types: textarea and normal inputs)
maximum_entries Only for Lists
Number
100 The maximum number of entries allowed in a list

Methods

JsonForm.create(FormID, FormJSON, FormName)

FormID: the selector to place the form within.

FormJSON: the JSON payload (based on the above keys) to use when creating the form.

FormName Optional: the form instance name. By default is "default" – only use when you have multiple forms on the same page.

JsonForm.registerSubmit(SubmitHandler, FormName)

SubmitHandler: the submit handler to fire. It must be a function that accepts 2 arguments: formValid, formData. Check formValid (boolean) for the status of the form. If one or more fields fail validation, it will be false, otherwise it is true. formData is an object containing the field IDs and the values submitted.

FormName Optional: the form instance name. By default is "default" – only use when you have multiple forms on the same page.