dashjoin / json-schema-form Goto Github PK

Generate the TS code required to embed the form

• multipleOf: number must be a multiple of x
• (exclusive)maximum / minimum
• maxLength, minLength, pattern
• maxItems , minItems, uniqueItems, contains (for arrays)
• maxProperties, minProperties (for objects)
• dependencies: https://json-schema.org/understanding-json-schema/reference/object.html#property-dependencies
• propertyNames: make sure prop names follow pattern
• format: like pattern with a built in set of keyword to pattern map

Will not support

• patternProperties, like additionalProperties: fairly complicated to implement since the schema for the subcomponent changes once the key is edited
• const: provides no value for an editor
• Combining schemas (oneOf, anyOf, not, allOf): impossible to do for a form generator

an application should be able to define a custom widget type by registering a component.
The best way to do this would be to

1. subclass JsonSchemaFormComponent
2. override getLayout
3. use dynamic component loader to instantiate the component (https://angular.io/guide/dynamic-component-loader)

there is no need to recursively load subcomponent

works in the "objects" example but not the integer example.
maybe also set the so the browser disallows illegal characters

There can be cases, where several properties are available but most of them are null / undefined. An example is editing JSON schema itself. title, description, and many other properties are available and clutter the form. Should be possible to define a layout where these can be expanded via a ... button

currently the filtering is case sensitive

@output()optionSelected: EventEmitter | Event that is emitted whenever an option from the list is selected.

currently changes onBlur

see discussion here:
#40

in this example:
https://github.com/riskine/ontology/blob/master/schemas/core/person.json

a person can have children:
"children": {
"type": "array",
"description": "children of person",
"items": {
"$ref": "person.json"
}
},

this causes an "infinite" form.

make arrays load "lazy"

consider this example:
https://dashjoin.github.io/assets/autocomplete-complex.json

the user selects "Indonesia" from the dropdown.
This string should keep showing up in the UI.
The JSON value must be https://en.wikipedia.org/wiki/Indonesia though

select "simpleGet" example and enter text field.
select "jsonPath" example and enter text field.
The dropdown options are the same but there should be only 4 options since the complex json same is shorter.

{
  "type": "array",
  "widget": "select",
  "choicesUrl": "/assets/autocomplete-simple.json",
  "choicesVerb": "GET"
  "items": {
    "type": "string"
  }
}

this should work like
https://material.angular.io/components/select/overview#multiple-selection

In order to edit json with arbitrary keys we need to support additionalProperties.

Internally, can be treated like an array of key value objects

select box takes up the entire horizontal space

currently this is a disabled input field.
would be better to use a regular text

introduce "choices" instead of reusing enum.

in the json meta schema example, it would be helpful if the type enum determined which other fields show up.

For instance:

"properties" is only applicable when type = object
"items" is only applicable when type = array

https://json-schema.org/understanding-json-schema/reference/conditionals.html

at the moment, I need to add

              "style": {
                "width": "400px"
              }

to all elements

this means that the contents is displayed and might be editable but no array element can be deleted / added (likewise keys for additionalProperties)

maybe something with person / emails etc...

https://json-schema.org/understanding-json-schema/reference/schema.html
https://dashjoin.github.io/#/schema

probably easiest to simply include

"$schema": "http://json-schema.org/draft-06/schema#"

in the sample data

https://material.angular.io/components/chips/examples

similar to layout. candidates are:

• width
• height / font size

.mat-form-field {
height: 1.5em !important;
font-size: 0.8em !important;
}

• textarea rows / cols (can get rid of largetextarea widget)

currently only supports a limited jsonpath subset

define a custom json schema attribute that causes the form to only display and not edit a value

allow for computed keys on objects:

{
computed: { y: "prefix-${x}" } ]
properties: { x : { type: string } }
}

entering 1 as the value for x would set y to prefix-1

https://stackoverflow.com/questions/55433670/mat-tab-group-width-is-not-reacting-to-width-100-container-in-flex

try this schema and add lots of array items

{
  "type": "object",
  "layout": "vertical",
  "properties": {
    "name": {
      "type": "string"
    },
    "version": {
      "type": "number"
    },
    "s": {
      "type": "array",
      "layout": "tab",
      "items": {
        "type": "object",
        "properties": {
          "name": {
            "type": "string"
          },
          "version": {
            "type": "number"
          }
        }
      }
    }
  }
}

see the discussion
#40

this is required to use the form to author JSON schemata themselves

there should be a boolean output variable that indicates whether the form is valid or not.
This would allow the caller to attach the disabled prop to the form directly:

invalid: boolean

<lib-json-schema-form (invalid)="invalid" ....
<button (click)="..." [disabled]="invalid">

Select the "array" example and press + a couple of times.
enter a value and press TAB.
The same value shows up in the next input field but not in the JSON value.

e.g.

{
"type": "string",
"widget": "password",
"minLength": 6
}

error is:

Input is shorter than 6

would be nice to say:

"password must be at least 6 charachters"

So far, $ref only supports json pointer references in the schema document (root schema passed to the component).
Consider these examples:

https://raw.githubusercontent.com/riskine/ontology/master/schemas/core/damage.json
https://raw.githubusercontent.com/riskine/ontology/master/schemas/core/definitions.json

Definitions.json contains basic defs which are referenced in damage.json using
"$ref": "definitions.json#/money"

It should be possible to provide the component with a resolver implementation that is able to load schemata based on their $id. In this specific example, a schema "https://ontology.riskine.com/X" can be read from "https://raw.githubusercontent.com/riskine/ontology/master/schemas/core/X". Note that the spec explicitly states that $id does not have to be "downloadable".

One resolver could be a HTTP download resolver. Another one could be a simple map: {id, schema}.

It should be possible to use the form simply by providing a $ref to an external schema:

<lib-json-schema-form [(value)]="value" [schema]="{'$ref': 'http://....'}" resolver="url">

In the editor, with default layout, for type array there is an a11y problem.

When hovering one input field by mouse, the delete button appears, but when using only the keyboard for navigation, it is not possible to delete an entry - the delete button is not visible and can't be reached.

https://json-schema.org/draft/2019-09/json-schema-validation.html#rfc.section.9.1

use title (if available) instead of the field name
display description as a tooltip

currently the empty "+" tab is selected.

edit field for key can be

• in the tab heading
• in the first table column