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. |
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 |
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 |
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.