Skip to content
This repository has been archived by the owner on Dec 10, 2022. It is now read-only.

jbockle/au-jsonschema-form

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Nov 11, 2021
8b6a576 · Nov 11, 2021
Oct 19, 2021
Nov 11, 2021
Nov 11, 2021
Jul 20, 2020
Sep 15, 2020
Jul 22, 2020
Sep 13, 2020
Nov 11, 2021
Jul 20, 2020
Sep 15, 2020
Nov 11, 2021
Jan 12, 2021
Jan 12, 2021

Repository files navigation

NPM Status Bundlephobia

Aurelia JSON Schema Forms

Documentation and Examples

This project is still very much in alpha! use at your own risk!

Create forms based on json-schema specification! Heavily influenced by the react-jsonschema-form library, but with many things abstracted into custom views for layouting/theming.

Using ajv for model validation, @aujsf supports draft-04,draft-06, and draft-07.

Theming is a first class citizen!

Installation

  1. Install core dependencies: npm install @aujsf/core ajv jsonpointerx

  2. Install a theme (or create your own): npm install @aujsf/bootstrap-theme

  3. Register the plugin:

    // main.ts
    import { Aurelia, PLATFORM } from 'aurelia-framework';
    
    import { IPluginOptions } from '@aujsf/core';
    import { THEME } from '@aujsf/bootstrap-theme';
    
    export function configure(aurelia: Aurelia): void {
      aurelia.use
        .standardConfiguration()
        .plugin(PLATFORM.moduleName('@aujsf/core'), (options: IPluginOptions) => options.defaultTheme = THEME);
    
      aurelia.use.developmentLogging('debug');
    
      aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
    }

Use

<json-schema-form schema.bind="jsonSchema" 
                  ui-schema.bind="uiSchema"
                  value.bind="model"
                  submit.call="submit(value, validationResult)"></json-schema-form>
import { UISchema, FormOptions, JsonSchema, ValidationResult } from '@aujsf/core';
export class MyComponent {
  jsonSchema: JsonSchema = {
    type: 'object',
    properties: {
      firstName: {
        type: 'string'
      },
      lastName: {
        type: 'string'
      }
    },
    required: ['firstName', 'lastName']
  };

  uiSchema: UISchema = {
    'ui:title': 'User',
    lastName: {
      'ui:title': 'Sur Name'
    }
  };

  model: any = {};

  submit(value: any, validationResult: ValidationResult): void {
    if (validationResult.valid) {
      alert('valid:submitted!' + JSON.stringify(value, null, 2));
    } else {
      alert('invalid :(' + JSON.stringify(validationResult, null, 2));
    }
  }
}