@openremote/or-json-forms

@openremote/or-json-forms <or-json-forms>

Web Component for generating forms based on JSON Schema. This can be useful for creating forms for complex data structures and validating user input.

This component expects the JSON Schemas to be formatted as described in Usage.

Install

npm i @openremote/or-json-forms
yarn add @openremote/or-json-forms

Usage

The JSON Forms expects Draft-07 schemas.

Unsupported keywords

The following keywords are not (fully) supported:

• anyOf: ???
• allOf: ???
• $ref: will only resolve the reference if it is in the schema.
• examples: planned

Behavior Specification

• { "type": "string" } - Displays a text input field.
• { "type": "number" } - Displays a number input field.
• { "type": "integer" } - Displays a number input field.
• { "type": "array" } - Displays a wrapper with a button to add items.
• { "type": "object" } - Displays a wrapper with a button to add properties.

Renderers & Testers

Default values

The JSON Forms will resolve default values from the schema based on the default property or infer it from the type.

It derives the type from the schema's type property, or from properties that are characteristic of the type.

property	type
type	The specified type
properties	object
additionalProperties	object
items	array

Depending on the type, it derives the default value as follows:

type	value	formats	Formatted default
[...] (array of values)	[...]
string	""	date-time, date, time	new Date()
integer, number	0
boolean	false
array	[]
object	An object with the required properties, otherwise an empty object
null	null

Example usage

import { html } from 'lit';
import { ErrorObject, StandardRenderers } from "@openremote/or-json-forms";
import "@openremote/or-json-forms";

public class MyJsonForms extends LitElement {
    private static schema = {
        $schema: "http://json-schema.org/draft-07/schema#",
        title: "MyObject",
        type: "object",
        properties: {
            firstname: { type: "string" },
            lastname: { type: "string" },
            birthday: { type: "integer", minimum: 0 },
        },
    };
    // Apply a custom UI schema to remove the outer VerticalLayout
    private static uiSchema: any = { type: "Control", scope: "#" };

    render() {
        return html`<or-json-forms .renderers="${jsonFormsAttributeRenderers}" .schema="${schema}" .uischema="${uiSchema}" .onChange="${onChanged}"></or-json-forms>`
    }

    onChanged(dataAndErrors: { errors: ErrorObject[] | undefined, data: any }) {
        // Do something with the data and errors
    }
};

Custom renderers

Styling

All styling is done through CSS, the following CSS variables can be used:

--or-app-color3 /* Change text colors */
--or-app-color4 /* Change border colors */
--or-app-color5 /* Change border colors */
--or-icon-fill

Supported Browsers

The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge.

License

GNU AGPL