ember-json-schema-views

This addon extends aptible/ember-json-schema-document with basic JSON Schema-driven form components.

The following JSON Schema property types are supported:

boolean using schema-field-radio or schema-field-toggle
enum using schema-field-select
text using schema-field-text

Schema properties can be recursed using the each-property component.

Example: Generating a Schema-driven form by recursing Schema properties

The following template will iterate a schema's properties and build UI components that are bound to corresponding document values;

var schema = new Schema(jsonBlob);
var document = schema.buildDocument();
var properties = schema.properties();

{{#each-property properties=properties as |key property type|}}
  <label>{{property.displayProperties.title}}</label>
  {{component (concat 'schema-field-' type) key=key property=property document=location}}
{{/each-property}}

Installation

git clone this repository
npm install
bower install

Running

ember server
Visit your app at http://localhost:4200.

Running Tests

ember test
ember test --server

Building

ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

Refactor dependent properties

Our use case for dependent properties is quite a bit outside the JSON schema draft4 spec. Specifically, the spec will require any dependency whose dependent property exists in the document, regardless of its value. There are ways around this by combining schemas and using anyOf or oneOf. While this approach would work great for the validation of documents, it isn't great for generating UI.

My suggested fix is to extend the dependencies schema to allow specific dependent values. As an example:

Current implementation

"shippingAddress": {
  "type": "object",
  "dependencies": {
    "useAlternateShippingAddress": ["streetAddress", "city", "state"]
  },
  "required": ["useAlternateShippingAddress"],
  "properties": {
    "useAlternateShippingAddress": {
      "type": "boolean"
    },
    "streetAddress": {
      "id": "http://jsonschema.net/address/streetAddress",
      "type": "string"
    },
    "city": {
      "id": "http://jsonschema.net/address/city",
      "type": "string"
    },
    "state": {
      "id": "http://jsonschema.net/address/city",
      "type": "string",
      "enum": ["NY", "IN"]
    }
  }
}

Proposed implementation:

"shippingAddress": {
  "type": "object",
  "dependencies": {
    "streetAddress": [{ "useAlternateShippingAddress": [true] }],
    "city": [{ "useAlternateShippingAddress": [true] }],
    "state": [{ "useAlternateShippingAddress": [true] }]
  },
  "required": ["useAlternateShippingAddress"],
  "properties": {
    "useAlternateShippingAddress": {
      "type": "boolean"
    },
    "streetAddress": {
      "id": "http://jsonschema.net/address/streetAddress",
      "type": "string"
    },
    "city": {
      "id": "http://jsonschema.net/address/city",
      "type": "string"
    },
    "state": {
      "id": "http://jsonschema.net/address/city",
      "type": "string",
      "enum": ["NY", "IN"]
    }
  }
}

As described, an array of possible values is applied for each dependency. Eventually, it would be great to be able to apply a schema instead of just an array of valid values.

aptible / ember-json-schema-views Goto Github PK