dashjoin / json-schema-form Goto Github PK
View Code? Open in Web Editor NEWAngular JSON Schema Form Library
Home Page: https://dashjoin.github.io/
License: Apache License 2.0
Angular JSON Schema Form Library
Home Page: https://dashjoin.github.io/
License: Apache License 2.0
currently only supports a limited jsonpath subset
{
"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 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
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 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.
define a custom json schema attribute that causes the form to only display and not edit a value
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.
currently this is a disabled input field.
would be better to use a regular text
In order to edit json with arbitrary keys we need to support additionalProperties.
Internally, can be treated like an array of key value objects
"width": {
"type": "number",
"case": ["rect", "square"]
},
this is required to use the form to author JSON schemata themselves
maybe something with person / emails etc...
currently the filtering is case sensitive
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
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
edit field for key can be
similar to layout. candidates are:
.mat-form-field {
height: 1.5em !important;
font-size: 0.8em !important;
}
see discussion here:
#40
an application should be able to define a custom widget type by registering a component.
The best way to do this would be to
there is no need to recursively load subcomponent
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"
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
works in the "objects" example but not the integer example.
maybe also set the so the browser disallows illegal characters
{
"type": "object",
"required": [
"name"
],
"properties": {
"name": {
"type": "string"
},
"version": {
"type": "number"
}
}
}
rather than
{
"type": "object",
"properties": {
"name": {
"type": "string", "required"=true
},
"version": {
"type": "number"
}
}
}
currently changes onBlur
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">
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"
}
}
}
}
}
}
introduce "choices" instead of reusing enum.
select box takes up the entire horizontal space
this means that the contents is displayed and might be editable but no array element can be deleted / added (likewise keys for additionalProperties)
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"
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">
currently the empty "+" tab is selected.
at the moment, I need to add
"style": {
"width": "400px"
}
to all elements
@output()optionSelected: EventEmitter | Event that is emitted whenever an option from the list is selected.
Will not support
see the discussion
#40
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.
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
Generate the TS code required to embed the form
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.