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 2 Package

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

JSON Forms Vue 2 seed app

See our JSON Forms Vue seed repository to get started as quickly as possible.
Make sure to switch to branch vue2.

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

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) {
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 2.

#### 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: any) {
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: any) {
return useJsonFormsLayout(props);
},
});

export default layoutRenderer;

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

`html