JSON Forms - More Forms. Less Code

_Complex forms in the blink of an eye_

JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.

Vue Package

This is the JSON Forms Vue package which provides the necessary bindings for Vue. It uses JSON Forms Core.

JSON Forms Vue seed app

See our JSON Forms Vue seed repository to get started as quickly as possible.

Usage

Use the json-forms component for each form you want to render.

Mandatory props:

- data: any - the data to show
- renderers: JsonFormsRendererRegistryEntry[] - the Vue renderer set to use

Optional props:

- schema: JsonSchema - the data schema for the given data. Will be generated when not given.
- uischema: UISchemaElement - the ui schema for the given data schema. Will be generated when not given.
- cells: JsonFormsCellRendererRegistryEntry[] - the Vue cell renderer set to use
- config: any - form-wide options. May contain default ui schema options.
- readonly: boolean - whether all controls shall be readonly.
- uischemas: JsonFormsUiSchemaEntry[] - registry for dynamic ui schema dispatching
- validationMode: 'ValidateAndShow' | 'ValidateAndHide' | 'NoValidation' - the validation mode for the form
- ajv: AJV - custom Ajv instance for the form
- middleware: Middleware - can be used to hook into the form-wide data management.
- i18n: JsonFormsI18nState - can be used to internationalize the rendered form.

Events:

- change: {data: any; errors: AJVError[]} - Whenever data and/or errors change this event is emitted.

Example:

``html
:data="data"
:renderers="renderers"
:schema="schema"
:uischema="uischema"
@change="onChange"
/>
`

`ts
export default defineComponent({
components: {
JsonForms,
},
data() {
return {
// freeze renderers for performance gains
renderers: Object.freeze(renderers),
data: {
number: 5,
},
schema: {
properties: {
number: {
type: 'number',
},
},
},
uischema: {
type: 'VerticalLayout',
elements: [
{
type: 'Control',
scope: '#/properties/number',
},
],
},
};
},
methods: {
onChange(event: JsonFormsChangeEvent) {
this.data = event.data;
},
},
});
`

$3

The @jsonforms/vue package offers JSON Forms Core bindings based on the composition API.
These bindings handle the props given to the dispatch-renderer and use the JSON Forms Core to determine specialized inputs for many use cases like validation and rule-based visibility.
Using these bindings as a basis, it's straightforward to create renderer sets for Vue 3.

#### Basic control renderer example

`ts
import { ControlElement } from '@jsonforms/core';
import { defineComponent } from 'vue';
import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';

const controlRenderer = defineComponent({
name: 'control-renderer',
props: {
...rendererProps(),
},
setup(props) {
return useJsonFormsControl(props);
},
methods: {
onChange(event: Event) {
this.handleChange(
this.control.path,
(event.target as HTMLInputElement).value
);
},
},
});
export default controlRenderer;
`

- You can use the provided rendererProps factory which declares all props required for each renderer.
When using Typescript you can specify a UISchemaElement type to declare that you only expect UI schema elements of that type.
- In setup call the appropriate binding for your renderer.
Here we use useJsonFormsControl which will work on any Control element and provides a control property containing calculated attributes like data, description, errors, enabled and many more.
It also provides a handleChange(path,value) method with which the managed data can be updated.

`html


This is a very simplified template for such a control.
You can see how some of the control properties are bound against the input, including the handleChange method via onChange.

`ts
import {
isControl,
JsonFormsRendererRegistryEntry,
rankWith,
} from '@jsonforms/core';
export const entry: JsonFormsRendererRegistryEntry = {
renderer: controlRenderer,
tester: rankWith(1, isControl),
};
`

It's convenient to create the JsonFormsRendererRegistryEntry within the same file as the renderer.
Here it's ranked with priority 1 (higher is better) for any UI schema element which satisfies isControl.

These entries can then be collected and form the Vue renderer set handed over to the json-forms component.

#### Basic layout renderer example

The principle is the same as with the control example.
The only difference here is the use of the provided dispatch-renderer which will determine the next renderer to use, based on its inputs.

`ts
import {
isLayout,
JsonFormsRendererRegistryEntry,
Layout,
rankWith,
} from '@jsonforms/core';
import { defineComponent } from 'vue';
import {
DispatchRenderer,
rendererProps,
useJsonFormsLayout,
} from '@jsonforms/vue';

const layoutRenderer = defineComponent({
name: 'layout-renderer',
components: {
DispatchRenderer,
},
props: {
...rendererProps(),
},
setup(props) {
return useJsonFormsLayout(props);
},
});

export default layoutRenderer;

export const entry: JsonFormsRendererRegistryEntry = {
renderer: layoutRenderer,
tester: rankWith(1, isLayout),
};
`

`html