Sponsor

Configuration

Compile options

These options can only be used at compile time, they cannot be overwritten at runtime or in the intermediate levels of the schema

ajv
The Ajv instance to use, you should probably no overwrite this option and let Vjsf handle the Ajv instance.
ajvOptions (default={ "allErrors": true, "strict": false })
Some options for the Ajv instance that will be created by default.
markdown (default=A function using the marked parser)
A function that takes a string in markdown format and returns HTML code.
markedOptions (default={})
Some options for the default marked parser
locale (default=en)
The locale of the form.
messages (default={})
The locale messages. You can overwrite only the keys you want to change.

errorOneOf: chose one

errorRequired: required information

addItem: Add item

delete: Delete

edit: Edit

confirm: Confirm

close: Close

duplicate: Duplicate

copy: Copy

paste: Paste

sort: Sort

up: Move up

down: Move down

showHelp: Show a help message

default: default:

name: name:

examples: Examples:

deprecated: Warning, this information is deprecated.

keyboardDate: MM/DD/YYYY

keyboardDateTime: MM/DD/YYYY HH:mm

xI18n (default=false)
Activate x-i18n-* annotation system.
useDescription (default=[ "help", "subtitle" ])
Define how to use the "description" metadata from the schema.

help: As a help message shown in a tooltip.

hint: As a hint message below simple form fields (not applicable to composite components).

subtitle: As a subtitle below the title of a composite component.

useDefault (default=data)
Define how to use the "default" metadata from the schema.

false: Do not use the default value.

true: As the initial value of the form data (alias "data").

placeholder: As a placeholder in the form inputs.

hint: As a hint message below the form inputs.

useTitle (default=label)
Define how to use the "title" metadata from the schema.

false: Do not use the title.

true: As a label for the form inputs (alias "label").

hint: As a hint message below the form inputs.

useName (default=false)
Use the "name" metadata from the schema (the key of the property in its parent object).

false: Do not use the name except as a label if a label cannot be constructed in another way.

hint: As a hint message below the form inputs.

placeholder: As a placeholder in the form inputs.

useExamples (default=items)
Define how to use the "examples" metadata from the schema.

false: Do not use the examples.

items: As items in a combobox component.

help: As a help message shown in a tooltip.

useDeprecated (default=false)
Use the "deprecated" metadata from the schema.

true: Show a warning message when a deprecated property is used.

false: Do not use the deprecated metadata.

Runtime options

These options can be used both at compile time and at runtime, and they can be overwritten in intermediate levels of the schema using `layout.options`.

readOnly (default=false)
Render the form in read-only mode.
summary (default=false)
Render the form in summary mode. In this mode some information may be omitted for the sake of information density and readability. Items in an editable array are rendered in this mode.
density (default=default)
Matches the density concept of Material design.

default: default

compact: compact

comfortable: comfortable

indent (default=false)
The indentation of the nested sections of the form.

true: The nested sections are indented.

false: The nested sections are not indented.

number: The nested sections are indented with the given number of spaces.

context (default={})
A contextual data object that can be referenced in expressions
titleDepth (default=2)
The depth of the section titles (an initial depth of 2 means that the first level of titles will be rendered as h2 tags)
validateOn (default=input)
Control the way form inputs are validated. It does not control the actual execution of a validation function (data is always validated as it changes), only the display of the validation errors to the users.

input: Validate a form input as soon as the user used it to input some data.

blur: Validate a form input when the user interacts with it then leaves it.

submit: Validate the form inputs only when the form is submitted.

initialValidation (default=withData)
This option complements "validateOn". It controls the validation of form inputs when the form is initialized.

never: Form inputs are never validated at initialization.

always: Form inputs are always validated at initialization

withData: Only the inputs with data at initialization are validated.

updateOn (default=input)
Control when the new data will be emitted by the form.

input: The data will be updated in realtime when the user makes any input (except for the application of debounceInputMs).

blur: The data will be updated only when the user interacts with a form input then leaves it.

debounceInputMs (default=300)
The debounce time for the input event of editable fields.
defaultOn (default=empty)
Control the use of default values in the form.

never: Never use the default data.

missing: The default data is used when the property is not defined in the data.

empty: The default data is used when the property is either undefined or empty (empty string, empty object, etc.).

removeAdditional (default=error)
Control the way additional data is managed (data that is present in the model but not defined by the schema).

true: Remove all additional properties (alias "unknown").

error: Remove additional properties that cause a validation error.

false: Never remove additional properties (alias "none").

readOnlyPropertiesMode (default=show)
Control the way readOnly properties from the schema are managed.

remove: Hide the readOnly properties and remove them from the data.

hide: Hide the readOnly properties but keep them in the data.

show: Show the readOnly properties.

autofocus (default=false)
Activate autofocus. The focus will be given to the first input of the form.
fetchOptions
Define options to be given to fetch when getting data items from a URL. Can also be a function that will accept a URL object as parameter and return those options.
listDialogOptions (default=500)
The width in pixels of list item edition dialogs.
listMenuOptions (default=500)
The width in pixels of list item edition menus.
icons (default={})
The icons used in Vjsf components. You can overwrite only the keys you want to change.

add: $plus

calendar: $calendar

close: $close

edit: $edit

sortDown: $sortDesc

sortUp: $sortAsc

copy: svg:M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z

paste: svg:M19,20H5V4H7V7H17V4H19M12,2A1,1 0 0,1 13,3A1,1 0 0,1 12,4A1,1 0 0,1 11,3A1,1 0 0,1 12,2M19,2H14.82C14.4,0.84 13.3,0 12,0C10.7,0 9.6,0.84 9.18,2H5A2,2 0 0,0 3,4V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V4A2,2 0 0,0 19,2Z

alert: svg:M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z

clock: svg:M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z

delete: svg:M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z

duplicate: svg:M11,17H4A2,2 0 0,1 2,15V3A2,2 0 0,1 4,1H16V3H4V15H11V13L15,16L11,19V17M19,21V7H8V13H6V7A2,2 0 0,1 8,5H19A2,2 0 0,1 21,7V21A2,2 0 0,1 19,23H8A2,2 0 0,1 6,21V19H8V21H19Z

infoSymbol: svg:M11 9H13V7H11V9M11 17H13V11H11V17Z

menu: svg:M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z

sort: svg:M17.45,17.55L12,23L6.55,17.55L7.96,16.14L11,19.17V4.83L7.96,7.86L6.55,6.45L12,1L17.45,6.45L16.04,7.86L13,4.83V19.17L16.04,16.14L17.45,17.55Z

confirmDeleteItem (default=true)
If active the action to delete an item in a list is protected by a small confirmation step.