formchen 0.1.0

Generate HTML forms and bind hierarchical and tabular data.

Generate HTML forms and bind hierarchical and tabular data with the help of JSON Schema.

Form-Chen supports master-detail relationships and undo/redo transaction management.

It uses grid-chen to produce Excel-like web-components for tabular (aka table/grid/matrix) data.

Edits on the original object are emitted as standard JSON Patch, which can be directly passed to the back end.

Optionally, object properties can be specified by JSON Pointers to be bound to given HTML-elements.

Form-Chen is written in plain EcmaScript 2017 modules and can be directly imported as such with any modern browser.

Usage

<div class="form-chen">
    <!-- JSON Path to root element -->
    <div id="/person"></div>
    <!-- JSON Path to root vip property -->
    <span style="font-size: x-large" id="/person/vip"></span>
</div>

    import {createFormChen} from "./webcomponentwebcomponent.js"

    const schema = {
        title: 'Person',
        pathPrefix: '/person',
        type: 'object',
        properties: {
            name: {
                title: 'Full Name of Person', type: 'string'
            },
            dateOfBirth: {
                title: 'Date of Birth', type: 'string', format: 'full-date'
            },
            vip: {
                type: 'boolean'
            }
        }
    };

    const data = {
        name: 'Frida Krum',
        dateOfBirth: '2019-01-01T00:00Z',
        vip: true
    };

    createFormChen(schema, data);

Demos

See https://decatur.github.io/form-chen

Read Only

At any level, the schema can be marked readOnly:true|false, the default value being false. The readOnly property is inherited by sub-schemas.

DOM Api and CSS Styling

The form is generated as a flat list of paired elements. The input elements are generated with the document ID corresponding to the JSON Pointer to its value.

Pairs	Semantic
<label/> <input>	For all scalar fields
<label/> <select>	For all scalar fields having an enum type
<label/> <checkbox>	For all scalar boolean fields
<label> <grid-chen/> </label>	For all grid fields
<label class=error/>	For errors

In case a field has a unit, then the label will have a nested <span class=unit/> element.

No direct element style is applied.

Based on this flat list of paired elements, the layout can be tweaked using CSS Column Layout, CSS Grid Layout or CSS Flex Layout, or whatever. See the demos for examples.

JavaScript Api

Please see the source code of the demos or form-chen TypeScript Definitions for the public JavaScript Api.

Development

Form-Chen is written in plain EcmaScript 2017 modules with JSDocs type hinting. There is no overhead related to transpiling or packing. As tool I recommend either vscode or one of the JetBrains IDEs (WebStorm, PyCharm).