Create functional UI forms using json schema
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!
npm install @aujsf/core ajv jsonpointerx
npm install @aujsf/bootstrap-theme
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')));
}
<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));
}
}
}