Protected jsonStatic ɵcmpStatic ɵdirStatic ɵfacProtected getProtected mapProtected triggerGenerated using TypeDoc
Private changeProtected jsonStatic ɵcmpStatic ɵdirStatic ɵfacProtected getProtected mapProtected triggerGenerated using TypeDoc
Private jsonPrivate subscriptionStatic ɵdirStatic ɵfacProtected getGenerated using TypeDoc
Protected jsonStatic ɵcmpStatic ɵdirStatic ɵfacProtected getProtected mapProtected triggerGenerated using TypeDoc
Protected changeStatic ɵdirStatic ɵfacProtected getGenerated using TypeDoc
Protected changeStatic ɵdirStatic ɵfacProtected getGenerated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Private jsonPrivate subscriptionStatic ɵdirStatic ɵfacProtected getGenerated using TypeDoc
Generated using TypeDoc
Protected changePrivate jsonPrivate subscriptionStatic ɵdirStatic ɵfacProtected getGenerated using TypeDoc
Private changeProtected jsonStatic ɵcmpStatic ɵdirStatic ɵfacProtected getProtected mapProtected triggerGenerated using TypeDoc
Private Readonly MAXIMUM_Protected jsonStatic ɵcmpStatic ɵdirStatic ɵfacPrivate determineProtected getProtected mapProtected triggerGenerated using TypeDoc
Protected jsonStatic ɵcmpStatic ɵdirStatic ɵfacProtected getProtected mapProtected triggerGenerated using TypeDoc
Private changeProtected jsonStatic ɵcmpStatic ɵdirStatic ɵfacProtected getProtected mapProtected triggerGenerated using TypeDoc
Readonly columnsProtected jsonStatic ɵcmpStatic ɵdirStatic ɵfacProtected getProtected mapProtected triggerGenerated using TypeDoc
Protected jsonStatic ɵcmpStatic ɵdirStatic ɵfacProtected getProtected mapProtected triggerGenerated using TypeDoc
Protected jsonStatic ɵcmpStatic ɵdirStatic ɵfacProtected getProtected mapProtected triggerGenerated using TypeDoc
Private changeProtected jsonStatic ɵcmpStatic ɵdirStatic ɵfacProtected getProtected mapProtected triggerGenerated using TypeDoc
Protected changeStatic ɵdirStatic ɵfacProtected getGenerated using TypeDoc
Generated using TypeDoc
-To use this component you will need to add your own tester:
-
-...
-export const AutocompleteControlRendererTester: RankedTester = rankWith(2, isEnumControl);
-...
-Add the tester and renderer to JSONForms registry:
-
-...
-{ tester: AutocompleteControlRendererTester, renderer: AutocompleteControlRenderer },
-...
-Furthermore you need to update your module.
-
-...
-imports: [JsonFormsAngularMaterialModule, MatAutocompleteModule],
-declarations: [AutocompleteControlRenderer],
-entryComponents: [AutocompleteControlRenderer]
-...
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
-Complex forms in the blink of an eye
-JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
- -This is the JSONForms Angular Material renderers package. This package only contains renderers and must be combined with JSON Forms Angular.
-See the official documentation and the JSON Forms Angular seed repository for examples on how to integrate JSON Forms with your application.
-Check https://www.npmjs.com/search?q=%40jsonforms for all published JSON Forms packages.
- -Install JSON Forms Core, Angular and Angular Material Renderers
-npm i --save @jsonforms/core @jsonforms/angular @jsonforms/angular-material
-Use the json-forms component for each form you want to render and hand over the renderer set.
Example component file app.component.ts:
import { Component } from '@angular/core';
-import { angularMaterialRenderers } from '@jsonforms/angular-material';
-
-@Component({
- selector: 'app-root',
- template: `<jsonforms
- [data]="data"
- [schema]="schema"
- [uischema]="uischema"
- [renderers]="renderers"
- ></jsonforms>`,
-})
-export class AppComponent {
- renderers = angularMaterialRenderers;
- uischema = {
- type: 'VerticalLayout',
- elements: [
- {
- type: 'Control',
- label: false,
- scope: '#/properties/done',
- },
- {
- type: 'Control',
- scope: '#/properties/name',
- },
- {
- type: 'HorizontalLayout',
- elements: [
- {
- type: 'Control',
- scope: '#/properties/due_date',
- },
- {
- type: 'Control',
- scope: '#/properties/recurrence',
- },
- ],
- },
- ],
- };
- schema = {
- type: 'object',
- properties: {
- name: {
- type: 'string',
- minLength: 1,
- },
- done: {
- type: 'boolean',
- },
- due_date: {
- type: 'string',
- format: 'date',
- },
- recurrence: {
- type: 'string',
- enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
- },
- },
- required: ['name', 'due_date'],
- };
- data = {};
-}
-Example module file app.module.ts:
import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { JsonFormsModule } from '@jsonforms/angular';
-import { JsonFormsAngularMaterialModule } from '@jsonforms/angular-material';
-import { AppComponent } from './app.component';
-
-@NgModule({
- declarations: [AppComponent],
- imports: [
- BrowserModule,
- BrowserAnimationsModule,
- JsonFormsModule,
- JsonFormsAngularMaterialModule,
- ],
- schemas: [],
- bootstrap: [AppComponent],
-})
-export class AppModule {}
-The JSON Forms project is licensed under the MIT License. See the LICENSE file for more information.
- -Our current roadmap is available here.
- -JSON Forms is developed by EclipseSource.
-If you encounter any problems feel free to open an issue on the repo. - For questions and discussions please use the JSON Forms board. - You can also reach us via email. - In addition, EclipseSource also offers professional support for JSON Forms.
- -See our migration guide when updating JSON Forms.
-Generated using TypeDoc
-Complex forms in the blink of an eye
+JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
+This is the JSONForms Angular Material renderers package. This package only contains renderers and must be combined with JSON Forms Angular.
+See the official documentation and the JSON Forms Angular seed repository for examples on how to integrate JSON Forms with your application.
+Check https://www.npmjs.com/search?q=%40jsonforms for all published JSON Forms packages.
+Install JSON Forms Core, Angular and Angular Material Renderers
+npm i --save @jsonforms/core @jsonforms/angular @jsonforms/angular-material
+Use the json-forms component for each form you want to render and hand over the renderer set.
Example component file app.component.ts:
import { Component } from '@angular/core';
import { angularMaterialRenderers } from '@jsonforms/angular-material';
@Component({
selector: 'app-root',
template: `<jsonforms
[data]="data"
[schema]="schema"
[uischema]="uischema"
[renderers]="renderers"
></jsonforms>`,
})
export class AppComponent {
renderers = angularMaterialRenderers;
uischema = {
type: 'VerticalLayout',
elements: [
{
type: 'Control',
label: false,
scope: '#/properties/done',
},
{
type: 'Control',
scope: '#/properties/name',
},
{
type: 'HorizontalLayout',
elements: [
{
type: 'Control',
scope: '#/properties/due_date',
},
{
type: 'Control',
scope: '#/properties/recurrence',
},
],
},
],
};
schema = {
type: 'object',
properties: {
name: {
type: 'string',
minLength: 1,
},
done: {
type: 'boolean',
},
due_date: {
type: 'string',
format: 'date',
},
recurrence: {
type: 'string',
enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
},
},
required: ['name', 'due_date'],
};
data = {};
}
+Example module file app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { JsonFormsModule } from '@jsonforms/angular';
import { JsonFormsAngularMaterialModule } from '@jsonforms/angular-material';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
JsonFormsModule,
JsonFormsAngularMaterialModule,
],
schemas: [],
bootstrap: [AppComponent],
})
export class AppModule {}
+The JSON Forms project is licensed under the MIT License. See the LICENSE file for more information.
+Our current roadmap is available here.
+JSON Forms is developed by EclipseSource.
+If you encounter any problems feel free to open an issue on the repo. +For questions and discussions please use the JSON Forms board. +You can also reach us via email. +In addition, EclipseSource also offers professional support for JSON Forms.
+See our migration guide when updating JSON Forms.
+Generated using TypeDoc
Generated using TypeDoc
-Whether the rendered element should be enabled.
-Optional instance path. Necessary when the actual data - path can not be inferred via the UI schema element as - it is the case with nested controls.
-The JSON schema that describes the data.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-Generated using TypeDoc
Const Generated using TypeDoc
Private initializedPrivate jsonformsPrivate previousPrivate previousGenerated using TypeDoc
Abstract Protected jsonProtected getProtected Abstract mapProtected triggerGenerated using TypeDoc
Private _statePrivate middlewarePrivate statePrivate updateGenerated using TypeDoc
Protected jsonProtected getProtected mapProtected triggerGenerated using TypeDoc
Protected getGenerated using TypeDoc
Protected jsonProtected getProtected mapProtected triggerGenerated using TypeDoc
Protected jsonProtected getProtected mapProtected triggerGenerated using TypeDoc
Generated using TypeDoc
Private componentPrivate jsonformsPrivate previousPrivate subscriptionPrivate viewProtected getGenerated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
Complex forms in the blink of an eye
-JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
- -This is the JSON Forms Angular package which provides the necessary bindings for Angular. It uses JSON Forms Core.
-You can combine the Angular package with any Angular-based renderer set you want, for example the Material Renderers.
-See the official documentation and the JSON Forms Angular seed repository for examples on how to integrate JSON Forms with your application.
-Check https://www.npmjs.com/search?q=%40jsonforms for all published JSON Forms packages.
- -Use the JsonForms component to render a form for your data.
Mandatory props:
-data: any - the data to showrenderers: JsonFormsRendererRegistryEntry[] - the Angular renderer set to useOptional props:
-schema: JsonSchema - the data schema for the given data. Will be generated when not given.uischema: UISchemaElement - the UI schema for the given data schema. Will be generated when not given.config: any - form-wide options. May contain default ui schema options.readonly: boolean - whether all controls shall be readonly.uischemas: JsonFormsUiSchemaEntry[] - registry for dynamic ui schema dispatchingvalidationMode: 'ValidateAndShow' | 'ValidateAndHide' | 'NoValidation' - the validation mode for the formajv: AJV - custom Ajv instance for the formlocale - string, for example for formatting numbersdataChange - event emitter which is called on each data change, containing the updated data and the validation result.errors - event emitter which is called with all validations errors.Example component file app.component.ts:
import { Component } from '@angular/core';
-import { angularMaterialRenderers } from '@jsonforms/angular-material';
-
-@Component({
- selector: 'app-root',
- template: `<jsonforms
- [data]="data"
- [schema]="schema"
- [uischema]="uischema"
- [renderers]="renderers"
- ></jsonforms>`,
-})
-export class AppComponent {
- renderers = angularMaterialRenderers;
- uischema = {
- type: 'VerticalLayout',
- elements: [
- {
- type: 'Control',
- label: false,
- scope: '#/properties/done',
- },
- {
- type: 'Control',
- scope: '#/properties/name',
- },
- {
- type: 'HorizontalLayout',
- elements: [
- {
- type: 'Control',
- scope: '#/properties/due_date',
- },
- {
- type: 'Control',
- scope: '#/properties/recurrence',
- },
- ],
- },
- ],
- };
- schema = {
- type: 'object',
- properties: {
- name: {
- type: 'string',
- minLength: 1,
- },
- done: {
- type: 'boolean',
- },
- due_date: {
- type: 'string',
- format: 'date',
- },
- recurrence: {
- type: 'string',
- enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
- },
- },
- required: ['name', 'due_date'],
- };
- data = {};
-}
-Example module file:
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { JsonFormsModule } from '@jsonforms/angular';
-import { JsonFormsAngularMaterialModule } from '@jsonforms/angular-material';
-import { AppComponent } from './app.component';
-
-@NgModule({
- declarations: [AppComponent],
- imports: [
- BrowserModule,
- BrowserAnimationsModule,
- JsonFormsModule,
- JsonFormsAngularMaterialModule,
- ],
- schemas: [],
- bootstrap: [AppComponent],
-})
-export class AppModule {}
-The JSON Forms project is licensed under the MIT License. See the LICENSE file for more information.
- -Our current roadmap is available here.
- -JSON Forms is developed by EclipseSource.
-If you encounter any problems feel free to open an issue on the repo. - For questions and discussions please use the JSON Forms board. - You can also reach us via email. - In addition, EclipseSource also offers professional support for JSON Forms.
- -See our migration guide when updating JSON Forms.
-Generated using TypeDoc
-Complex forms in the blink of an eye
+JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
+This is the JSON Forms Angular package which provides the necessary bindings for Angular. It uses JSON Forms Core.
+You can combine the Angular package with any Angular-based renderer set you want, for example the Material Renderers.
+See the official documentation and the JSON Forms Angular seed repository for examples on how to integrate JSON Forms with your application.
+Check https://www.npmjs.com/search?q=%40jsonforms for all published JSON Forms packages.
+Use the JsonForms component to render a form for your data.
Mandatory props:
+data: any - the data to showrenderers: JsonFormsRendererRegistryEntry[] - the Angular renderer set to useOptional props:
+schema: JsonSchema - the data schema for the given data. Will be generated when not given.uischema: UISchemaElement - the UI schema for the given data schema. Will be generated when not given.config: any - form-wide options. May contain default ui schema options.readonly: boolean - whether all controls shall be readonly.uischemas: JsonFormsUiSchemaEntry[] - registry for dynamic ui schema dispatchingvalidationMode: 'ValidateAndShow' | 'ValidateAndHide' | 'NoValidation' - the validation mode for the formajv: AJV - custom Ajv instance for the formlocale - string, for example for formatting numbersdataChange - event emitter which is called on each data change, containing the updated data and the validation result.errors - event emitter which is called with all validations errors.Example component file app.component.ts:
import { Component } from '@angular/core';
import { angularMaterialRenderers } from '@jsonforms/angular-material';
@Component({
selector: 'app-root',
template: `<jsonforms
[data]="data"
[schema]="schema"
[uischema]="uischema"
[renderers]="renderers"
></jsonforms>`,
})
export class AppComponent {
renderers = angularMaterialRenderers;
uischema = {
type: 'VerticalLayout',
elements: [
{
type: 'Control',
label: false,
scope: '#/properties/done',
},
{
type: 'Control',
scope: '#/properties/name',
},
{
type: 'HorizontalLayout',
elements: [
{
type: 'Control',
scope: '#/properties/due_date',
},
{
type: 'Control',
scope: '#/properties/recurrence',
},
],
},
],
};
schema = {
type: 'object',
properties: {
name: {
type: 'string',
minLength: 1,
},
done: {
type: 'boolean',
},
due_date: {
type: 'string',
format: 'date',
},
recurrence: {
type: 'string',
enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
},
},
required: ['name', 'due_date'],
};
data = {};
}
+Example module file:
+import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { JsonFormsModule } from '@jsonforms/angular';
import { JsonFormsAngularMaterialModule } from '@jsonforms/angular-material';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
JsonFormsModule,
JsonFormsAngularMaterialModule,
],
schemas: [],
bootstrap: [AppComponent],
})
export class AppModule {}
+The JSON Forms project is licensed under the MIT License. See the LICENSE file for more information.
+Our current roadmap is available here.
+JSON Forms is developed by EclipseSource.
+If you encounter any problems feel free to open an issue on the repo. +For questions and discussions please use the JSON Forms board. +You can also reach us via email. +In addition, EclipseSource also offers professional support for JSON Forms.
+See our migration guide when updating JSON Forms.
+Generated using TypeDoc
Generated using TypeDoc
Const Generated using TypeDoc
Generated using TypeDoc
-Generated using TypeDoc
Generated using TypeDoc
The different rule effects.
+Effect that disables the associated element.
+Effect that enables the associated element.
+Effect that hides the associated element.
+Effect that shows the associated element.
+Generated using TypeDoc
Generated using TypeDoc
-The different rule effects.
-Effect that disables the associated element.
-Effect that enables the associated element.
-Effect that hides the associated element.
-Effect that shows the associated element.
-Generated using TypeDoc
-Optional uischema: UISchemaElementOptional options: Ajv | InitActionOptionsGenerated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Optional translator: TranslatorOptional errorTranslator: ErrorTranslatorGenerated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Optional uischema: UISchemaElementOptional options: Ajv | InitActionOptionsGenerated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Only applicable for Controls.
+This function checks whether the given UI schema is of type Control +and if so, resolves the sub-schema referenced by the control and checks +whether the format of the sub-schema matches the expected one.
+the expected format of the resolved sub-schema
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Synonym for isObjectArrayControl
+Generated using TypeDoc
Default tester for boolean.
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Tests whether the given UI schema is of type Control and whether the schema +or uischema options has a 'date' format.
+Generated using TypeDoc
Tests whether the given UI schema is of type Control and whether the schema +or the uischema options has a 'date-time' format.
+Generated using TypeDoc
Tests whether the given UI schema is of type Control and if the schema +has an enum.
+Generated using TypeDoc
Tests whether the given UI schema is of type Control and if the schema +is of type integer
+Generated using TypeDoc
Tests whether the given UI schema is of type Control and if is has +a 'multi' option.
+Generated using TypeDoc
Tests whether the given UI schema is of type Control and if the schema +is of type number
+Generated using TypeDoc
Tests whether the given UI schema is of type Control, if the schema +is of type integer and has option format
+Generated using TypeDoc
Tests whether the given schema is an array of objects.
+Generated using TypeDoc
Tests whether the given UI schema is of type Control and if the schema +is an array of objects.
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Tests whether the given UI schema is of type Control and if the schema +has an enum based on oneOf.
+Generated using TypeDoc
Tests whether the given UI schema is of type Control and if the schema +is an array of a primitive type.
+Generated using TypeDoc
Tests whether a given UI schema is of type Control, +if the schema is of type number or integer and +whether the schema defines a numerical range with a default value.
+Generated using TypeDoc
Tests whether the given UI schema is of type Control and if the schema +is of type string
+Generated using TypeDoc
Tests whether the given UI schema is of type Control and whether the schema +or the uischema options has a 'time' format.
+Generated using TypeDoc
Generated using TypeDoc
Checks whether the given UI schema has an option with the given +name and whether it has the expected value. If no options property +is set, returns false.
+the name of the option to check
+the expected value of the option
+Generated using TypeDoc
Generated using TypeDoc
Create a ranked tester that will associate a number with a given tester, if the +latter returns true.
+the rank to be returned in case the tester returns true
+a tester
+Generated using TypeDoc
Only applicable for Controls.
+This function checks whether the given UI schema is of type Control +and if so, resolves the sub-schema referenced by the control and applies +the given predicate
+the predicate that should be + applied to the resolved sub-schema
+Generated using TypeDoc
Generated using TypeDoc
Only applicable for Controls.
+This function checks whether the given UI schema is of type Control +and if so, resolves the sub-schema referenced by the control and checks +whether the type of the sub-schema matches the expected one.
+the expected type of the resolved sub-schema
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Adds an asterisk to the given label string based +on the required parameter.
+the label string
+whether the label belongs to a control which is required
+applied UI Schema option
+the label string
+Generated using TypeDoc
Generated using TypeDoc
Returns the string representation of the given date. The format of the output string can be specified:
+Optional format: "date" | "time" | "date-time"A string representation of the date in the specified format.
+// returns '2023-11-09'
convertDateToString(new Date('2023-11-09T14:22:54.131Z'), 'date');
+// returns '14:22:54'
convertDateToString(new Date('2023-11-09T14:22:54.131Z'), 'time');
+// returns '2023-11-09T14:22:54.131Z'
convertDateToString(new Date('2023-11-09T14:22:54.131Z'), 'date-time');
+// returns '2023-11-09T14:22:54.131Z'
convertDateToString(new Date('2023-11-09T14:22:54.131Z'));
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Creates a IControlObject with the given label referencing the given ref
+Generated using TypeDoc
Create a default value based on the given schema.
+the schema for which to create a default value.
+Generated using TypeDoc
Generated using TypeDoc
Return a label object based on the given control and schema element.
+the UI schema to obtain a label object for
+Optional schema: JsonSchemaoptional: the corresponding schema element
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Optional uischema: UISchemaElementGenerated using TypeDoc
Default dispatch to control props which can be customized to set handleChange action
+Generated using TypeDoc
Default mapStateToCellProps for enum cell. Options is used for populating dropdown list
+Generated using TypeDoc
Generated using TypeDoc
Optional values: anyOptional values: anyOptional defaultMessage: stringOptional values: anyGenerated using TypeDoc
This can be used to internationalize the label of the given Labelable (e.g. UI Schema elements). +This should not be used for controls as there we have additional context in the form of the JSON Schema available.
+Generated using TypeDoc
Derives the type of the jsonSchema element
+Generated using TypeDoc
Generated using TypeDoc
Optional t: TranslatorOptional i18nKey: stringGenerated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Returns the default value defined in the given schema.
+the schema for which to create a default value.
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Optional state: JsonFormsI18nStateGenerated using TypeDoc
Optional state: JsonFormsI18nStateGenerated using TypeDoc
Optional state: JsonFormsI18nStateGenerated using TypeDoc
Finds all references inside the given schema.
+The JsonSchema to find the references in
+The initial result map, default: empty map (this parameter is used for recursion + inside the function)
+Whether arrays of tuples should be considered; default: false
+Generated using TypeDoc
Generated using TypeDoc
Finds a registered UI schema to use, if any.
+the JSON schema describing the data to be rendered
+the according schema path
+the instance path
+the type of the layout to use or a UI-schema-generator function
+Optional control: ControlElementmay be checked for embedded inline uischema options
+Optional rootSchema: JsonSchemaGenerated using TypeDoc
Generated using TypeDoc
Generate a default UI schema.
+the JSON schema to generated a UI schema for
+the desired layout type for the root layout + of the generated UI schema
+Generated using TypeDoc
Generate a JSON schema based on the given data and any additional options.
+the data to create a JSON schema for
+any additional options that may alter the generated JSON schema
+the generated schema
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Returns the determined error message for the given errors. +All errors must correspond to the given schema, uischema or path.
+Optional schema: i18nJsonSchemaOptional uischema: UISchemaElementOptional path: stringGenerated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Whether an element's description should be hidden.
+whether an element is visible
+the element's description
+whether the element is focused
+true, if the description is to be hidden, false otherwise
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Indicates whether the given uischema element shall be enabled or disabled.
+Checks the global readonly flag, uischema rule, uischema options (including the config),
+the schema and the enablement indicator of the parent.
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Tests whether the schema has an enum based on oneOf.
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Maps state to dispatch properties of an array control.
+the store's dispatch method
+dispatch props of an array control
+Generated using TypeDoc
Synonym for mapDispatchToControlProps.
+Generated using TypeDoc
Map dispatch to control props.
+dispatch props for a control
+Generated using TypeDoc
Generated using TypeDoc
Map state to all of renderer props.
+the store's state
+any own props
+state props for a combinator
+Generated using TypeDoc
Generated using TypeDoc
Map state to table props
+the store's state
+any element's own props
+state props for a table control
+Generated using TypeDoc
Map state to table props
+the store's state
+any element's own props
+state props for a table control
+Generated using TypeDoc
Map state to cell props.
+JSONForms state tree
+any own props
+state props of a cell
+Generated using TypeDoc
Generated using TypeDoc
Map state to control props.
+the store's state
+any own props
+state props for a control
+Generated using TypeDoc
Map state to control with detail props
+the store's state
+any element's own props
+state props for a table control
+Generated using TypeDoc
Generated using TypeDoc
Default mapStateToCellProps for enum control. Options is used for populating dropdown list
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Map state to layout props.
+JSONForms state tree
+any own props
+Generated using TypeDoc
Map state to control props.
+the store's state
+any own props
+state props for a control
+Generated using TypeDoc
Default mapStateToCellProps for multi enum control. Options is used for populating dropdown list
+Generated using TypeDoc
mapStateToOneOfEnumCellProps for one of enum cell. Options is used for populating dropdown list from oneOf
+Generated using TypeDoc
Default mapStateToCellProps for enum control based on oneOf. Options is used for populating dropdown list
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Optional t: TranslatorOptional fallbackI18nKey: stringGenerated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Resolve the given schema path in order to obtain a subschema.
+the root schema from which to start
+the schema path to be resolved
+the actual root schema
+the resolved sub-schema
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Convert a schema path (i.e. JSON pointer) to a data path.
+Data paths can be used in field change event handlers like handleChange.
+the schema path to be converted
+the data path
+toDataPath('#/properties/foo/properties/bar') === 'foo.bar')
+Generated using TypeDoc
Convert a schema path (i.e. JSON pointer) to an array by splitting +at the '/' character and removing all schema-specific keywords.
+The returned value can be used to de-reference a root object by folding over it +and de-referencing the single segments to obtain a new object.
+the schema path to be converted
+an array containing only non-schema-specific segments
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
A dispatching function (or simply dispatch function) is a function that - accepts an action or an async action; it then may or may not dispatch one - or more actions to the store.
-We must distinguish between dispatching functions in general and the base
- dispatch function provided by the store instance without any middleware.
The base dispatch function always synchronously sends an action to the - store's reducer, along with the previous state returned by the store, to - calculate a new state. It expects actions to be plain objects ready to be - consumed by the reducer.
-Middleware wraps the base dispatch function. It allows the dispatch - function to handle async actions in addition to actions. Middleware may - transform, delay, ignore, or otherwise interpret actions or async actions - before passing them to the next middleware.
-The type of things (actions or otherwise) which may be - dispatched.
-A minimal observable of state changes. - For more information, see the observable proposal: - https://github.com/tc39/proposal-observable
-The minimal observable subscription method.
-Any object that can be used as an observer.
- The observer object should have a next method.
An object with an unsubscribe method that can
- be used to unsubscribe the observable from the store, and prevent further
- emission of values from the observable.
An Observer is used to receive data from an Observable, and is supplied as - an argument to subscribe.
-A ranked tester associates a tester with a number.
-A reducer (also called a reducing function) is a function that accepts - an accumulation and a value and returns a new accumulation. They are used - to reduce a collection of values down to a single value
-Reducers are not unique to Redux—they are a fundamental concept in
- functional programming. Even most non-functional languages, like
- JavaScript, have a built-in API for reducing. In JavaScript, it's
- Array.prototype.reduce().
In Redux, the accumulated value is the state object, and the values being - accumulated are actions. Reducers calculate a new state given the previous - state and an action. They must be pure functions—functions that return - the exact same output for given inputs. They should also be free of - side-effects. This is what enables exciting features like hot reloading and - time travel.
-Reducers are the most important concept in Redux.
-Do not put API calls into reducers.
-The type of state consumed and produced by this reducer.
-The type of actions the reducer can potentially respond to.
-A tester is a function that receives an UI schema and a JSON schema and returns a boolean. - The rootSchema is handed over as context. Can be used to resolve references.
-Function to remove listener added by Store.subscribe().
Constant that indicates that a tester is not capable of handling - a combination of schema/data.
-The error-type of an AJV error is defined by its keyword property.
- Certain errors are filtered because they don't fit to any rendered control.
- All of them have in common that we don't want to show them in the UI
- because controls will show the actual reason why they don't match their correponding sub schema.
Synonym for isObjectArrayControl
-Default tester for boolean.
-Tests whether the given UI schema is of type Control and whether the schema - or uischema options has a 'date' format.
-Tests whether the given UI schema is of type Control and whether the schema - or the uischema options has a 'date-time' format.
-Tests whether the given UI schema is of type Control and if the schema - has an enum.
-Tests whether the given UI schema is of type Control and if the schema - is of type integer
-Tests whether the given UI schema is of type Control and if is has - a 'multi' option.
-Tests whether the given UI schema is of type Control and if the schema - is of type number
-Tests whether the given UI schema is of type Control, if the schema - is of type integer and has option format
-Tests whether the given schema is an array of objects.
-Tests whether the given UI schema is of type Control and if the schema - is an array of objects.
-Tests whether the given UI schema is of type Control and if the schema - has an enum based on oneOf.
-Tests whether the given UI schema is of type Control and if the schema - is an array of a primitive type.
-Tests whether a given UI schema is of type Control, - if the schema is of type number or integer and - whether the schema defines a numerical range with a default value.
-Tests whether the given UI schema is of type Control and if the schema - is of type string
-Tests whether the given UI schema is of type Control and whether the schema - or the uischema options has a 'time' format.
-Synonym for mapDispatchToControlProps.
-Adds the given {@code labelName} to the {@code layout} if it exists
- The layout which is to receive the label
- The name of the schema
-Adds an asterisk to the given label string based - on the required parameter.
-the label string
-whether the label belongs to a control which is required
-applied UI Schema option
-the label string
-Escape the given string such that it can be used as a class name, - i.e. hashes and slashes will be replaced.
-the string that should be converted to a valid class name
-the escaped string
-Creates a IControlObject with the given label referencing the given ref
-Create a default value based on the given scheam.
-the schema for which to create a default value.
-Return a label object based on the given control and schema element.
-the UI schema to obtain a label object for
-optional: the corresponding schema element
-Creates a new ILayout.
-The type of the laoyut
-the new ILayout
-Decodes a given JSON Pointer segment to its "normal" representation
-Default dispatch to control props which can be customized to set handleChange action
-Default mapStateToCellProps for enum cell. Options is used for populating dropdown list
-This can be used to internationalize the label of the given Labelable (e.g. UI Schema elements). - This should not be used for controls as there we have additional context in the form of the JSON Schema available.
-Derives the type of the jsonSchema element
-Encodes the given segment to be used as part of a JSON Pointer
-JSON Pointer has special meaning for "/" and "~", therefore these must be encoded
-Finds all references inside the given schema.
-The JsonSchema to find the references in
-The initial result map, default: empty map (this parameter is used for recursion - inside the function)
-Whether arrays of tuples should be considered; default: false
-Finds a registered UI schema to use, if any.
-the JSON schema describing the data to be rendered
-the according schema path
-the instance path
-the type of the layout to use or a UI-schema-generator function
-may be checked for embedded inline uischema options
-Only applicable for Controls.
-This function checks whether the given UI schema is of type Control - and if so, resolves the sub-schema referenced by the control and checks - whether the format of the sub-schema matches the expected one.
-the expected format of the resolved sub-schema
-Generate a default UI schema.
-the JSON schema to generated a UI schema for
-the desired layout type for the root layout - of the generated UI schema
-Generate a JSON schema based on the given data and any additional options.
-the data to create a JSON schema for
-any additional options that may alter the generated JSON schema
-the generated schema
-Returns the determined error message for the given errors. - All errors must correspond to the given schema, uischema or path.
-Returns whether the given {@code jsonSchema} is a combinator ({@code oneOf}, {@code anyOf}, {@code allOf}) at the root level
- the schema to check
-Whether an element's description should be hidden.
-whether an element is visible
-the element's description
-whether the element is focused
-true, if the description is to be hidden, false otherwise
-Indicates whether the given uischema element shall be enabled or disabled.
- Checks the global readonly flag, uischema rule, uischema options (including the config),
- the schema and the enablement indicator of the parent.
true if the schema describes an object.
-true if the schema describes an object.
-Tests whether the schema has an enum based on oneOf.
-Maps state to dispatch properties of an array control.
-the store's dispatch method
-dispatch props of an array control
-Map dispatch to control props.
-dispatch props for a control
-Map state to all of renderer props.
-the store's state
-any own props
-state props for a combinator
-Map state to table props
-the store's state
-any element's own props
-state props for a table control
-Map state to table props
-the store's state
-any element's own props
-state props for a table control
-Map state to cell props.
-JSONForms state tree
-any own props
-state props of a cell
-Map state to control props.
-the store's state
-any own props
-state props for a control
-Map state to control with detail props
-the store's state
-any element's own props
-state props for a table control
-Default mapStateToCellProps for enum control. Options is used for populating dropdown list
-Map state to layout props.
-JSONForms state tree
-any own props
-Map state to control props.
-the store's state
-any own props
-state props for a control
-Default mapStateToCellProps for multi enum control. Options is used for populating dropdown list
-mapStateToOneOfEnumCellProps for one of enum cell. Options is used for populating dropdown list from oneOf
-Default mapStateToCellProps for enum control based on oneOf. Options is used for populating dropdown list
-Checks whether the given UI schema has an option with the given - name and whether it has the expected value. If no options property - is set, returns false.
-the name of the option to check
-the expected value of the option
-Create a ranked tester that will associate a number with a given tester, if the - latter returns true.
-the rank to be returned in case the tester returns true
-a tester
-Resolve the given schema path in order to obtain a subschema.
-the root schema from which to start
-the schema path to be resolved
-the actual root schema
-the resolved sub-schema
-Only applicable for Controls.
-This function checks whether the given UI schema is of type Control - and if so, resolves the sub-schema referenced by the control and applies - the given predicate
-the predicate that should be - applied to the resolved sub-schema
-Only applicable for Controls.
-This function checks whether the given UI schema is of type Control - and if so, resolves the sub-schema referenced by the control and checks - whether the type of the sub-schema matches the expected one.
-the expected type of the resolved sub-schema
-Only applicable for Controls.
-Checks whether the last segment of the scope matches the expected string.
-the expected ending of the reference
-Only applicable for Controls.
-Checks whether the scope of a control ends with the expected string.
-the expected ending of the reference
-Indicates whether to mark a field as required.
-whether the label belongs to a control which is required
-applied UI Schema option
-should the field be marked as required
-Convert a schema path (i.e. JSON pointer) to a data path.
-Data paths can be used in field change event handlers like handleChange.
- -the schema path to be converted
-the data path
-Convert a schema path (i.e. JSON pointer) to an array by splitting - at the '/' character and removing all schema-specific keywords.
-The returned value can be used to de-reference a root object by folding over it - and de-referencing the single segments to obtain a new object.
-the schema path to be converted
-an array containing only non-schema-specific segments
-Transforms a given path to a prefix which can be used for i18n keys. - Returns 'root' for empty paths and removes array indices
-Checks whether the given UI schema has the expected type.
-the expected UI schema type
-Wraps the given {@code uiSchema} in a Layout if there is none already.
-The ui schema to wrap in a layout.
-The type of the layout to create.
-the wrapped uiSchema.
-Convenience wrapper around resolveData and resolveSchema.
-Generated using TypeDoc
-Generated using TypeDoc
Complex forms in the blink of an eye
-JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
- -This is the JSON Forms core package. It provides the basic functionality needed to render forms.
-In order to use JSON Forms Core you need to decide which UI framework you would like to use.
-JSON Forms currently supports React, Angular and Vue.
-The following seeds are available:
-See the official documentation and the Example Package on how to integrate JSON Forms with your application.
-Check https://www.npmjs.com/search?q=%40jsonforms for all published JSON Forms packages.
- -With version 3.0 of JSON Forms we removed json-schema-ref-parser from the core package.
- This change only affects users of the React variant (Vue and Angular are not affected) and even for React only a few users will need to adjust their code.
- To avoid issues and for more information, please have a look at our migration guide.
The JSON Forms project is licensed under the MIT License. See the LICENSE file for more information.
- -Our current roadmap is available here.
- -JSON Forms is developed by EclipseSource.
-If you encounter any problems feel free to open an issue on the repo. - For questions and discussions please use the JSON Forms board. - You can also reach us via email. - In addition, EclipseSource also offers professional support for JSON Forms.
- -See our migration guide when updating JSON Forms.
-Generated using TypeDoc
-Complex forms in the blink of an eye
+JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
+This is the JSON Forms core package. It provides the basic functionality needed to render forms.
+In order to use JSON Forms Core you need to decide which UI framework you would like to use.
+JSON Forms currently supports React, Angular and Vue.
+The following seeds are available:
+ +See the official documentation and the Example Package on how to integrate JSON Forms with your application.
+Check https://www.npmjs.com/search?q=%40jsonforms for all published JSON Forms packages.
+With version 3.0 of JSON Forms we removed json-schema-ref-parser from the core package.
+This change only affects users of the React variant (Vue and Angular are not affected) and even for React only a few users will need to adjust their code.
+To avoid issues and for more information, please have a look at our migration guide.
The JSON Forms project is licensed under the MIT License. See the LICENSE file for more information.
+Our current roadmap is available here.
+JSON Forms is developed by EclipseSource.
+If you encounter any problems feel free to open an issue on the repo. +For questions and discussions please use the JSON Forms board. +You can also reach us via email. +In addition, EclipseSource also offers professional support for JSON Forms.
+See our migration guide when updating JSON Forms.
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Optional optionsGenerated using TypeDoc
Optional additionalOptional ajvOptional validationGenerated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Optional errorOptional translatorGenerated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Optional dataOptional optionsOptional schemaOptional uischemaGenerated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
An and condition.
+The type of condition.
+Generated using TypeDoc
An Action type which accepts any other properties.
+This is mainly for the use of the Reducer type.
+This is not part of Action itself to prevent types that extend Action from
+having an index signature.
Generated using TypeDoc
Props of an array control.
+Optional cellsAll available cell renderers.
+Optional childOptional configAny configuration options for the element.
+The data to be rendered.
+Optional descriptionDescription of input cell
+Whether the rendered element should be enabled.
+Any validation errors that are caused by the data to be rendered.
+Optional i18nA unique ID that should be used for rendering the scoped UI schema element.
+The label for the rendered element.
+Instance path the data is written to, in case of a control.
+Optional renderersAll available renderers.
+Optional requiredWhether the rendered data is required.
+The root schema as returned by the store.
+The JSON schema that describes the data.
+The UI schema to be rendered.
+Optional uischemasWhether the rendered element should be visible.
+Optional moveOptional moveOptional removeGenerated using TypeDoc
Generated using TypeDoc
Props of an array control.
+Optional cellsAll available cell renderers.
+Optional configAny configuration options for the element.
+The data to be rendered.
+Optional descriptionDescription of input cell
+Whether the rendered element should be enabled.
+Any validation errors that are caused by the data to be rendered.
+Optional i18nA unique ID that should be used for rendering the scoped UI schema element.
+The label for the rendered element.
+Optional minInstance path the data is written to, in case of a control.
+Optional renderersAll available renderers.
+Optional requiredWhether the rendered data is required.
+The root schema as returned by the store.
+The JSON schema that describes the data.
+The UI schema to be rendered.
+Optional uischemasWhether the rendered element should be visible.
+Optional moveOptional moveOptional removeGenerated using TypeDoc
The categorization element, which may have children elements. +A child element may either be itself a Categorization or a Category, hence +the categorization element can be used to represent recursive structures like trees.
+The child elements of this categorization which are either of type +Category or Categorization.
+Optional i18nLabel for UI schema element.
+Optional optionsAny additional options.
+Optional ruleAn optional rule.
+The type of this UI schema element.
+Generated using TypeDoc
The category layout.
+The child elements of this layout.
+Optional i18nLabel for UI schema element.
+Optional optionsAny additional options.
+Optional ruleAn optional rule.
+The type of this UI schema element.
+Generated using TypeDoc
Props of a cell.
+Optional cellsAll available cell renderers.
+Optional configAny configuration options for the element.
+The data to be rendered.
+Whether the rendered element should be enabled.
+Any validation errors that are caused by the data to be rendered.
+A unique ID that should be used for rendering the scoped UI schema element.
+Instance path the data is written to, in case of a control.
+Optional renderersAll available renderers.
+The root schema as returned by the store.
+The JSON schema that describes the data.
+The UI schema to be rendered.
+Whether the rendered element should be visible.
+Generated using TypeDoc
Optional variable: stringGenerated using TypeDoc
State-based props of a Control
+Optional cellsAll available cell renderers.
+Optional configAny configuration options for the element.
+The data to be rendered.
+Optional descriptionDescription of input cell
+Whether the rendered element should be enabled.
+Any validation errors that are caused by the data to be rendered.
+Optional i18nA unique ID that should be used for rendering the scoped UI schema element.
+The label for the rendered element.
+Instance path the data is written to, in case of a control.
+Optional renderersAll available renderers.
+Optional requiredWhether the rendered data is required.
+The root schema as returned by the store.
+The JSON schema that describes the data.
+The UI schema to be rendered.
+Whether the rendered element should be visible.
+Generated using TypeDoc
Generated using TypeDoc
A composable condition.
+Optional Readonly typeThe type of condition.
+Generated using TypeDoc
Generated using TypeDoc
A control element. The scope property of the control determines +to which part of the schema the control should be bound.
+Optional i18nOptional labelLabel for UI schema element.
+Optional optionsAny additional options.
+Optional ruleAn optional rule.
+The scope that determines to which part this element should be bound to.
+The type of this UI schema element.
+Generated using TypeDoc
Props of a Control.
+Optional cellsAll available cell renderers.
+Optional configAny configuration options for the element.
+The data to be rendered.
+Optional descriptionDescription of input cell
+Whether the rendered element should be enabled.
+Any validation errors that are caused by the data to be rendered.
+Optional i18nA unique ID that should be used for rendering the scoped UI schema element.
+The label for the rendered element.
+Instance path the data is written to, in case of a control.
+Optional renderersAll available renderers.
+Optional requiredWhether the rendered data is required.
+The root schema as returned by the store.
+The JSON schema that describes the data.
+The UI schema to be rendered.
+Whether the rendered element should be visible.
+Generated using TypeDoc
Generated using TypeDoc
State-based props of a table control.
+Optional cellsAll available cell renderers.
+Optional configAny configuration options for the element.
+The data to be rendered.
+Optional descriptionDescription of input cell
+Whether the rendered element should be enabled.
+Any validation errors that are caused by the data to be rendered.
+Optional i18nA unique ID that should be used for rendering the scoped UI schema element.
+The label for the rendered element.
+Instance path the data is written to, in case of a control.
+Optional renderersAll available renderers.
+Optional requiredWhether the rendered data is required.
+The root schema as returned by the store.
+The JSON schema that describes the data.
+The UI schema to be rendered.
+Optional uischemasWhether the rendered element should be visible.
+Generated using TypeDoc
Registers the given cell renderer when a JSON Forms store is created.
+the cell to be registered
+Optional cellsAll available cell renderers.
+Optional configAny configuration options for the element.
+The data to be rendered.
+Whether the rendered element should be enabled.
+Any validation errors that are caused by the data to be rendered.
+A unique ID that should be used for rendering the scoped UI schema element.
+Instance path the data is written to, in case of a control.
+Optional renderersAll available renderers.
+The root schema as returned by the store.
+The JSON schema that describes the data.
+The UI schema to be rendered.
+Whether the rendered element should be visible.
+Generated using TypeDoc
Registers the given cell renderer when a JSON Forms store is created.
+the cell to be registered
+Optional cellsAll available cell renderers.
+Optional configAny configuration options for the element.
+The data to be rendered.
+Whether the rendered element should be enabled.
+Any validation errors that are caused by the data to be rendered.
+A unique ID that should be used for rendering the scoped UI schema element.
+Instance path the data is written to, in case of a control.
+Optional renderersAll available renderers.
+The root schema as returned by the store.
+The JSON schema that describes the data.
+The UI schema to be rendered.
+Whether the rendered element should be visible.
+Generated using TypeDoc
Dispatch props of a table control
+Optional moveOptional moveOptional removeGenerated using TypeDoc
Dispatch-based props of a Control.
+Generated using TypeDoc
Optional removeGenerated using TypeDoc
Props of an enum cell.
+Optional cellsAll available cell renderers.
+Optional configAny configuration options for the element.
+The data to be rendered.
+Whether the rendered element should be enabled.
+Any validation errors that are caused by the data to be rendered.
+A unique ID that should be used for rendering the scoped UI schema element.
+Optional optionsInstance path the data is written to, in case of a control.
+Optional renderersAll available renderers.
+The root schema as returned by the store.
+The JSON schema that describes the data.
+The UI schema to be rendered.
+Whether the rendered element should be visible.
+Generated using TypeDoc
Generated using TypeDoc
Interface for mapping a given type to a formatted string and back.
+Format the given value
+the value to be formatted
+the formatted string
+Generated using TypeDoc
A group resembles a vertical layout, but additionally might have a label. +This layout is useful when grouping different elements by a certain criteria.
+The child elements of this layout.
+Optional i18nOptional labelLabel for UI schema element.
+Optional optionsAny additional options.
+Optional ruleAn optional rule.
+The type of this UI schema element.
+Generated using TypeDoc
A layout which orders its children horizontally (i.e. from left to right).
+The child elements of this layout.
+Optional optionsAny additional options.
+Optional ruleAn optional rule.
+The type of this UI schema element.
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Optional additionalOptional ajvOptional errorsOptional validationOptional validatorGenerated using TypeDoc
Generated using TypeDoc
The state shape of JSONForms.
+Represents JSONForm's sub-state.
+Generated using TypeDoc
Optional localeOptional translateOptional translateGenerated using TypeDoc
Optional cellsOptional enabledWhether the rendered element should be enabled.
+Optional pathOptional instance path. Necessary when the actual data +path can not be inferred via the UI schema element as +it is the case with nested controls.
+Optional renderersOptional schemaThe JSON schema that describes the data.
+Optional uischemaThe UI schema to be rendered.
+Optional uischemasOptional visibleWhether the rendered element should be visible.
+Generated using TypeDoc
Generated using TypeDoc
The state shape of JSONForms.
+Represents JSONForm's sub-state.
+Generated using TypeDoc
JSONForms store.
+Dispatches an action. It is the only way to trigger a state change.
+The reducer function, used to create the store, will be called with the
+current state tree and the given action. Its return value will be
+considered the next state of the tree, and the change listeners will
+be notified.
The base implementation only supports plain object actions. If you want
+to dispatch a Promise, an Observable, a thunk, or something else, you
+need to wrap your store creating function into the corresponding
+middleware. For example, see the documentation for the redux-thunk
+package. Even the middleware will eventually dispatch plain object
+actions using this method.
A plain object representing “what changed”. It is a good
+ idea to keep actions serializable so you can record and replay user
+ sessions, or use the time travelling redux-devtools. An action must
+ have a type property which may not be undefined. It is a good idea
+ to use string constants for action types.
For convenience, the same action object you dispatched.
+Note that, if you use a custom middleware, it may wrap dispatch() to
+return something else (for example, a Promise you can await).
Interoperability point for observable/reactive libraries.
+A minimal observable of state changes. +For more information, see the observable proposal: +https://github.com/tc39/proposal-observable
+Reads the state tree managed by the store.
+The current state tree of your application.
+Replaces the reducer currently used by the store to calculate the state.
+You might need this if your app implements code splitting and you want to +load some of the reducers dynamically. You might also need this if you +implement a hot reloading mechanism for Redux.
+The reducer for the store to use instead.
+Adds a change listener. It will be called any time an action is
+dispatched, and some part of the state tree may potentially have changed.
+You may then call getState() to read the current state tree inside the
+callback.
You may call dispatch() from a change listener, with the following
+caveats:
The subscriptions are snapshotted just before every dispatch() call.
+If you subscribe or unsubscribe while the listeners are being invoked,
+this will not have any effect on the dispatch() that is currently in
+progress. However, the next dispatch() call, whether nested or not,
+will use a more recent snapshot of the subscription list.
The listener should not expect to see all states changes, as the state
+might have been updated multiple times during a nested dispatch() before
+the listener is called. It is, however, guaranteed that all subscribers
+registered before the dispatch() started will be called with the latest
+state by the time it exits.
A callback to be invoked on every dispatch.
+A function to remove this change listener.
+Generated using TypeDoc
Optional cellsAll available cell renderers.
+Optional configGlobal configuration options.
+Optional coreSubstate for storing mandatory sub-state.
+Optional i18nI18n settings.
+Optional readonlyIf true, sets all controls to read-only.
+Optional renderersAll available renderers.
+Optional uischemasThe UI schema registry used in detail renderers.
+Generated using TypeDoc
Generated using TypeDoc
Optional $refOptional $schemaIt is recommended that the meta-schema is +included in the root of any JSON Schema
+Optional additionalOptional additionalOptional allOptional anyOptional constOptional defaultDefault json for the object represented by +this schema
+Optional definitionsHolds simple JSON Schema definitions for +referencing from elsewhere.
+Optional dependenciesIf the key is present as a property then the +string of properties must also be present. +If the value is a JSON Schema then it must +also be valid for the object if the key is +present.
+Optional descriptionSchema description
+Optional enumEnumerates the values that this schema can be +e.g. +{"type": "string", + "enum": ["red", "green", "blue"]}
+Optional exclusiveIf true maximum must be > value, >= otherwise
+Optional exclusiveIf true minimum must be < value, <= otherwise
+Optional formatOptional idThis is important because it tells refs where +the root of the document is located
+Optional itemsOptional maxOptional maxOptional maxOptional maximumOptional minOptional minOptional minOptional minimumOptional multipleThe value must be a multiple of the number +(e.g. 10 is a multiple of 5)
+Optional notThe entity being validated must not match this schema
+Optional oneOptional patternThis is a regex string that the value must +conform to
+Optional patternThe key of this object is a regex for which +properties the schema applies to
+Optional propertiesThe keys that can exist on the object with the +json schema that should validate their value
+Optional requiredOptional titleTitle of the schema
+Optional typeThe basic type of this schema, can be one of +[string, number, object, array, boolean, null] +or an array of the acceptable types
+Optional uniqueGenerated using TypeDoc
Optional $idThis is important because it tells refs where +the root of the document is located
+Optional $refOptional $schemaIt is recommended that the meta-schema is +included in the root of any JSON Schema
+Optional additionalOptional additionalOptional allOptional anyOptional constOptional containsOptional defaultDefault json for the object represented by +this schema
+Optional definitionsHolds simple JSON Schema definitions for +referencing from elsewhere.
+Optional dependenciesIf the key is present as a property then the +string of properties must also be present. +If the value is a JSON Schema then it must +also be valid for the object if the key is +present.
+Optional descriptionSchema description
+Optional elseOptional enumEnumerates the values that this schema can be +e.g. +{"type": "string", + "enum": ["red", "green", "blue"]}
+Optional errorOptional examplesOptional exclusiveIf true maximum must be > value, >= otherwise
+Optional exclusiveIf true minimum must be < value, <= otherwise
+Optional formatOptional ifOptional itemsOptional maxOptional maxOptional maxOptional maximumOptional minOptional minOptional minOptional minimumOptional multipleThe value must be a multiple of the number +(e.g. 10 is a multiple of 5)
+Optional notThe entity being validated must not match this schema
+Optional oneOptional patternThis is a regex string that the value must +conform to
+Optional patternThe key of this object is a regex for which +properties the schema applies to
+Optional propertiesThe keys that can exist on the object with the +json schema that should validate their value
+Optional propertyOptional readOptional requiredOptional thenOptional titleTitle of the schema
+Optional typeThe basic type of this schema, can be one of +[string, number, object, array, boolean, null] +or an array of the acceptable types
+Optional uniqueOptional writeGenerated using TypeDoc
Generated using TypeDoc
A label element.
+Optional i18nOptional optionsAny additional options.
+Optional ruleAn optional rule.
+The text of label.
+The type of this UI schema element.
+Generated using TypeDoc
State-based props of a Renderer.
+Optional cellsAll available cell renderers.
+Optional configAny configuration options for the element.
+Optional dataThe data to be rendered.
+Whether the rendered element should be enabled.
+Instance path the data is written to, in case of a control.
+Optional renderersAll available renderers.
+The JSON schema that describes the data.
+Optional textThe UI schema to be rendered.
+Whether the rendered element should be visible.
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Represents a layout element which can order its children +in a specific way.
+The child elements of this layout.
+Optional optionsAny additional options.
+Optional ruleAn optional rule.
+The type of this UI schema element.
+Generated using TypeDoc
State props of a layout;
+Optional cellsAll available cell renderers.
+Optional configAny configuration options for the element.
+Optional dataThe data to be rendered.
+Direction for the layout to flow
+Whether the rendered element should be enabled.
+Optional labelInstance path the data is written to, in case of a control.
+Optional renderersAll available renderers.
+The JSON schema that describes the data.
+The UI schema to be rendered.
+Whether the rendered element should be visible.
+Generated using TypeDoc
A leaf condition.
+The expected value when evaluating the condition
+The scope that determines to which part this element should be bound to.
+The type of condition.
+Generated using TypeDoc
Generated using TypeDoc
An or condition.
+The type of condition.
+Generated using TypeDoc
Optional cellsOptional dataOptional enabledWhether the rendered element should be enabled.
+Optional idOptional pathOptional instance path. Necessary when the actual data +path can not be inferred via the UI schema element as +it is the case with nested controls.
+Optional renderersOptional schemaThe JSON schema that describes the data.
+Optional uischemaThe UI schema to be rendered.
+Optional uischemasOptional visibleWhether the rendered element should be visible.
+Generated using TypeDoc
Optional cellsOptional enabledWhether the rendered element should be enabled.
+Optional idOptional pathOptional instance path. Necessary when the actual data +path can not be inferred via the UI schema element as +it is the case with nested controls.
+Optional renderersOptional schemaThe JSON schema that describes the data.
+Optional uischemaThe UI schema to be rendered.
+Optional uischemasOptional visibleWhether the rendered element should be visible.
+Generated using TypeDoc
Generated using TypeDoc
Optional cellsOptional dataOptional enabledWhether the rendered element should be enabled.
+Optional idOptional optionsOptional pathOptional instance path. Necessary when the actual data +path can not be inferred via the UI schema element as +it is the case with nested controls.
+Optional renderersOptional schemaThe JSON schema that describes the data.
+Optional uischemaThe UI schema to be rendered.
+Optional uischemasOptional visibleWhether the rendered element should be visible.
+Generated using TypeDoc
Optional cellsOptional enabledWhether the rendered element should be enabled.
+Optional pathOptional instance path. Necessary when the actual data +path can not be inferred via the UI schema element as +it is the case with nested controls.
+Optional renderersOptional schemaThe JSON schema that describes the data.
+Optional uischemaThe UI schema to be rendered.
+Optional uischemasOptional visibleWhether the rendered element should be visible.
+Generated using TypeDoc
Optional cellsOptional enabledWhether the rendered element should be enabled.
+Optional pathOptional instance path. Necessary when the actual data +path can not be inferred via the UI schema element as +it is the case with nested controls.
+Optional renderersOptional schemaThe JSON schema that describes the data.
+Optional uischemaThe UI schema to be rendered.
+Optional uischemasOptional visibleWhether the rendered element should be visible.
+Generated using TypeDoc
Optional cellsOptional directionOptional enabledWhether the rendered element should be enabled.
+Optional pathOptional instance path. Necessary when the actual data +path can not be inferred via the UI schema element as +it is the case with nested controls.
+Optional renderersOptional schemaThe JSON schema that describes the data.
+Optional uischemaThe UI schema to be rendered.
+Optional uischemasOptional visibleWhether the rendered element should be visible.
+Generated using TypeDoc
Generated using TypeDoc
Optional cellsOptional enabledWhether the rendered element should be enabled.
+Optional pathOptional instance path. Necessary when the actual data +path can not be inferred via the UI schema element as +it is the case with nested controls.
+Optional renderersOptional schemaThe JSON schema that describes the data.
+Optional uischemaThe UI schema to be rendered.
+Optional uischemasOptional visibleWhether the rendered element should be visible.
+Generated using TypeDoc
Map for storing refs and the respective schemas they are pointing to.
+Generated using TypeDoc
Props of a Renderer.
+Optional cellsAll available cell renderers.
+Optional configAny configuration options for the element.
+Optional dataThe data to be rendered.
+Whether the rendered element should be enabled.
+Instance path the data is written to, in case of a control.
+Optional renderersAll available renderers.
+The JSON schema that describes the data.
+The UI schema to be rendered.
+Whether the rendered element should be visible.
+Generated using TypeDoc
Generated using TypeDoc
Represents a condition to be evaluated.
+Optional failWhen the scope resolves to undefined and failWhenUndefined is set to true, the condition
+will fail. Therefore the reverse effect will be applied.
Background:
+Most JSON Schemas will successfully validate against undefined data. Specifying that a
+condition shall fail when data is undefined requires to lift the scope to being able to use
+JSON Schema's required.
Using failWhenUndefined allows to more conveniently express this condition.
The scope that determines to which part this element should be bound to.
+Optional Readonly typeThe type of condition.
+Generated using TypeDoc
Interface for describing an UI schema element that is referencing +a subschema. The value of the scope may be a JSON Pointer.
+Optional scopeThe scope that determines to which part this element should be bound to.
+Generated using TypeDoc
Generated using TypeDoc
State-based props of a table control.
+Optional cellsAll available cell renderers.
+Optional childOptional configAny configuration options for the element.
+The data to be rendered.
+Optional descriptionDescription of input cell
+Whether the rendered element should be enabled.
+Any validation errors that are caused by the data to be rendered.
+Optional i18nA unique ID that should be used for rendering the scoped UI schema element.
+The label for the rendered element.
+Instance path the data is written to, in case of a control.
+Optional renderersAll available renderers.
+Optional requiredWhether the rendered data is required.
+The root schema as returned by the store.
+The JSON schema that describes the data.
+The UI schema to be rendered.
+Optional uischemasWhether the rendered element should be visible.
+Generated using TypeDoc
State-based props of a table control.
+Optional cellsAll available cell renderers.
+Optional configAny configuration options for the element.
+The data to be rendered.
+Optional descriptionDescription of input cell
+Whether the rendered element should be enabled.
+Any validation errors that are caused by the data to be rendered.
+Optional i18nA unique ID that should be used for rendering the scoped UI schema element.
+The label for the rendered element.
+Optional minInstance path the data is written to, in case of a control.
+Optional renderersAll available renderers.
+Optional requiredWhether the rendered data is required.
+The root schema as returned by the store.
+The JSON schema that describes the data.
+The UI schema to be rendered.
+Optional uischemasWhether the rendered element should be visible.
+Generated using TypeDoc
State props of a cell.
+Optional cellsAll available cell renderers.
+Optional configAny configuration options for the element.
+The data to be rendered.
+Whether the rendered element should be enabled.
+Any validation errors that are caused by the data to be rendered.
+A unique ID that should be used for rendering the scoped UI schema element.
+Instance path the data is written to, in case of a control.
+Optional renderersAll available renderers.
+The root schema as returned by the store.
+The JSON schema that describes the data.
+The UI schema to be rendered.
+Whether the rendered element should be visible.
+Generated using TypeDoc
State-based props of a Control
+Optional cellsAll available cell renderers.
+Optional configAny configuration options for the element.
+The data to be rendered.
+Optional descriptionDescription of input cell
+Whether the rendered element should be enabled.
+Any validation errors that are caused by the data to be rendered.
+Optional i18nA unique ID that should be used for rendering the scoped UI schema element.
+The label for the rendered element.
+Instance path the data is written to, in case of a control.
+Optional renderersAll available renderers.
+Optional requiredWhether the rendered data is required.
+The root schema as returned by the store.
+The JSON schema that describes the data.
+The UI schema to be rendered.
+Whether the rendered element should be visible.
+Generated using TypeDoc
State-based props of a Control
+Optional cellsAll available cell renderers.
+Optional configAny configuration options for the element.
+The data to be rendered.
+Optional descriptionDescription of input cell
+Whether the rendered element should be enabled.
+Any validation errors that are caused by the data to be rendered.
+Optional i18nA unique ID that should be used for rendering the scoped UI schema element.
+The label for the rendered element.
+Instance path the data is written to, in case of a control.
+Optional renderersAll available renderers.
+Optional requiredWhether the rendered data is required.
+The root schema as returned by the store.
+The JSON schema that describes the data.
+The UI schema to be rendered.
+Whether the rendered element should be visible.
+Generated using TypeDoc
State-based props of a table control.
+Optional cellsAll available cell renderers.
+Optional configAny configuration options for the element.
+The data to be rendered.
+Optional descriptionDescription of input cell
+Whether the rendered element should be enabled.
+Any validation errors that are caused by the data to be rendered.
+Optional i18nA unique ID that should be used for rendering the scoped UI schema element.
+The label for the rendered element.
+Instance path the data is written to, in case of a control.
+Optional renderersAll available renderers.
+Optional requiredWhether the rendered data is required.
+The root schema as returned by the store.
+The JSON schema that describes the data.
+The UI schema to be rendered.
+Optional uischemasWhether the rendered element should be visible.
+Generated using TypeDoc
State props of a cell for enum cell
+Optional cellsAll available cell renderers.
+Optional configAny configuration options for the element.
+The data to be rendered.
+Whether the rendered element should be enabled.
+Any validation errors that are caused by the data to be rendered.
+A unique ID that should be used for rendering the scoped UI schema element.
+Optional optionsInstance path the data is written to, in case of a control.
+Optional renderersAll available renderers.
+The root schema as returned by the store.
+The JSON schema that describes the data.
+The UI schema to be rendered.
+Whether the rendered element should be visible.
+Generated using TypeDoc
Optional cellsOptional enabledWhether the rendered element should be enabled.
+Optional pathOptional instance path. Necessary when the actual data +path can not be inferred via the UI schema element as +it is the case with nested controls.
+Optional renderersOptional schemaThe JSON schema that describes the data.
+Optional uischemaThe UI schema to be rendered.
+Optional uischemasOptional visibleWhether the rendered element should be visible.
+Generated using TypeDoc
State-based props of a Renderer.
+Optional cellsAll available cell renderers.
+Optional configAny configuration options for the element.
+Optional dataThe data to be rendered.
+Whether the rendered element should be enabled.
+Instance path the data is written to, in case of a control.
+Optional renderersAll available renderers.
+The JSON schema that describes the data.
+Optional textThe UI schema to be rendered.
+Whether the rendered element should be visible.
+Generated using TypeDoc
State props of a layout;
+Optional cellsAll available cell renderers.
+Optional configAny configuration options for the element.
+Optional dataThe data to be rendered.
+Direction for the layout to flow
+Whether the rendered element should be enabled.
+Optional labelInstance path the data is written to, in case of a control.
+Optional renderersAll available renderers.
+The JSON schema that describes the data.
+The UI schema to be rendered.
+Whether the rendered element should be visible.
+Generated using TypeDoc
Generated using TypeDoc
State-based props of a Renderer.
+Optional cellsAll available cell renderers.
+Optional configAny configuration options for the element.
+Optional dataThe data to be rendered.
+Whether the rendered element should be enabled.
+Instance path the data is written to, in case of a control.
+Optional renderersAll available renderers.
+The JSON schema that describes the data.
+The UI schema to be rendered.
+Whether the rendered element should be visible.
+Generated using TypeDoc
State-based properties for UI schema elements that have a scope.
+Optional cellsAll available cell renderers.
+Optional configAny configuration options for the element.
+The data to be rendered.
+Whether the rendered element should be enabled.
+Any validation errors that are caused by the data to be rendered.
+A unique ID that should be used for rendering the scoped UI schema element.
+Instance path the data is written to, in case of a control.
+Optional renderersAll available renderers.
+The root schema as returned by the store.
+The JSON schema that describes the data.
+The UI schema to be rendered.
+Whether the rendered element should be visible.
+Generated using TypeDoc
A store is an object that holds the application's state tree. +There should only be a single store in a Redux app, as the composition +happens on the reducer level.
+Dispatches an action. It is the only way to trigger a state change.
+The reducer function, used to create the store, will be called with the
+current state tree and the given action. Its return value will be
+considered the next state of the tree, and the change listeners will
+be notified.
The base implementation only supports plain object actions. If you want
+to dispatch a Promise, an Observable, a thunk, or something else, you
+need to wrap your store creating function into the corresponding
+middleware. For example, see the documentation for the redux-thunk
+package. Even the middleware will eventually dispatch plain object
+actions using this method.
A plain object representing “what changed”. It is a good
+ idea to keep actions serializable so you can record and replay user
+ sessions, or use the time travelling redux-devtools. An action must
+ have a type property which may not be undefined. It is a good idea
+ to use string constants for action types.
For convenience, the same action object you dispatched.
+Note that, if you use a custom middleware, it may wrap dispatch() to
+return something else (for example, a Promise you can await).
Interoperability point for observable/reactive libraries.
+A minimal observable of state changes. +For more information, see the observable proposal: +https://github.com/tc39/proposal-observable
+Replaces the reducer currently used by the store to calculate the state.
+You might need this if your app implements code splitting and you want to +load some of the reducers dynamically. You might also need this if you +implement a hot reloading mechanism for Redux.
+Adds a change listener. It will be called any time an action is
+dispatched, and some part of the state tree may potentially have changed.
+You may then call getState() to read the current state tree inside the
+callback.
You may call dispatch() from a change listener, with the following
+caveats:
The subscriptions are snapshotted just before every dispatch() call.
+If you subscribe or unsubscribe while the listeners are being invoked,
+this will not have any effect on the dispatch() that is currently in
+progress. However, the next dispatch() call, whether nested or not,
+will use a more recent snapshot of the subscription list.
The listener should not expect to see all states changes, as the state
+might have been updated multiple times during a nested dispatch() before
+the listener is called. It is, however, guaranteed that all subscribers
+registered before the dispatch() started will be called with the latest
+state by the time it exits.
A callback to be invoked on every dispatch.
+A function to remove this change listener.
+Generated using TypeDoc
Additional context given to a tester in addition to UISchema and JsonSchema.
+The form wide configuration object given to JsonForms.
+The root JsonSchema of the form. Can be used to resolve references.
+Generated using TypeDoc
Common base interface for any UI schema element.
+Optional optionsAny additional options.
+Optional ruleAn optional rule.
+The type of this UI schema element.
+Generated using TypeDoc
A layout which orders its child elements vertically (i.e. from top to bottom).
+The child elements of this layout.
+Optional optionsAny additional options.
+Optional ruleAn optional rule.
+The type of this UI schema element.
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-An and condition.
-Generated using TypeDoc
-An Action type which accepts any other properties.
- This is mainly for the use of the Reducer type.
- This is not part of Action itself to prevent types that extend Action from
- having an index signature.
An Action type which accepts any other properties.
- This is mainly for the use of the Reducer type.
- This is not part of Action itself to prevent types that extend Action from
- having an index signature.
Generated using TypeDoc
-Props of an array control.
-Any configuration options for the element.
-The data to be rendered.
-Description of input cell
-Whether the rendered element should be enabled.
-Any validation errors that are caused by the data to be rendered.
-A unique ID that should be used for rendering the scoped UI schema element.
-The label for the rendered element.
-Instance path the data is written to, in case of a control.
-Whether the rendered data is required.
-The root schema as returned by the store.
-The JSON schema that describes the data.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-Generated using TypeDoc
-Props of an array control.
-Any configuration options for the element.
-Description of input cell
-Whether the rendered element should be enabled.
-Any validation errors that are caused by the data to be rendered.
-A unique ID that should be used for rendering the scoped UI schema element.
-The label for the rendered element.
-Instance path the data is written to, in case of a control.
-Whether the rendered data is required.
-The root schema as returned by the store.
-The JSON schema that describes the data.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-The categorization element, which may have children elements. - A child element may either be itself a Categorization or a Category, hence - the categorization element can be used to represent recursive structures like trees.
-The child elements of this categorization which are either of type - Category or Categorization.
-Any additional options.
-An optional rule.
-Generated using TypeDoc
-The category layout.
-The child elements of this layout.
-Any additional options.
-An optional rule.
-Generated using TypeDoc
-Props of a cell.
-All available cell renderers.
-Any configuration options for the element.
-The data to be rendered.
-Whether the rendered element should be enabled.
-Any validation errors that are caused by the data to be rendered.
-A unique ID that should be used for rendering the scoped UI schema element.
-Instance path the data is written to, in case of a control.
-All available renderers.
-The JSON schema that describes the data.
-Whether the rendered element should be visible.
-Update handler that emits a data change
-the path to the data to be updated
-the new value that should be written to the given path
-Generated using TypeDoc
-Any configuration options for the element.
-Description of input cell
-Whether the rendered element should be enabled.
-Any validation errors that are caused by the data to be rendered.
-The label for the rendered element.
-All available renderers.
-Whether the rendered data is required.
-The JSON schema that describes the data.
-Whether the rendered element should be visible.
-Update handler that emits a data change
-the path to the data to be updated
-the new value that should be written to the given path
-Generated using TypeDoc
-Generated using TypeDoc
-A composable condition.
-The type of condition.
-Generated using TypeDoc
-Represents a condition to be evaluated.
-The type of condition.
-Generated using TypeDoc
-A control element. The scope property of the control determines - to which part of the schema the control should be bound.
-Label for UI schema element.
-Any additional options.
-An optional rule.
-The scope that determines to which part this element should be bound to.
-Generated using TypeDoc
-Props of a Control.
-Any configuration options for the element.
-The data to be rendered.
-Description of input cell
-Whether the rendered element should be enabled.
-Any validation errors that are caused by the data to be rendered.
-A unique ID that should be used for rendering the scoped UI schema element.
-The label for the rendered element.
-Instance path the data is written to, in case of a control.
-All available renderers.
-Whether the rendered data is required.
-The root schema as returned by the store.
-The JSON schema that describes the data.
-Whether the rendered element should be visible.
-Update handler that emits a data change
-the path to the data to be updated
-the new value that should be written to the given path
-Generated using TypeDoc
-Generated using TypeDoc
-Any configuration options for the element.
-The data to be rendered.
-Description of input cell
-Whether the rendered element should be enabled.
-Any validation errors that are caused by the data to be rendered.
-A unique ID that should be used for rendering the scoped UI schema element.
-The label for the rendered element.
-Instance path the data is written to, in case of a control.
-Whether the rendered data is required.
-The root schema as returned by the store.
-The JSON schema that describes the data.
-Whether the rendered element should be visible.
-Update handler that emits a data change
-the path to the data to be updated
-the new value that should be written to the given path
-Generated using TypeDoc
-Any configuration options for the element.
-The data to be rendered.
-Whether the rendered element should be enabled.
-Any validation errors that are caused by the data to be rendered.
-A unique ID that should be used for rendering the scoped UI schema element.
-Instance path the data is written to, in case of a control.
-All available renderers.
-The JSON schema that describes the data.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-Registers the given cell renderer when a JSON Forms store is created.
-Any configuration options for the element.
-The data to be rendered.
-Whether the rendered element should be enabled.
-Any validation errors that are caused by the data to be rendered.
-A unique ID that should be used for rendering the scoped UI schema element.
-Instance path the data is written to, in case of a control.
-All available renderers.
-The JSON schema that describes the data.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-Dispatch props of a table control
-Generated using TypeDoc
-Dispatch-based props of a Control.
-Update handler that emits a data change
-the path to the data to be updated
-the new value that should be written to the given path
-Generated using TypeDoc
-Generated using TypeDoc
-Props of an enum cell.
-All available cell renderers.
-Any configuration options for the element.
-The data to be rendered.
-Whether the rendered element should be enabled.
-Any validation errors that are caused by the data to be rendered.
-A unique ID that should be used for rendering the scoped UI schema element.
-Instance path the data is written to, in case of a control.
-All available renderers.
-The JSON schema that describes the data.
-Whether the rendered element should be visible.
-Update handler that emits a data change
-the path to the data to be updated
-the new value that should be written to the given path
-Generated using TypeDoc
-Generated using TypeDoc
-Interface for mapping a given type to a formatted string and back.
-Retrieve a value from a given string.
-the format string from which to obtain a value
-the obtained value
-Format the given value
-the value to be formatted
-the formatted string
-Generated using TypeDoc
-A group resembles a vertical layout, but additionally might have a label. - This layout is useful when grouping different elements by a certain criteria.
-The child elements of this layout.
-Label for UI schema element.
-Any additional options.
-An optional rule.
-Generated using TypeDoc
-A layout which orders its children horizontally (i.e. from left to right).
-The child elements of this layout.
-Any additional options.
-An optional rule.
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Whether the rendered element should be enabled.
-Optional instance path. Necessary when the actual data - path can not be inferred via the UI schema element as - it is the case with nested controls.
-The JSON schema that describes the data.
-The UI schema to be rendered.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-Generated using TypeDoc
-The state shape of JSONForms.
-Represents JSONForm's sub-state.
-Generated using TypeDoc
-JSONForms store.
-Dispatches an action. It is the only way to trigger a state change.
-The reducer function, used to create the store, will be called with the
- current state tree and the given action. Its return value will be
- considered the next state of the tree, and the change listeners will
- be notified.
The base implementation only supports plain object actions. If you want
- to dispatch a Promise, an Observable, a thunk, or something else, you
- need to wrap your store creating function into the corresponding
- middleware. For example, see the documentation for the redux-thunk
- package. Even the middleware will eventually dispatch plain object
- actions using this method.
Interoperability point for observable/reactive libraries.
-A minimal observable of state changes. - For more information, see the observable proposal: - https://github.com/tc39/proposal-observable
-Reads the state tree managed by the store.
-The current state tree of your application.
-Replaces the reducer currently used by the store to calculate the state.
-You might need this if your app implements code splitting and you want to - load some of the reducers dynamically. You might also need this if you - implement a hot reloading mechanism for Redux.
-The reducer for the store to use instead.
-Adds a change listener. It will be called any time an action is
- dispatched, and some part of the state tree may potentially have changed.
- You may then call getState() to read the current state tree inside the
- callback.
You may call dispatch() from a change listener, with the following
- caveats:
The subscriptions are snapshotted just before every dispatch() call.
- If you subscribe or unsubscribe while the listeners are being invoked,
- this will not have any effect on the dispatch() that is currently in
- progress. However, the next dispatch() call, whether nested or not,
- will use a more recent snapshot of the subscription list.
The listener should not expect to see all states changes, as the state
- might have been updated multiple times during a nested dispatch() before
- the listener is called. It is, however, guaranteed that all subscribers
- registered before the dispatch() started will be called with the latest
- state by the time it exits.
A callback to be invoked on every dispatch.
-A function to remove this change listener.
-Generated using TypeDoc
-All available cell renderers.
-Global configuration options.
-Substate for storing mandatory sub-state.
-I18n settings.
-If true, sets all controls to read-only.
-All available renderers.
-The UI schema registry used in detail renderers.
-Generated using TypeDoc
-Generated using TypeDoc
-It is recommended that the meta-schema is - included in the root of any JSON Schema
-Default json for the object represented by - this schema
-Holds simple JSON Schema definitions for - referencing from elsewhere.
-If the key is present as a property then the - string of properties must also be present. - If the value is a JSON Schema then it must - also be valid for the object if the key is - present.
-Schema description
-Enumerates the values that this schema can be - e.g. - {"type": "string", - "enum": ["red", "green", "blue"]}
-If true maximum must be > value, >= otherwise
-If true minimum must be < value, <= otherwise
-This is important because it tells refs where - the root of the document is located
-The value must be a multiple of the number - (e.g. 10 is a multiple of 5)
-The entity being validated must not match this schema
-This is a regex string that the value must - conform to
-The key of this object is a regex for which - properties the schema applies to
-The keys that can exist on the object with the - json schema that should validate their value
-Title of the schema
-The basic type of this schema, can be one of - [string, number, object, array, boolean, null] - or an array of the acceptable types
-Generated using TypeDoc
-This is important because it tells refs where - the root of the document is located
-It is recommended that the meta-schema is - included in the root of any JSON Schema
-Default json for the object represented by - this schema
-Holds simple JSON Schema definitions for - referencing from elsewhere.
-If the key is present as a property then the - string of properties must also be present. - If the value is a JSON Schema then it must - also be valid for the object if the key is - present.
-Schema description
-Enumerates the values that this schema can be - e.g. - {"type": "string", - "enum": ["red", "green", "blue"]}
-If true maximum must be > value, >= otherwise
-If true minimum must be < value, <= otherwise
-The value must be a multiple of the number - (e.g. 10 is a multiple of 5)
-The entity being validated must not match this schema
-This is a regex string that the value must - conform to
-The key of this object is a regex for which - properties the schema applies to
-The keys that can exist on the object with the - json schema that should validate their value
-Title of the schema
-The basic type of this schema, can be one of - [string, number, object, array, boolean, null] - or an array of the acceptable types
-Generated using TypeDoc
-Interface for describing an UI schema element that may be labeled.
-Label for UI schema element.
-Generated using TypeDoc
-Represents an object that can be used to configure a label.
-Optional property that determines whether to show this label.
-An optional text to be displayed.
-Generated using TypeDoc
-Interface for describing an UI schema element that is labeled.
-Generated using TypeDoc
-A label element.
-Any additional options.
-An optional rule.
-The text of label.
-Generated using TypeDoc
-All available cell renderers.
-Any configuration options for the element.
-The data to be rendered.
-Whether the rendered element should be enabled.
-Instance path the data is written to, in case of a control.
-All available renderers.
-The JSON schema that describes the data.
-The UI schema to be rendered.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-Represents a layout element which can order its children - in a specific way.
-The child elements of this layout.
-Any additional options.
-An optional rule.
-The type of this UI schema element.
-Generated using TypeDoc
-All available cell renderers.
-Any configuration options for the element.
-The data to be rendered.
-Direction for the layout to flow
-Whether the rendered element should be enabled.
-Instance path the data is written to, in case of a control.
-All available renderers.
-The JSON schema that describes the data.
-The UI schema to be rendered.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-A leaf condition.
-The expected value when evaluating the condition
-The scope that determines to which part this element should be bound to.
-Generated using TypeDoc
-An or condition.
-Generated using TypeDoc
-Whether the rendered element should be enabled.
-Optional instance path. Necessary when the actual data - path can not be inferred via the UI schema element as - it is the case with nested controls.
-The JSON schema that describes the data.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-Whether the rendered element should be enabled.
-Optional instance path. Necessary when the actual data - path can not be inferred via the UI schema element as - it is the case with nested controls.
-The JSON schema that describes the data.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-Generated using TypeDoc
-Whether the rendered element should be enabled.
-Optional instance path. Necessary when the actual data - path can not be inferred via the UI schema element as - it is the case with nested controls.
-The JSON schema that describes the data.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-Whether the rendered element should be enabled.
-Optional instance path. Necessary when the actual data - path can not be inferred via the UI schema element as - it is the case with nested controls.
-The JSON schema that describes the data.
-The UI schema to be rendered.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-Whether the rendered element should be enabled.
-Optional instance path. Necessary when the actual data - path can not be inferred via the UI schema element as - it is the case with nested controls.
-The JSON schema that describes the data.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-Whether the rendered element should be enabled.
-Optional instance path. Necessary when the actual data - path can not be inferred via the UI schema element as - it is the case with nested controls.
-The JSON schema that describes the data.
-The UI schema to be rendered.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-Generated using TypeDoc
-Whether the rendered element should be enabled.
-Optional instance path. Necessary when the actual data - path can not be inferred via the UI schema element as - it is the case with nested controls.
-The JSON schema that describes the data.
-The UI schema to be rendered.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-Map for storing refs and the respective schemas they are pointing to.
-Map for storing refs and the respective schemas they are pointing to.
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Props of a {@link Renderer}.
-All available cell renderers.
-Any configuration options for the element.
-The data to be rendered.
-Whether the rendered element should be enabled.
-Instance path the data is written to, in case of a control.
-All available renderers.
-The JSON schema that describes the data.
-The UI schema to be rendered.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-A rule that may be attached to any UI schema element.
-The condition of the rule that must evaluate to true in order - to trigger the effect.
-The effect of the rule
-Generated using TypeDoc
-Generated using TypeDoc
-Interface for describing an UI schema element that is referencing - a subschema. The value of the scope may be a JSON Pointer.
-The scope that determines to which part this element should be bound to.
-Generated using TypeDoc
-Interface for describing an UI schema element that is referencing - a subschema. The value of the scope must be a JSON Pointer.
-The scope that determines to which part this element should be bound to.
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-State-based props of a table control.
-Any configuration options for the element.
-The data to be rendered.
-Description of input cell
-Whether the rendered element should be enabled.
-Any validation errors that are caused by the data to be rendered.
-A unique ID that should be used for rendering the scoped UI schema element.
-The label for the rendered element.
-Instance path the data is written to, in case of a control.
-Whether the rendered data is required.
-The root schema as returned by the store.
-The JSON schema that describes the data.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-Any configuration options for the element.
-Description of input cell
-Whether the rendered element should be enabled.
-Any validation errors that are caused by the data to be rendered.
-A unique ID that should be used for rendering the scoped UI schema element.
-The label for the rendered element.
-Instance path the data is written to, in case of a control.
-Whether the rendered data is required.
-The root schema as returned by the store.
-The JSON schema that describes the data.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-State props of a cell.
-All available cell renderers.
-Any configuration options for the element.
-The data to be rendered.
-Whether the rendered element should be enabled.
-Any validation errors that are caused by the data to be rendered.
-A unique ID that should be used for rendering the scoped UI schema element.
-Instance path the data is written to, in case of a control.
-All available renderers.
-The JSON schema that describes the data.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-Any configuration options for the element.
-Description of input cell
-Whether the rendered element should be enabled.
-Any validation errors that are caused by the data to be rendered.
-The label for the rendered element.
-All available renderers.
-Whether the rendered data is required.
-The JSON schema that describes the data.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-State-based props of a Control
-Any configuration options for the element.
-The data to be rendered.
-Description of input cell
-Whether the rendered element should be enabled.
-Any validation errors that are caused by the data to be rendered.
-A unique ID that should be used for rendering the scoped UI schema element.
-The label for the rendered element.
-Instance path the data is written to, in case of a control.
-All available renderers.
-Whether the rendered data is required.
-The root schema as returned by the store.
-The JSON schema that describes the data.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-State-based props of a table control.
-Any configuration options for the element.
-The data to be rendered.
-Description of input cell
-Whether the rendered element should be enabled.
-Any validation errors that are caused by the data to be rendered.
-A unique ID that should be used for rendering the scoped UI schema element.
-The label for the rendered element.
-Instance path the data is written to, in case of a control.
-Whether the rendered data is required.
-The root schema as returned by the store.
-The JSON schema that describes the data.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-State props of a cell for enum cell
-All available cell renderers.
-Any configuration options for the element.
-The data to be rendered.
-Whether the rendered element should be enabled.
-Any validation errors that are caused by the data to be rendered.
-A unique ID that should be used for rendering the scoped UI schema element.
-Instance path the data is written to, in case of a control.
-All available renderers.
-The JSON schema that describes the data.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-Whether the rendered element should be enabled.
-Optional instance path. Necessary when the actual data - path can not be inferred via the UI schema element as - it is the case with nested controls.
-The JSON schema that describes the data.
-The UI schema to be rendered.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-All available cell renderers.
-Any configuration options for the element.
-The data to be rendered.
-Whether the rendered element should be enabled.
-Instance path the data is written to, in case of a control.
-All available renderers.
-The JSON schema that describes the data.
-The UI schema to be rendered.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-State props of a layout;
-All available cell renderers.
-Any configuration options for the element.
-The data to be rendered.
-Direction for the layout to flow
-Whether the rendered element should be enabled.
-Instance path the data is written to, in case of a control.
-All available renderers.
-The JSON schema that describes the data.
-The UI schema to be rendered.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-Generated using TypeDoc
-State-based props of a {@link Renderer}.
-All available cell renderers.
-Any configuration options for the element.
-The data to be rendered.
-Whether the rendered element should be enabled.
-Instance path the data is written to, in case of a control.
-All available renderers.
-The JSON schema that describes the data.
-The UI schema to be rendered.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-State-based properties for UI schema elements that have a scope.
-All available cell renderers.
-Any configuration options for the element.
-The data to be rendered.
-Whether the rendered element should be enabled.
-Any validation errors that are caused by the data to be rendered.
-A unique ID that should be used for rendering the scoped UI schema element.
-Instance path the data is written to, in case of a control.
-All available renderers.
-The root schema as returned by the store.
-The JSON schema that describes the data.
-Whether the rendered element should be visible.
-Generated using TypeDoc
-A store is an object that holds the application's state tree. - There should only be a single store in a Redux app, as the composition - happens on the reducer level.
-The type of state held by this store.
-the type of actions which may be dispatched by this store.
-Dispatches an action. It is the only way to trigger a state change.
-The reducer function, used to create the store, will be called with the
- current state tree and the given action. Its return value will be
- considered the next state of the tree, and the change listeners will
- be notified.
The base implementation only supports plain object actions. If you want
- to dispatch a Promise, an Observable, a thunk, or something else, you
- need to wrap your store creating function into the corresponding
- middleware. For example, see the documentation for the redux-thunk
- package. Even the middleware will eventually dispatch plain object
- actions using this method.
Interoperability point for observable/reactive libraries.
-A minimal observable of state changes. - For more information, see the observable proposal: - https://github.com/tc39/proposal-observable
-Reads the state tree managed by the store.
-The current state tree of your application.
-Replaces the reducer currently used by the store to calculate the state.
-You might need this if your app implements code splitting and you want to - load some of the reducers dynamically. You might also need this if you - implement a hot reloading mechanism for Redux.
-The reducer for the store to use instead.
-Adds a change listener. It will be called any time an action is
- dispatched, and some part of the state tree may potentially have changed.
- You may then call getState() to read the current state tree inside the
- callback.
You may call dispatch() from a change listener, with the following
- caveats:
The subscriptions are snapshotted just before every dispatch() call.
- If you subscribe or unsubscribe while the listeners are being invoked,
- this will not have any effect on the dispatch() that is currently in
- progress. However, the next dispatch() call, whether nested or not,
- will use a more recent snapshot of the subscription list.
The listener should not expect to see all states changes, as the state
- might have been updated multiple times during a nested dispatch() before
- the listener is called. It is, however, guaranteed that all subscribers
- registered before the dispatch() started will be called with the latest
- state by the time it exits.
A callback to be invoked on every dispatch.
-A function to remove this change listener.
-Generated using TypeDoc
-Additional context given to a tester in addition to UISchema and JsonSchema.
-The form wide configuration object given to JsonForms.
-The root JsonSchema of the form. Can be used to resolve references.
-Generated using TypeDoc
-Common base interface for any UI schema element.
-Any additional options.
-An optional rule.
-The type of this UI schema element.
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-A layout which orders its child elements vertically (i.e. from top to bottom).
-The child elements of this layout.
-Any additional options.
-An optional rule.
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
A dispatching function (or simply dispatch function) is a function that +accepts an action or an async action; it then may or may not dispatch one +or more actions to the store.
+We must distinguish between dispatching functions in general and the base
+dispatch function provided by the store instance without any middleware.
The base dispatch function always synchronously sends an action to the +store's reducer, along with the previous state returned by the store, to +calculate a new state. It expects actions to be plain objects ready to be +consumed by the reducer.
+Middleware wraps the base dispatch function. It allows the dispatch +function to handle async actions in addition to actions. Middleware may +transform, delay, ignore, or otherwise interpret actions or async actions +before passing them to the next middleware.
+Generated using TypeDoc
Generated using TypeDoc
Optional uischema: UISchemaElementGenerated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
A minimal observable of state changes. +For more information, see the observable proposal: +https://github.com/tc39/proposal-observable
+The minimal observable subscription method.
+An object with an unsubscribe method that can
+be used to unsubscribe the observable from the store, and prevent further
+emission of values from the observable.
Generated using TypeDoc
Generated using TypeDoc
A reducer (also called a reducing function) is a function that accepts +an accumulation and a value and returns a new accumulation. They are used +to reduce a collection of values down to a single value
+Reducers are not unique to Redux—they are a fundamental concept in
+functional programming. Even most non-functional languages, like
+JavaScript, have a built-in API for reducing. In JavaScript, it's
+Array.prototype.reduce().
In Redux, the accumulated value is the state object, and the values being +accumulated are actions. Reducers calculate a new state given the previous +state and an action. They must be pure functions—functions that return +the exact same output for given inputs. They should also be free of +side-effects. This is what enables exciting features like hot reloading and +time travel.
+Reducers are the most important concept in Redux.
+Do not put API calls into reducers.
+Generated using TypeDoc
Generated using TypeDoc
A ranked tester associates a tester with a number.
+Generated using TypeDoc
A tester is a function that receives an UI schema and a JSON schema and returns a boolean. +The rootSchema is handed over as context. Can be used to resolve references.
+Generated using TypeDoc
Optional values: anyOptional values: anyOptional defaultMessage: stringOptional values: anyGenerated using TypeDoc
Generated using TypeDoc
Function to remove listener added by Store.subscribe().
Generated using TypeDoc
Generated using TypeDoc
Optional i18n?: stringGenerated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Optional options: anyOptional layoutType: stringOptional prefix: stringOptional rootSchema: JsonSchemaGenerated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Convenience wrapper around resolveData and resolveSchema.
+Generated using TypeDoc
Const Generated using TypeDoc
Const Constant that indicates that a tester is not capable of handling +a combination of schema/data.
+Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
NOTE: Exotic components are not callable.
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
NOTE: Exotic components are not callable.
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
NOTE: Exotic components are not callable.
+Generated using TypeDoc
Generated using TypeDoc
NOTE: Exotic components are not callable.
+Generated using TypeDoc
NOTE: Exotic components are not callable.
+Generated using TypeDoc
NOTE: Exotic components are not callable.
+Generated using TypeDoc
NOTE: Exotic components are not callable.
+Generated using TypeDoc
NOTE: Exotic components are not callable.
+Generated using TypeDoc
NOTE: Exotic components are not callable.
+Generated using TypeDoc
NOTE: Exotic components are not callable.
+Generated using TypeDoc
NOTE: Exotic components are not callable.
+Generated using TypeDoc
Generated using TypeDoc
NOTE: Exotic components are not callable.
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Complex forms in the blink of an eye
+JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
+This is the JSON Forms Material Renderers Package. This package only contains renderers and must be combined with JSON Forms React.
+See the official documentation and the JSON Forms React seed repository for examples on how to integrate JSON Forms with your application.
+You can combine JSON Forms React with other renderers too, for example with the Vanilla Renderers.
+Check https://www.npmjs.com/search?q=%40jsonforms for all published JSONForms packages.
+Install JSON Forms Core, React and React Material Renderers
+npm i --save @jsonforms/core @jsonforms/react @jsonforms/material-renderers
+Use the JsonForms component for each form you want to render and hand over the renderer set.
import React, { useState } from 'react';
import {
materialRenderers,
materialCells,
} from '@jsonforms/material-renderers';
import { JsonForms } from '@jsonforms/react';
const schema = {
type: 'object',
properties: {
name: {
type: 'string',
minLength: 1,
},
done: {
type: 'boolean',
},
due_date: {
type: 'string',
format: 'date',
},
recurrence: {
type: 'string',
enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
},
},
required: ['name', 'due_date'],
};
const uischema = {
type: 'VerticalLayout',
elements: [
{
type: 'Control',
label: false,
scope: '#/properties/done',
},
{
type: 'Control',
scope: '#/properties/name',
},
{
type: 'HorizontalLayout',
elements: [
{
type: 'Control',
scope: '#/properties/due_date',
},
{
type: 'Control',
scope: '#/properties/recurrence',
},
],
},
],
};
const initialData = {};
function App() {
const [data, setData] = useState(initialData);
return (
<JsonForms
schema={schema}
uischema={uischema}
data={data}
renderers={materialRenderers}
cells={materialCells}
onChange={({ data, _errors }) => setData(data)}
/>
);
}
+The JSON Forms project is licensed under the MIT License. See the LICENSE file for more information.
+Our current roadmap is available here.
+JSON Forms is developed by EclipseSource.
+If you encounter any problems feel free to open an issue on the repo. +For questions and discussions please use the JSON Forms board. +You can also reach us via email. +In addition, EclipseSource also offers professional support for JSON Forms.
+See our migration guide when updating JSON Forms.
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Optional jsonformsOptional input?: { Optional delete?: { Optional background?: stringGenerated using TypeDoc
Optional cellsOptional enabledWhether the rendered element should be enabled.
+Optional labelOptional pathOptional instance path. Necessary when the actual data +path can not be inferred via the UI schema element as +it is the case with nested controls.
+Optional renderersOptional schemaThe JSON schema that describes the data.
+Optional uischemaThe UI schema to be rendered.
+Optional uischemasOptional visibleWhether the rendered element should be visible.
+Generated using TypeDoc
Optional cellsOptional enabledWhether the rendered element should be enabled.
+Optional pathOptional instance path. Necessary when the actual data +path can not be inferred via the UI schema element as +it is the case with nested controls.
+Optional renderersOptional schemaThe JSON schema that describes the data.
+Optional uischemaThe UI schema to be rendered.
+Optional uischemasOptional visibleWhether the rendered element should be visible.
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Optional filterOptional getOptional renderGenerated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Const Default renderer for a label.
+Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
This is the JSON Forms Material Renderers Package. This package only contains renderers and must be combined with JSON Forms React.
See the official documentation and the JSON Forms React seed repository for examples on how to integrate JSON Forms with your application.
-You can combine JSON Forms React with other renderers too, for example with the Vanilla Renderers.
+You can combine JSON Forms React with other renderers too, for example with the Vanilla Renderers.
Check https://www.npmjs.com/search?q=%40jsonforms for all published JSONForms packages.
A controlled component convenience wrapper that additionally manages a focused state.
+If using the new style context, re-declare this in your class to be the
+React.ContextType of your static contextType.
+Should be used with type annotation or static contextType.
static contextType = MyContext
// For TS pre-3.7:
context!: React.ContextType<typeof MyContext>
// For TS 3.7 and above:
declare context: React.ContextType<typeof MyContext>
+Readonly propsStatic Optional contextIf set, this.context will be set at runtime to the current value of the given Context.
Usage:
+type MyContext = number
const Ctx = React.createContext<MyContext>(0)
class Foo extends React.Component {
static contextType = Ctx
context!: React.ContextType<typeof Ctx>
render () {
return <>My context's value: {this.context}</>;
}
}
+Optional UNSAFE_Called immediately before mounting occurs, and before Component#render.
+Avoid introducing any side-effects or subscriptions in this method.
This method will not stop working in React 17.
+Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use componentDidMount or the constructor instead
+Optional UNSAFE_Called when the component may be receiving new props. +React may call this even if props have not changed, so be sure to compare new and existing +props if you only want to handle changes.
+Calling Component#setState generally does not trigger this method.
This method will not stop working in React 17.
+Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use static getDerivedStateFromProps instead
+Optional UNSAFE_Called immediately before rendering when new props or state is received. Not called for the initial render.
+Note: You cannot call Component#setState here.
This method will not stop working in React 17.
+Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use getSnapshotBeforeUpdate instead
+Optional componentOptional componentOptional componentOptional componentCalled immediately before mounting occurs, and before Component#render.
+Avoid introducing any side-effects or subscriptions in this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use componentDidMount or the constructor instead; will stop working in React 17
+Optional componentCalled when the component may be receiving new props. +React may call this even if props have not changed, so be sure to compare new and existing +props if you only want to handle changes.
+Calling Component#setState generally does not trigger this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use static getDerivedStateFromProps instead; will stop working in React 17
+Optional componentOptional componentCalled immediately before rendering when new props or state is received. Not called for the initial render.
+Note: You cannot call Component#setState here.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17
+Optional getRuns before React applies the result of render to the document, and
+returns an object to be given to componentDidUpdate. Useful for saving
+things such as scroll position before render causes changes to it.
Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated +lifecycle events from running.
+Optional shouldCalled to determine whether the change in props and state should trigger a re-render.
+Component always returns true.
+PureComponent implements a shallow comparison on props and state and returns true if any
+props or states have changed.
If false is returned, Component#render, componentWillUpdate
+and componentDidUpdate will not be called.
Private updateGenerated using TypeDoc
If using the new style context, re-declare this in your class to be the
+React.ContextType of your static contextType.
+Should be used with type annotation or static contextType.
static contextType = MyContext
// For TS pre-3.7:
context!: React.ContextType<typeof MyContext>
// For TS 3.7 and above:
declare context: React.ContextType<typeof MyContext>
+Readonly propsStatic Optional contextIf set, this.context will be set at runtime to the current value of the given Context.
Usage:
+type MyContext = number
const Ctx = React.createContext<MyContext>(0)
class Foo extends React.Component {
static contextType = Ctx
context!: React.ContextType<typeof Ctx>
render () {
return <>My context's value: {this.context}</>;
}
}
+Optional UNSAFE_Called immediately before mounting occurs, and before Component#render.
+Avoid introducing any side-effects or subscriptions in this method.
This method will not stop working in React 17.
+Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use componentDidMount or the constructor instead
+Optional UNSAFE_Called when the component may be receiving new props. +React may call this even if props have not changed, so be sure to compare new and existing +props if you only want to handle changes.
+Calling Component#setState generally does not trigger this method.
This method will not stop working in React 17.
+Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use static getDerivedStateFromProps instead
+Optional UNSAFE_Called immediately before rendering when new props or state is received. Not called for the initial render.
+Note: You cannot call Component#setState here.
This method will not stop working in React 17.
+Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use getSnapshotBeforeUpdate instead
+Optional componentOptional componentOptional componentCalled immediately after updating occurs. Not called for the initial render.
+The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.
+Optional snapshot: anyOptional componentCalled immediately before mounting occurs, and before Component#render.
+Avoid introducing any side-effects or subscriptions in this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use componentDidMount or the constructor instead; will stop working in React 17
+Optional componentCalled when the component may be receiving new props. +React may call this even if props have not changed, so be sure to compare new and existing +props if you only want to handle changes.
+Calling Component#setState generally does not trigger this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use static getDerivedStateFromProps instead; will stop working in React 17
+Optional componentCalled immediately before rendering when new props or state is received. Not called for the initial render.
+Note: You cannot call Component#setState here.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17
+Optional getRuns before React applies the result of render to the document, and
+returns an object to be given to componentDidUpdate. Useful for saving
+things such as scroll position before render causes changes to it.
Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated +lifecycle events from running.
+Optional shouldCalled to determine whether the change in props and state should trigger a re-render.
+Component always returns true.
+PureComponent implements a shallow comparison on props and state and returns true if any
+props or states have changed.
If false is returned, Component#render, componentWillUpdate
+and componentDidUpdate will not be called.
Generated using TypeDoc
Convenience wrapper around React's Component for constraining props.
+If using the new style context, re-declare this in your class to be the
+React.ContextType of your static contextType.
+Should be used with type annotation or static contextType.
static contextType = MyContext
// For TS pre-3.7:
context!: React.ContextType<typeof MyContext>
// For TS 3.7 and above:
declare context: React.ContextType<typeof MyContext>
+Readonly propsStatic Optional contextIf set, this.context will be set at runtime to the current value of the given Context.
Usage:
+type MyContext = number
const Ctx = React.createContext<MyContext>(0)
class Foo extends React.Component {
static contextType = Ctx
context!: React.ContextType<typeof Ctx>
render () {
return <>My context's value: {this.context}</>;
}
}
+Optional UNSAFE_Called immediately before mounting occurs, and before Component#render.
+Avoid introducing any side-effects or subscriptions in this method.
This method will not stop working in React 17.
+Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use componentDidMount or the constructor instead
+Optional UNSAFE_Called when the component may be receiving new props. +React may call this even if props have not changed, so be sure to compare new and existing +props if you only want to handle changes.
+Calling Component#setState generally does not trigger this method.
This method will not stop working in React 17.
+Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use static getDerivedStateFromProps instead
+Optional UNSAFE_Called immediately before rendering when new props or state is received. Not called for the initial render.
+Note: You cannot call Component#setState here.
This method will not stop working in React 17.
+Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use getSnapshotBeforeUpdate instead
+Optional componentOptional componentOptional componentOptional componentCalled immediately before mounting occurs, and before Component#render.
+Avoid introducing any side-effects or subscriptions in this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use componentDidMount or the constructor instead; will stop working in React 17
+Optional componentCalled when the component may be receiving new props. +React may call this even if props have not changed, so be sure to compare new and existing +props if you only want to handle changes.
+Calling Component#setState generally does not trigger this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use static getDerivedStateFromProps instead; will stop working in React 17
+Optional componentOptional componentCalled immediately before rendering when new props or state is received. Not called for the initial render.
+Note: You cannot call Component#setState here.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17
+Optional getRuns before React applies the result of render to the document, and
+returns an object to be given to componentDidUpdate. Useful for saving
+things such as scroll position before render causes changes to it.
Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated +lifecycle events from running.
+Optional shouldCalled to determine whether the change in props and state should trigger a re-render.
+Component always returns true.
+PureComponent implements a shallow comparison on props and state and returns true if any
+props or states have changed.
If false is returned, Component#render, componentWillUpdate
+and componentDidUpdate will not be called.
Generated using TypeDoc
Since Version 3.0 this optimization renderer is no longer necessary.
+Use JsonFormsDispatch instead.
+We still export it for backward compatibility
If using the new style context, re-declare this in your class to be the
+React.ContextType of your static contextType.
+Should be used with type annotation or static contextType.
static contextType = MyContext
// For TS pre-3.7:
context!: React.ContextType<typeof MyContext>
// For TS 3.7 and above:
declare context: React.ContextType<typeof MyContext>
+Readonly propsStatic Optional contextIf set, this.context will be set at runtime to the current value of the given Context.
Usage:
+type MyContext = number
const Ctx = React.createContext<MyContext>(0)
class Foo extends React.Component {
static contextType = Ctx
context!: React.ContextType<typeof Ctx>
render () {
return <>My context's value: {this.context}</>;
}
}
+Optional UNSAFE_Called immediately before mounting occurs, and before Component#render.
+Avoid introducing any side-effects or subscriptions in this method.
This method will not stop working in React 17.
+Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use componentDidMount or the constructor instead
+Optional UNSAFE_Called when the component may be receiving new props. +React may call this even if props have not changed, so be sure to compare new and existing +props if you only want to handle changes.
+Calling Component#setState generally does not trigger this method.
This method will not stop working in React 17.
+Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use static getDerivedStateFromProps instead
+Optional UNSAFE_Called immediately before rendering when new props or state is received. Not called for the initial render.
+Note: You cannot call Component#setState here.
This method will not stop working in React 17.
+Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use getSnapshotBeforeUpdate instead
+Optional componentOptional componentOptional componentCalled immediately after updating occurs. Not called for the initial render.
+The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.
+Optional snapshot: anyOptional componentCalled immediately before mounting occurs, and before Component#render.
+Avoid introducing any side-effects or subscriptions in this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use componentDidMount or the constructor instead; will stop working in React 17
+Optional componentCalled when the component may be receiving new props. +React may call this even if props have not changed, so be sure to compare new and existing +props if you only want to handle changes.
+Calling Component#setState generally does not trigger this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use static getDerivedStateFromProps instead; will stop working in React 17
+Optional componentCalled immediately before rendering when new props or state is received. Not called for the initial render.
+Note: You cannot call Component#setState here.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17
+Optional getRuns before React applies the result of render to the document, and
+returns an object to be given to componentDidUpdate. Useful for saving
+things such as scroll position before render causes changes to it.
Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated +lifecycle events from running.
+Optional shouldCalled to determine whether the change in props and state should trigger a re-render.
+Component always returns true.
+PureComponent implements a shallow comparison on props and state and returns true if any
+props or states have changed.
If false is returned, Component#render, componentWillUpdate
+and componentDidUpdate will not be called.
Generated using TypeDoc
A renderer that will be used in case no other renderer is applicable.
+If using the new style context, re-declare this in your class to be the
+React.ContextType of your static contextType.
+Should be used with type annotation or static contextType.
static contextType = MyContext
// For TS pre-3.7:
context!: React.ContextType<typeof MyContext>
// For TS 3.7 and above:
declare context: React.ContextType<typeof MyContext>
+Readonly propsStatic Optional contextIf set, this.context will be set at runtime to the current value of the given Context.
Usage:
+type MyContext = number
const Ctx = React.createContext<MyContext>(0)
class Foo extends React.Component {
static contextType = Ctx
context!: React.ContextType<typeof Ctx>
render () {
return <>My context's value: {this.context}</>;
}
}
+Optional UNSAFE_Called immediately before mounting occurs, and before Component#render.
+Avoid introducing any side-effects or subscriptions in this method.
This method will not stop working in React 17.
+Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use componentDidMount or the constructor instead
+Optional UNSAFE_Called when the component may be receiving new props. +React may call this even if props have not changed, so be sure to compare new and existing +props if you only want to handle changes.
+Calling Component#setState generally does not trigger this method.
This method will not stop working in React 17.
+Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use static getDerivedStateFromProps instead
+Optional UNSAFE_Called immediately before rendering when new props or state is received. Not called for the initial render.
+Note: You cannot call Component#setState here.
This method will not stop working in React 17.
+Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use getSnapshotBeforeUpdate instead
+Optional componentOptional componentOptional componentCalled immediately after updating occurs. Not called for the initial render.
+The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.
+Optional snapshot: anyOptional componentCalled immediately before mounting occurs, and before Component#render.
+Avoid introducing any side-effects or subscriptions in this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use componentDidMount or the constructor instead; will stop working in React 17
+Optional componentCalled when the component may be receiving new props. +React may call this even if props have not changed, so be sure to compare new and existing +props if you only want to handle changes.
+Calling Component#setState generally does not trigger this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use static getDerivedStateFromProps instead; will stop working in React 17
+Optional componentOptional componentCalled immediately before rendering when new props or state is received. Not called for the initial render.
+Note: You cannot call Component#setState here.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps +prevents this from being invoked.
+16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17
+Optional getRuns before React applies the result of render to the document, and
+returns an object to be given to componentDidUpdate. Useful for saving
+things such as scroll position before render causes changes to it.
Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated +lifecycle events from running.
+Optional callback: (() => void)Optional shouldCalled to determine whether the change in props and state should trigger a re-render.
+Component always returns true.
+PureComponent implements a shallow comparison on props and state and returns true if any
+props or states have changed.
If false is returned, Component#render, componentWillUpdate
+and componentDidUpdate will not be called.
Generated using TypeDoc
A controlled component convenience wrapper that additionally manages a focused state.
-control specific properties
-the state managed by the control
-Called immediately before mounting occurs, and before Component#render.
- Avoid introducing any side-effects or subscriptions in this method.
This method will not stop working in React 17.
-Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Called when the component may be receiving new props. - React may call this even if props have not changed, so be sure to compare new and existing - props if you only want to handle changes.
-Calling Component#setState generally does not trigger this method.
This method will not stop working in React 17.
-Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Called immediately before rendering when new props or state is received. Not called for the initial render.
-Note: You cannot call Component#setState here.
This method will not stop working in React 17.
-Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Catches exceptions generated in descendant components. Unhandled exceptions will cause - the entire component tree to unmount.
-Called immediately after a component is mounted. Setting state here will trigger re-rendering.
-Called immediately after updating occurs. Not called for the initial render.
-The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.
-Called immediately before mounting occurs, and before Component#render.
- Avoid introducing any side-effects or subscriptions in this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Called when the component may be receiving new props. - React may call this even if props have not changed, so be sure to compare new and existing - props if you only want to handle changes.
-Calling Component#setState generally does not trigger this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
- cancelled network requests, or cleaning up any DOM elements created in componentDidMount.
Called immediately before rendering when new props or state is received. Not called for the initial render.
-Note: You cannot call Component#setState here.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Runs before React applies the result of render to the document, and
- returns an object to be given to componentDidUpdate. Useful for saving
- things such as scroll position before render causes changes to it.
Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated - lifecycle events from running.
-Propagates a value change.
-the updated value
-Set the focused state to false.
-Set the focused state to true.
-Called to determine whether the change in props and state should trigger a re-render.
-Component always returns true.
- PureComponent implements a shallow comparison on props and state and returns true if any
- props or states have changed.
If false is returned, Component#render, componentWillUpdate
- and componentDidUpdate will not be called.
Generated using TypeDoc
-If using the new style context, re-declare this in your class to be the
- React.ContextType of your static contextType.
- Should be used with type annotation or static contextType.
static contextType = MyContext
-// For TS pre-3.7:
-context!: React.ContextType<typeof MyContext>
-// For TS 3.7 and above:
-declare context: React.ContextType<typeof MyContext>
-If set, this.context will be set at runtime to the current value of the given Context.
Usage:
-type MyContext = number
-const Ctx = React.createContext<MyContext>(0)
-
-class Foo extends React.Component {
- static contextType = Ctx
- context!: React.ContextType<typeof Ctx>
- render () {
- return <>My context's value: {this.context}</>;
- }
-}
-Called immediately before mounting occurs, and before Component#render.
- Avoid introducing any side-effects or subscriptions in this method.
This method will not stop working in React 17.
-Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Called when the component may be receiving new props. - React may call this even if props have not changed, so be sure to compare new and existing - props if you only want to handle changes.
-Calling Component#setState generally does not trigger this method.
This method will not stop working in React 17.
-Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Called immediately before rendering when new props or state is received. Not called for the initial render.
-Note: You cannot call Component#setState here.
This method will not stop working in React 17.
-Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Catches exceptions generated in descendant components. Unhandled exceptions will cause - the entire component tree to unmount.
-Called immediately after a component is mounted. Setting state here will trigger re-rendering.
-Called immediately after updating occurs. Not called for the initial render.
-The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.
-Called immediately before mounting occurs, and before Component#render.
- Avoid introducing any side-effects or subscriptions in this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Called when the component may be receiving new props. - React may call this even if props have not changed, so be sure to compare new and existing - props if you only want to handle changes.
-Calling Component#setState generally does not trigger this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Called immediately before rendering when new props or state is received. Not called for the initial render.
-Note: You cannot call Component#setState here.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Runs before React applies the result of render to the document, and
- returns an object to be given to componentDidUpdate. Useful for saving
- things such as scroll position before render causes changes to it.
Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated - lifecycle events from running.
-Called to determine whether the change in props and state should trigger a re-render.
-Component always returns true.
- PureComponent implements a shallow comparison on props and state and returns true if any
- props or states have changed.
If false is returned, Component#render, componentWillUpdate
- and componentDidUpdate will not be called.
Generated using TypeDoc
-Convenience wrapper around React's Component for constraining props.
-type of any renderer props
-state of the Renderer
-If using the new style context, re-declare this in your class to be the
- React.ContextType of your static contextType.
- Should be used with type annotation or static contextType.
static contextType = MyContext
-// For TS pre-3.7:
-context!: React.ContextType<typeof MyContext>
-// For TS 3.7 and above:
-declare context: React.ContextType<typeof MyContext>
-If set, this.context will be set at runtime to the current value of the given Context.
Usage:
-type MyContext = number
-const Ctx = React.createContext<MyContext>(0)
-
-class Foo extends React.Component {
- static contextType = Ctx
- context!: React.ContextType<typeof Ctx>
- render () {
- return <>My context's value: {this.context}</>;
- }
-}
-Called immediately before mounting occurs, and before Component#render.
- Avoid introducing any side-effects or subscriptions in this method.
This method will not stop working in React 17.
-Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Called when the component may be receiving new props. - React may call this even if props have not changed, so be sure to compare new and existing - props if you only want to handle changes.
-Calling Component#setState generally does not trigger this method.
This method will not stop working in React 17.
-Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Called immediately before rendering when new props or state is received. Not called for the initial render.
-Note: You cannot call Component#setState here.
This method will not stop working in React 17.
-Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Catches exceptions generated in descendant components. Unhandled exceptions will cause - the entire component tree to unmount.
-Called immediately after a component is mounted. Setting state here will trigger re-rendering.
-Called immediately after updating occurs. Not called for the initial render.
-The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.
-Called immediately before mounting occurs, and before Component#render.
- Avoid introducing any side-effects or subscriptions in this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Called when the component may be receiving new props. - React may call this even if props have not changed, so be sure to compare new and existing - props if you only want to handle changes.
-Calling Component#setState generally does not trigger this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
- cancelled network requests, or cleaning up any DOM elements created in componentDidMount.
Called immediately before rendering when new props or state is received. Not called for the initial render.
-Note: You cannot call Component#setState here.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Runs before React applies the result of render to the document, and
- returns an object to be given to componentDidUpdate. Useful for saving
- things such as scroll position before render causes changes to it.
Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated - lifecycle events from running.
-Called to determine whether the change in props and state should trigger a re-render.
-Component always returns true.
- PureComponent implements a shallow comparison on props and state and returns true if any
- props or states have changed.
If false is returned, Component#render, componentWillUpdate
- and componentDidUpdate will not be called.
Generated using TypeDoc
-Called immediately before mounting occurs, and before Component#render.
- Avoid introducing any side-effects or subscriptions in this method.
This method will not stop working in React 17.
-Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Called when the component may be receiving new props. - React may call this even if props have not changed, so be sure to compare new and existing - props if you only want to handle changes.
-Calling Component#setState generally does not trigger this method.
This method will not stop working in React 17.
-Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Called immediately before rendering when new props or state is received. Not called for the initial render.
-Note: You cannot call Component#setState here.
This method will not stop working in React 17.
-Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Catches exceptions generated in descendant components. Unhandled exceptions will cause - the entire component tree to unmount.
-Called immediately after a component is mounted. Setting state here will trigger re-rendering.
-Called immediately after updating occurs. Not called for the initial render.
-The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.
-Called immediately before mounting occurs, and before Component#render.
- Avoid introducing any side-effects or subscriptions in this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Called when the component may be receiving new props. - React may call this even if props have not changed, so be sure to compare new and existing - props if you only want to handle changes.
-Calling Component#setState generally does not trigger this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Called immediately before rendering when new props or state is received. Not called for the initial render.
-Note: You cannot call Component#setState here.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Runs before React applies the result of render to the document, and
- returns an object to be given to componentDidUpdate. Useful for saving
- things such as scroll position before render causes changes to it.
Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated - lifecycle events from running.
-Called to determine whether the change in props and state should trigger a re-render.
-Component always returns true.
- PureComponent implements a shallow comparison on props and state and returns true if any
- props or states have changed.
If false is returned, Component#render, componentWillUpdate
- and componentDidUpdate will not be called.
Generated using TypeDoc
-A renderer that will be used in case no other renderer is applicable.
-If using the new style context, re-declare this in your class to be the
- React.ContextType of your static contextType.
- Should be used with type annotation or static contextType.
static contextType = MyContext
-// For TS pre-3.7:
-context!: React.ContextType<typeof MyContext>
-// For TS 3.7 and above:
-declare context: React.ContextType<typeof MyContext>
-If set, this.context will be set at runtime to the current value of the given Context.
Usage:
-type MyContext = number
-const Ctx = React.createContext<MyContext>(0)
-
-class Foo extends React.Component {
- static contextType = Ctx
- context!: React.ContextType<typeof Ctx>
- render () {
- return <>My context's value: {this.context}</>;
- }
-}
-Called immediately before mounting occurs, and before Component#render.
- Avoid introducing any side-effects or subscriptions in this method.
This method will not stop working in React 17.
-Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Called when the component may be receiving new props. - React may call this even if props have not changed, so be sure to compare new and existing - props if you only want to handle changes.
-Calling Component#setState generally does not trigger this method.
This method will not stop working in React 17.
-Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Called immediately before rendering when new props or state is received. Not called for the initial render.
-Note: You cannot call Component#setState here.
This method will not stop working in React 17.
-Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Catches exceptions generated in descendant components. Unhandled exceptions will cause - the entire component tree to unmount.
-Called immediately after a component is mounted. Setting state here will trigger re-rendering.
-Called immediately after updating occurs. Not called for the initial render.
-The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.
-Called immediately before mounting occurs, and before Component#render.
- Avoid introducing any side-effects or subscriptions in this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Called when the component may be receiving new props. - React may call this even if props have not changed, so be sure to compare new and existing - props if you only want to handle changes.
-Calling Component#setState generally does not trigger this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
- cancelled network requests, or cleaning up any DOM elements created in componentDidMount.
Called immediately before rendering when new props or state is received. Not called for the initial render.
-Note: You cannot call Component#setState here.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps - prevents this from being invoked.
- -Runs before React applies the result of render to the document, and
- returns an object to be given to componentDidUpdate. Useful for saving
- things such as scroll position before render causes changes to it.
Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated - lifecycle events from running.
-Called to determine whether the change in props and state should trigger a re-render.
-Component always returns true.
- PureComponent implements a shallow comparison on props and state and returns true if any
- props or states have changed.
If false is returned, Component#render, componentWillUpdate
- and componentDidUpdate will not be called.
Generated using TypeDoc
-Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Optional removeGenerated using TypeDoc
Optional cells?: { Optional config?: anyAny configuration options for the element.
+Optional description?: stringDescription of input cell
+Whether the rendered element should be enabled.
+Any validation errors that are caused by the data to be rendered.
+Optional i18nThe label for the rendered element.
+Optional renderers?: JsonFormsRendererRegistryEntry[]All available renderers.
+Optional required?: booleanWhether the rendered data is required.
+The JSON schema that describes the data.
+Whether the rendered element should be visible.
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Optional cells?: JsonFormsCellRendererRegistryEntry[]All available cell renderers.
+Optional config?: anyAny configuration options for the element.
+The data to be rendered.
+Whether the rendered element should be enabled.
+Any validation errors that are caused by the data to be rendered.
+A unique ID that should be used for rendering the scoped UI schema element.
+Instance path the data is written to, in case of a control.
+Optional renderers?: JsonFormsRendererRegistryEntry[]All available renderers.
+The JSON schema that describes the data.
+Whether the rendered element should be visible.
+Generated using TypeDoc
Optional cells?: { Optional config?: anyAny configuration options for the element.
+The data to be rendered.
+Optional description?: stringDescription of input cell
+Whether the rendered element should be enabled.
+Any validation errors that are caused by the data to be rendered.
+Optional i18nA unique ID that should be used for rendering the scoped UI schema element.
+The label for the rendered element.
+Instance path the data is written to, in case of a control.
+Optional renderers?: JsonFormsRendererRegistryEntry[]All available renderers.
+Optional required?: booleanWhether the rendered data is required.
+The root schema as returned by the store.
+The JSON schema that describes the data.
+Whether the rendered element should be visible.
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Optional cells?: { Optional config?: anyAny configuration options for the element.
+The data to be rendered.
+Optional description?: stringDescription of input cell
+Whether the rendered element should be enabled.
+Any validation errors that are caused by the data to be rendered.
+Optional i18nA unique ID that should be used for rendering the scoped UI schema element.
+The label for the rendered element.
+Instance path the data is written to, in case of a control.
+Optional renderers?: JsonFormsRendererRegistryEntry[]All available renderers.
+Optional required?: booleanWhether the rendered data is required.
+The root schema as returned by the store.
+The JSON schema that describes the data.
+Whether the rendered element should be visible.
+Generated using TypeDoc
Optional cells?: JsonFormsCellRendererRegistryEntry[]All available cell renderers.
+Optional config?: anyAny configuration options for the element.
+The data to be rendered.
+Whether the rendered element should be enabled.
+Any validation errors that are caused by the data to be rendered.
+A unique ID that should be used for rendering the scoped UI schema element.
+Instance path the data is written to, in case of a control.
+Optional renderers?: JsonFormsRendererRegistryEntry[]All available renderers.
+The JSON schema that describes the data.
+Whether the rendered element should be visible.
+Generated using TypeDoc
Optional cells?: { Optional config?: anyAny configuration options for the element.
+The data to be rendered.
+Optional description?: stringDescription of input cell
+Whether the rendered element should be enabled.
+Any validation errors that are caused by the data to be rendered.
+Optional i18nA unique ID that should be used for rendering the scoped UI schema element.
+The label for the rendered element.
+Instance path the data is written to, in case of a control.
+Optional renderers?: JsonFormsRendererRegistryEntry[]All available renderers.
+Optional required?: booleanWhether the rendered data is required.
+The root schema as returned by the store.
+The JSON schema that describes the data.
+Whether the rendered element should be visible.
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Represents a Renderer, which might either be a component or a function.
-Stateless Renderer.
-type of any renderer props
-Dispatch renderer component for cells.
-Hook similar to useEffect with the difference that the effect
- is only executed from the second call onwards.
Generated using TypeDoc
-Complex forms in the blink of an eye
-JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
- -This is the JSON Forms React package which provides the necessary bindings for React. It uses JSON Forms Core.
-You can combine the react package with any react-based renderer set you want, for example the Material Renderers or the Vanilla Renderers.
-See the official documentation and the JSON Forms React seed repository for examples on how to integrate JSON Forms with your application.
-Check https://www.npmjs.com/search?q=%40jsonforms for all published JSON Forms packages.
- -Use the JsonForms component to render a form for your data.
Mandatory props:
-data: any - the data to showrenderers: JsonFormsRendererRegistryEntry[] - the React renderer set to useOptional props:
-schema: JsonSchema - the data schema for the given data. Will be generated when not given.uischema: UISchemaElement - the UI schema for the given data schema. Will be generated when not given.cells: JsonFormsCellRendererRegistryEntry[] - the React cell renderer set to useconfig: any - form-wide options. May contain default ui schema options.readonly: boolean - whether all controls shall be readonly.uischemas: JsonFormsUiSchemaEntry[] - registry for dynamic ui schema dispatchingvalidationMode: 'ValidateAndShow' | 'ValidateAndHide' | 'NoValidation' - the validation mode for the formajv: AJV - custom Ajv instance for the formonChange - callback which is called on each data change, containing the updated data and the validation result.Example:
-import React, { useState } from 'react';
-import {
- materialRenderers,
- materialCells,
-} from '@jsonforms/material-renderers';
-import { JsonForms } from '@jsonforms/react';
-
-const schema = {
- type: 'object',
- properties: {
- name: {
- type: 'string',
- minLength: 1,
- },
- done: {
- type: 'boolean',
- },
- due_date: {
- type: 'string',
- format: 'date',
- },
- recurrence: {
- type: 'string',
- enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
- },
- },
- required: ['name', 'due_date'],
-};
-const uischema = {
- type: 'VerticalLayout',
- elements: [
- {
- type: 'Control',
- label: false,
- scope: '#/properties/done',
- },
- {
- type: 'Control',
- scope: '#/properties/name',
- },
- {
- type: 'HorizontalLayout',
- elements: [
- {
- type: 'Control',
- scope: '#/properties/due_date',
- },
- {
- type: 'Control',
- scope: '#/properties/recurrence',
- },
- ],
- },
- ],
-};
-const initialData = {};
-function App() {
- const [data, setData] = useState(initialData);
- return (
- <JsonForms
- schema={schema}
- uischema={uischema}
- data={data}
- renderers={materialRenderers}
- cells={materialCells}
- onChange={({ data, _errors }) => setData(data)}
- />
- );
-}
-export default App;
-The JSON Forms project is licensed under the MIT License. See the LICENSE file for more information.
- -Our current roadmap is available here.
- -JSON Forms is developed by EclipseSource.
-If you encounter any problems feel free to open an issue on the repo. - For questions and discussions please use the JSON Forms board. - You can also reach us via email. - In addition, EclipseSource also offers professional support for JSON Forms.
- -See our migration guide when updating JSON Forms.
-Generated using TypeDoc
-Complex forms in the blink of an eye
+JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
+This is the JSON Forms React package which provides the necessary bindings for React. It uses JSON Forms Core.
+You can combine the react package with any react-based renderer set you want, for example the Material Renderers or the Vanilla Renderers.
+See the official documentation and the JSON Forms React seed repository for examples on how to integrate JSON Forms with your application.
+Check https://www.npmjs.com/search?q=%40jsonforms for all published JSON Forms packages.
+Use the JsonForms component to render a form for your data.
Mandatory props:
+data: any - the data to showrenderers: JsonFormsRendererRegistryEntry[] - the React renderer set to useOptional props:
+schema: JsonSchema - the data schema for the given data. Will be generated when not given.uischema: UISchemaElement - the UI schema for the given data schema. Will be generated when not given.cells: JsonFormsCellRendererRegistryEntry[] - the React cell renderer set to useconfig: any - form-wide options. May contain default ui schema options.readonly: boolean - whether all controls shall be readonly.uischemas: JsonFormsUiSchemaEntry[] - registry for dynamic ui schema dispatchingvalidationMode: 'ValidateAndShow' | 'ValidateAndHide' | 'NoValidation' - the validation mode for the formajv: AJV - custom Ajv instance for the formonChange - callback which is called on each data change, containing the updated data and the validation result.Example:
+import React, { useState } from 'react';
import {
materialRenderers,
materialCells,
} from '@jsonforms/material-renderers';
import { JsonForms } from '@jsonforms/react';
const schema = {
type: 'object',
properties: {
name: {
type: 'string',
minLength: 1,
},
done: {
type: 'boolean',
},
due_date: {
type: 'string',
format: 'date',
},
recurrence: {
type: 'string',
enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
},
},
required: ['name', 'due_date'],
};
const uischema = {
type: 'VerticalLayout',
elements: [
{
type: 'Control',
label: false,
scope: '#/properties/done',
},
{
type: 'Control',
scope: '#/properties/name',
},
{
type: 'HorizontalLayout',
elements: [
{
type: 'Control',
scope: '#/properties/due_date',
},
{
type: 'Control',
scope: '#/properties/recurrence',
},
],
},
],
};
const initialData = {};
function App() {
const [data, setData] = useState(initialData);
return (
<JsonForms
schema={schema}
uischema={uischema}
data={data}
renderers={materialRenderers}
cells={materialCells}
onChange={({ data, _errors }) => setData(data)}
/>
);
}
export default App;
+The JSON Forms project is licensed under the MIT License. See the LICENSE file for more information.
+Our current roadmap is available here.
+JSON Forms is developed by EclipseSource.
+If you encounter any problems feel free to open an issue on the repo. +For questions and discussions please use the JSON Forms board. +You can also reach us via email. +In addition, EclipseSource also offers professional support for JSON Forms.
+See our migration guide when updating JSON Forms.
+Generated using TypeDoc
Optional additionalOptional ajvOptional cellsOptional configOptional i18nOptional readonlyOptional schemaOptional uischemaOptional uischemasOptional validationGenerated using TypeDoc
Generated using TypeDoc
Optional cellsAll available cell renderers.
+Optional configGlobal configuration options.
+Optional coreSubstate for storing mandatory sub-state.
+Optional i18nI18n settings.
+Optional readonlyIf true, sets all controls to read-only.
+Optional renderersAll available renderers.
+Optional uischemasThe UI schema registry used in detail renderers.
+Generated using TypeDoc
Optional cellsAll available cell renderers.
+Optional configGlobal configuration options.
+Optional coreSubstate for storing mandatory sub-state.
+Optional dispatchOptional i18nI18n settings.
+Optional readonlyIf true, sets all controls to read-only.
+Optional renderersAll available renderers.
+Optional uischemasThe UI schema registry used in detail renderers.
+Generated using TypeDoc
Generated using TypeDoc
Props of an UnknownRenderer
+The type for which no renderer has been found.
+Generated using TypeDoc
Generated using TypeDoc
-Generated using TypeDoc
-All available cell renderers.
-Global configuration options.
-Substate for storing mandatory sub-state.
-I18n settings.
-If true, sets all controls to read-only.
-All available renderers.
-The UI schema registry used in detail renderers.
-Generated using TypeDoc
-Generated using TypeDoc
-All available cell renderers.
-Global configuration options.
-Substate for storing mandatory sub-state.
-I18n settings.
-If true, sets all controls to read-only.
-All available renderers.
-The UI schema registry used in detail renderers.
-Generated using TypeDoc
-Generated using TypeDoc
-Props of an UnknownRenderer
-The type for which no renderer has been found.
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
Represents a Renderer, which might either be a component or a function.
+Generated using TypeDoc
Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Since Version 3.0 this optimization component is no longer necessary.
+Use JsonFormsDispatch instead.
+We still export it for backward compatibility
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Add vanilla props to the return value of calling the given +mapStateToProps function.
+vanilla-specific control props
+Generated using TypeDoc
Add vanilla props to the return value of calling the given +mapStateToProps function.
+an existing mapStateToProps function for retrieving layout props
+vanilla specific layout props
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Complex forms in the blink of an eye
+JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
+This is the JSONForms Vanilla Renderers Package. This package only contains renderers and must be combined with JSON Forms React.
+You can combine JSON Forms React with other renderers too, for example with the Material Renderers.
+See the official documentation and the JSON Forms React seed repository for examples on how to integrate JSON Forms with your application.
+Check https://www.npmjs.com/search?q=%40jsonforms for all published JSONForms packages.
+If you want to customize styling, have a look at our styles guide.
+Install JSON Forms Core, React and React Vanilla Renderers
+npm i --save @jsonforms/core @jsonforms/react @jsonforms/vanilla-renderers
+Use the JsonForms component for each form you want to render and hand over the renderer set.
import React, { useState } from 'react';
import { JsonForms } from '@jsonforms/react';
import { vanillaCells, vanillaRenderers } from '@jsonforms/vanilla-renderers';
const schema = {
type: 'object',
properties: {
name: {
type: 'string',
minLength: 1,
},
done: {
type: 'boolean',
},
due_date: {
type: 'string',
format: 'date',
},
recurrence: {
type: 'string',
enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
},
},
required: ['name', 'due_date'],
};
const uischema = {
type: 'VerticalLayout',
elements: [
{
type: 'Control',
label: false,
scope: '#/properties/done',
},
{
type: 'Control',
scope: '#/properties/name',
},
{
type: 'HorizontalLayout',
elements: [
{
type: 'Control',
scope: '#/properties/due_date',
},
{
type: 'Control',
scope: '#/properties/recurrence',
},
],
},
],
};
const initialData = {};
function App() {
const [data, setData] = useState(initialData);
return (
<JsonForms
schema={schema}
uischema={uischema}
data={data}
renderers={vanillaRenderers}
cells={vanillaCells}
onChange={({ data, _errors }) => setData(data)}
/>
);
}
+The JSON Forms project is licensed under the MIT License. See the LICENSE file for more information.
+Our current roadmap is available here.
+JSON Forms is developed by EclipseSource.
+If you encounter any problems feel free to open an issue on the repo. +For questions and discussions please use the JSON Forms board. +You can also reach us via email. +In addition, EclipseSource also offers professional support for JSON Forms.
+See our migration guide when updating JSON Forms.
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
A style associates a name with a list of CSS class names or a function that calculates them.
+Rest ...args: any[]Generated using TypeDoc
Additional renderer props specific to vanilla renderers.
+Optional classOptional classOptional getOptional getGenerated using TypeDoc
Generated using TypeDoc
Optional classGenerated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Const Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Generated using TypeDoc
This is the JSONForms Vanilla Renderers Package. This package only contains renderers and must be combined with JSON Forms React.
-You can combine JSON Forms React with other renderers too, for example with the Material Renderers.
+You can combine JSON Forms React with other renderers too, for example with the Material Renderers.
See the official documentation and the JSON Forms React seed repository for examples on how to integrate JSON Forms with your application.
Check https://www.npmjs.com/search?q=%40jsonforms for all published JSONForms packages.
If you want to customize styling, have a look at our styles guide.
diff --git a/static/api/vue-vanilla/.nojekyll b/static/api/vue-vanilla/.nojekyll new file mode 100644 index 00000000..e2ac6616 --- /dev/null +++ b/static/api/vue-vanilla/.nojekyll @@ -0,0 +1 @@ +TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false. \ No newline at end of file diff --git a/static/api/vue-vanilla/assets/highlight.css b/static/api/vue-vanilla/assets/highlight.css new file mode 100644 index 00000000..6a21bf4d --- /dev/null +++ b/static/api/vue-vanilla/assets/highlight.css @@ -0,0 +1,120 @@ +:root { + --light-hl-0: #795E26; + --dark-hl-0: #DCDCAA; + --light-hl-1: #000000; + --dark-hl-1: #D4D4D4; + --light-hl-2: #A31515; + --dark-hl-2: #CE9178; + --light-hl-3: #0000FF; + --dark-hl-3: #569CD6; + --light-hl-4: #267F99; + --dark-hl-4: #4EC9B0; + --light-hl-5: #001080; + --dark-hl-5: #9CDCFE; + --light-hl-6: #800000; + --dark-hl-6: #808080; + --light-hl-7: #800000; + --dark-hl-7: #569CD6; + --light-hl-8: #AF00DB; + --dark-hl-8: #C586C0; + --light-hl-9: #0070C1; + --dark-hl-9: #4FC1FF; + --light-hl-10: #008000; + --dark-hl-10: #6A9955; + --light-hl-11: #098658; + --dark-hl-11: #B5CEA8; + --light-hl-12: #E50000; + --dark-hl-12: #9CDCFE; + --light-hl-13: #0000FF; + --dark-hl-13: #CE9178; + --light-code-background: #FFFFFF; + --dark-code-background: #1E1E1E; +} + +@media (prefers-color-scheme: light) { :root { + --hl-0: var(--light-hl-0); + --hl-1: var(--light-hl-1); + --hl-2: var(--light-hl-2); + --hl-3: var(--light-hl-3); + --hl-4: var(--light-hl-4); + --hl-5: var(--light-hl-5); + --hl-6: var(--light-hl-6); + --hl-7: var(--light-hl-7); + --hl-8: var(--light-hl-8); + --hl-9: var(--light-hl-9); + --hl-10: var(--light-hl-10); + --hl-11: var(--light-hl-11); + --hl-12: var(--light-hl-12); + --hl-13: var(--light-hl-13); + --code-background: var(--light-code-background); +} } + +@media (prefers-color-scheme: dark) { :root { + --hl-0: var(--dark-hl-0); + --hl-1: var(--dark-hl-1); + --hl-2: var(--dark-hl-2); + --hl-3: var(--dark-hl-3); + --hl-4: var(--dark-hl-4); + --hl-5: var(--dark-hl-5); + --hl-6: var(--dark-hl-6); + --hl-7: var(--dark-hl-7); + --hl-8: var(--dark-hl-8); + --hl-9: var(--dark-hl-9); + --hl-10: var(--dark-hl-10); + --hl-11: var(--dark-hl-11); + --hl-12: var(--dark-hl-12); + --hl-13: var(--dark-hl-13); + --code-background: var(--dark-code-background); +} } + +:root[data-theme='light'] { + --hl-0: var(--light-hl-0); + --hl-1: var(--light-hl-1); + --hl-2: var(--light-hl-2); + --hl-3: var(--light-hl-3); + --hl-4: var(--light-hl-4); + --hl-5: var(--light-hl-5); + --hl-6: var(--light-hl-6); + --hl-7: var(--light-hl-7); + --hl-8: var(--light-hl-8); + --hl-9: var(--light-hl-9); + --hl-10: var(--light-hl-10); + --hl-11: var(--light-hl-11); + --hl-12: var(--light-hl-12); + --hl-13: var(--light-hl-13); + --code-background: var(--light-code-background); +} + +:root[data-theme='dark'] { + --hl-0: var(--dark-hl-0); + --hl-1: var(--dark-hl-1); + --hl-2: var(--dark-hl-2); + --hl-3: var(--dark-hl-3); + --hl-4: var(--dark-hl-4); + --hl-5: var(--dark-hl-5); + --hl-6: var(--dark-hl-6); + --hl-7: var(--dark-hl-7); + --hl-8: var(--dark-hl-8); + --hl-9: var(--dark-hl-9); + --hl-10: var(--dark-hl-10); + --hl-11: var(--dark-hl-11); + --hl-12: var(--dark-hl-12); + --hl-13: var(--dark-hl-13); + --code-background: var(--dark-code-background); +} + +.hl-0 { color: var(--hl-0); } +.hl-1 { color: var(--hl-1); } +.hl-2 { color: var(--hl-2); } +.hl-3 { color: var(--hl-3); } +.hl-4 { color: var(--hl-4); } +.hl-5 { color: var(--hl-5); } +.hl-6 { color: var(--hl-6); } +.hl-7 { color: var(--hl-7); } +.hl-8 { color: var(--hl-8); } +.hl-9 { color: var(--hl-9); } +.hl-10 { color: var(--hl-10); } +.hl-11 { color: var(--hl-11); } +.hl-12 { color: var(--hl-12); } +.hl-13 { color: var(--hl-13); } +pre, code { background: var(--code-background); } diff --git a/static/api/vue-vanilla/assets/main.js b/static/api/vue-vanilla/assets/main.js new file mode 100644 index 00000000..7270cff8 --- /dev/null +++ b/static/api/vue-vanilla/assets/main.js @@ -0,0 +1,59 @@ +"use strict"; +"use strict";(()=>{var Pe=Object.create;var ne=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var Oe=Object.getOwnPropertyNames;var _e=Object.getPrototypeOf,Re=Object.prototype.hasOwnProperty;var Me=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports);var Fe=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of Oe(e))!Re.call(t,i)&&i!==n&&ne(t,i,{get:()=>e[i],enumerable:!(r=Ie(e,i))||r.enumerable});return t};var De=(t,e,n)=>(n=t!=null?Pe(_e(t)):{},Fe(e||!t||!t.__esModule?ne(n,"default",{value:t,enumerable:!0}):n,t));var ae=Me((se,oe)=>{(function(){var t=function(e){var n=new t.Builder;return n.pipeline.add(t.trimmer,t.stopWordFilter,t.stemmer),n.searchPipeline.add(t.stemmer),e.call(n,n),n.build()};t.version="2.3.9";t.utils={},t.utils.warn=function(e){return function(n){e.console&&console.warn&&console.warn(n)}}(this),t.utils.asString=function(e){return e==null?"":e.toString()},t.utils.clone=function(e){if(e==null)return e;for(var n=Object.create(null),r=Object.keys(e),i=0;iGenerated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Adds styles, appliedOptions and childUiSchema
+Generated using TypeDoc
Adds styles, isFocused, appliedOptions and onChange
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Complex Forms in the blink of an eye
+JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
+This is the JSON Forms Vue Vanilla renderers package which provides a HTML5-based renderer set for JSON Forms Vue.
+See our JSON Forms Vue seed repository to get started as quickly as possible.
+Install JSON Forms Core, Vue and Vue Vanilla Renderers
+npm i --save @jsonforms/core @jsonforms/vue @jsonforms/vue-vanilla
+Also add the packages to the transpile dependencies in the vue.config.js file:
module.exports = {
transpileDependencies: [
'@jsonforms/core',
'@jsonforms/vue',
'@jsonforms/vue-vanilla',
],
};
+Use the json-forms component for each form you want to render and hand over the renderer set.
<script>
import { JsonForms } from '@jsonforms/vue';
import { vanillaRenderers } from '@jsonforms/vue-vanilla';
import { defineComponent } from 'vue';
const renderers = [
...vanillaRenderers,
// here you can add custom renderers
];
export default defineComponent({
components: {
JsonForms,
},
data() {
return {
renderers: Object.freeze(renderers),
data: {
number: 5,
},
schema: {
properties: {
number: {
type: 'number',
},
},
},
uischema: {
type: 'VerticalLayout',
elements: [
{
type: 'Control',
scope: '#/properties/number',
},
],
},
};
},
methods: {
onChange(event) {
this.data = event.data;
},
},
});
</script>
<template>
<json-forms
:data="data"
:schema="schema"
:uischema="uischema"
:renderers="renderers"
@change="onChange"
/>
</template>
+By default the Vanilla Renderers don't apply any CSS at all.
+For a quick start you can use @jsonforms/vue-vanilla/vanilla.css.
For more information on how JSON Forms can be configured, please see the README of @jsonforms/vue.
Each rendered HTML element specifies a CSS class which can be used to style it. +This process can also be customized so that each element declares user-specified CSS classes. +Therefore JSON Forms Vue Vanilla can be integrated with any CSS-only UI framework quite easily.
+You can find the default CSS classes in `defaultStyles.ts.
+To render your own classes simply provide them as styles.
+These styles replace the defaultStyles.
+If you want to fall back to defaultStyles or combine them with your own classes you'll need to do so programmatically, e.g.:
<script>
import { JsonForms } from '@jsonforms/vue';
import {
defaultStyles,
mergeStyles,
vanillaRenderers,
} from '@jsonforms/vue-vanilla';
import { defineComponent } from 'vue';
// mergeStyles combines all classes from both styles definitions
const myStyles = mergeStyles(defaultStyles, {
control: { root: 'my-control' },
});
export default defineComponent({
name: 'app',
components: {
JsonForms,
},
data() {
return {
renderers: Object.freeze(vanillaRenderers),
data: {
number: 5,
},
schema: {
properties: {
number: {
type: 'number',
},
},
},
uischema: {
type: 'VerticalLayout',
elements: [
{
type: 'Control',
scope: '#/properties/number',
},
],
},
};
},
methods: {
onChange(event) {
this.data = event.data;
},
},
provide() {
return {
styles: myStyles,
};
},
});
</script>
<template>
<json-forms
:data="data"
:schema="schema"
:uischema="uischema"
:renderers="renderers"
@change="onChange"
/>
</template>
+You can also use specify styles in the ui schema via the options.styles property.
+Attributes specified here override the respective defaultStyles or provided styles.
+Attributes not specified here fall back to either the defaultStyles or provided styles.
{
"type": "Control",
"scope": "#/properties/name",
"options": {
"styles": {
"control": {
"root": "my-control-root"
}
}
}
}
+The JSONForms project is licensed under the MIT License. See the LICENSE file for more information.
+Our current roadmap is available here.
+See our migration guide when updating JSON Forms.
+Generated using TypeDoc
Optional focusOptional hideOptional showOptional stepGenerated using TypeDoc
Optional addOptional item?: stringOptional itemOptional itemOptional itemOptional itemOptional itemOptional itemOptional itemOptional itemOptional label?: stringOptional legend?: stringOptional noOptional root?: stringOptional description?: stringOptional error?: stringOptional input?: stringOptional label?: stringOptional option?: stringOptional root?: stringOptional select?: stringOptional textarea?: stringOptional wrapper?: stringOptional actions?: stringOptional body?: stringOptional buttonOptional buttonOptional root?: stringOptional title?: stringOptional item?: stringOptional label?: stringOptional root?: stringOptional item?: stringOptional root?: stringOptional root?: stringOptional item?: stringOptional root?: stringGenerated using TypeDoc
Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Const Generated using TypeDoc
Constructs a props declaration for Vue components which shall be used as +master list items.
+Generated using TypeDoc
Constructs a props declaration for Vue components which can be used +for registered renderers and cells. These are typically used in combination +with one of the provided bindings, e.g. 'useJsonFormsControl'.
+Use the generic type parameter when using a specialized binding, e.g.
+rendererProps<Layout>() in combination with useJsonFormsLayout or
+rendererProps<ControlElement>() in combination with useJsonFormsControl.
Generated using TypeDoc
Generated using TypeDoc
Provides bindings for 'Control' elements which resolve to 'allOf' schema elements.
+Access bindings via the provided reactive control object.
+Dispatch changes via the provided handleChange method.
Generated using TypeDoc
Provides bindings for 'Control' elements which resolve to 'anyOf' schema elements.
+Access bindings via the provided reactive control object.
+Dispatch changes via the provided handleChange method.
Generated using TypeDoc
Provides bindings for 'Control' elements which resolve to 'array' schema elements.
+Access bindings via the provided reactive control object.
+Dispatch changes via the provided handleChange method.
Generated using TypeDoc
Provides bindings for 'Control' elements which resolve to 'array' elements which +shall be rendered as a layout instead of a control.
+Access bindings via the provided reactive 'layout' object.
+Generated using TypeDoc
Provides bindings for cell elements. Cells are meant to show simple inputs, +for example without error validation, within a larger structure like tables.
+Access bindings via the provided reactive 'cell' object.
+Dispatch changes via the provided handleChange method.
Generated using TypeDoc
Provides generic bindings for 'Control' elements. +Should be used when no specialized bindings are appropriate.
+Access bindings via the provided reactive control object.
+Dispatch changes via the provided handleChange method.
Generated using TypeDoc
Provides bindings for 'Control' elements which can provide a 'detail', +for example array and object renderers.
+Access bindings via the provided reactive control object.
+Dispatch changes via the provided handleChange method.
Generated using TypeDoc
Provides bindings for a cell dispatcher. Cells are meant to show simple inputs, +for example without error validation, within a larger structure like tables.
+Access bindings via the provided reactive 'cell' object.
+Dispatch changes via the provided handleChange method.
Generated using TypeDoc
Provides bindings for enum cell elements. Cells are meant to show simple inputs, +for example without error validation, within a larger structure like tables.
+Access bindings via the provided reactive 'cell' object.
+Dispatch changes via the provided handleChange method.
Generated using TypeDoc
Provides bindings for 'Control' elements which resolve to 'enum' schema elements.
+Access bindings via the provided reactive control object.
+Dispatch changes via the provided handleChange method.
Generated using TypeDoc
Provides bindings for 'Label' elements.
+Access bindings via the provided reactive label object.
Generated using TypeDoc
Provides bindings for 'Layout' elements, e.g. VerticalLayout, HorizontalLayout, Group.
+Access bindings via the provided reactive 'layout' object.
+Generated using TypeDoc
Provides bindings for list elements of a master-list-detail control setup. +The element using this binding is not supposed to be registered as an own renderer +but used in a more specialized control.
+Access bindings via the provided reactive 'item' object.
+Generated using TypeDoc
Provides bindings for 'Control' elements which resolve to multiple choice enums.
+Access bindings via the provided reactive control object.
+Dispatch changes via the provided handleChange method.
Generated using TypeDoc
Provides bindings for 'Control' elements which resolve to 'oneOf' schema elements.
+Access bindings via the provided reactive control object.
+Dispatch changes via the provided handleChange method.
Generated using TypeDoc
Provides bindings for 'oneOf' enum cell elements. Cells are meant to show simple inputs, +for example without error validation, within a larger structure like tables.
+Access bindings via the provided reactive 'cell' object.
+Dispatch changes via the provided handleChange method.
Generated using TypeDoc
Provides bindings for 'Control' elements which resolve to manually constructed +'oneOf' enums. These are used to enhance enums with label support.
+Access bindings via the provided reactive control object.
+Dispatch changes via the provided handleChange method.
Generated using TypeDoc
Provides specialized bindings which can be used for any renderer. +Useful for meta elements like dispatchers.
+Access bindings via the provided reactive 'renderer' object.
+Generated using TypeDoc
Generated using TypeDoc
Complex forms in the blink of an eye
+JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
+This is the JSON Forms Vue package which provides the necessary bindings for Vue. It uses JSON Forms Core.
+See our JSON Forms Vue seed repository to get started as quickly as possible.
+Use the json-forms component for each form you want to render.
Mandatory props:
+data: any - the data to showrenderers: JsonFormsRendererRegistryEntry[] - the Vue renderer set to useOptional props:
+schema: JsonSchema - the data schema for the given data. Will be generated when not given.uischema: UISchemaElement - the ui schema for the given data schema. Will be generated when not given.cells: JsonFormsCellRendererRegistryEntry[] - the Vue cell renderer set to useconfig: any - form-wide options. May contain default ui schema options.readonly: boolean - whether all controls shall be readonly.uischemas: JsonFormsUiSchemaEntry[] - registry for dynamic ui schema dispatchingvalidationMode: 'ValidateAndShow' | 'ValidateAndHide' | 'NoValidation' - the validation mode for the formajv: AJV - custom Ajv instance for the formEvents:
+change: {data: any; errors: AJVError[]} - Whenever data and/or errors change this event is emitted.Example:
+<json-forms
:data="data"
:renderers="renderers"
:schema="schema"
:uischema="uischema"
@change="onChange"
/>
+export default defineComponent({
components: {
JsonForms,
},
data() {
return {
// freeze renderers for performance gains
renderers: Object.freeze(renderers),
data: {
number: 5,
},
schema: {
properties: {
number: {
type: 'number',
},
},
},
uischema: {
type: 'VerticalLayout',
elements: [
{
type: 'Control',
scope: '#/properties/number',
},
],
},
};
},
methods: {
onChange(event: JsonFormsChangeEvent) {
this.data = event.data;
},
},
});
+The @jsonforms/vue package offers JSON Forms Core bindings based on the composition API.
+These bindings handle the props given to the dispatch-renderer and use the JSON Forms Core to determine specialized inputs for many use cases like validation and rule-based visibility.
+Using these bindings as a basis, it's straightforward to create renderer sets for Vue 3.
import { ControlElement } from '@jsonforms/core';
import { defineComponent } from 'vue';
import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';
const controlRenderer = defineComponent({
name: 'control-renderer',
props: {
...rendererProps<ControlElement>(),
},
setup(props) {
return useJsonFormsControl(props);
},
methods: {
onChange(event: Event) {
this.handleChange(
this.control.path,
(event.target as HTMLInputElement).value
);
},
},
});
export default controlRenderer;
+rendererProps factory which declares all props required for each renderer.
+When using Typescript you can specify a UISchemaElement type to declare that you only expect UI schema elements of that type.setup call the appropriate binding for your renderer.
+Here we use useJsonFormsControl which will work on any Control element and provides a control property containing calculated attributes like data, description, errors, enabled and many more.
+It also provides a handleChange(path,value) method with which the managed data can be updated.<div>
<input v-bind:value="control.data" @change="onChange" />
<div class="error" v-if="control.errors">{{ control.errors }}</div>
</div>
+This is a very simplified template for such a control.
+You can see how some of the control properties are bound against the input, including the handleChange method via onChange.
import {
isControl,
JsonFormsRendererRegistryEntry,
rankWith,
} from '@jsonforms/core';
export const entry: JsonFormsRendererRegistryEntry = {
renderer: controlRenderer,
tester: rankWith(1, isControl),
};
+It's convenient to create the JsonFormsRendererRegistryEntry within the same file as the renderer.
+Here it's ranked with priority 1 (higher is better) for any UI schema element which satisfies isControl.
These entries can then be collected and form the Vue renderer set handed over to the json-forms component.
The principle is the same as with the control example.
+The only difference here is the use of the provided dispatch-renderer which will determine the next renderer to use, based on its inputs.
import {
isLayout,
JsonFormsRendererRegistryEntry,
Layout,
rankWith,
} from '@jsonforms/core';
import { defineComponent } from 'vue';
import {
DispatchRenderer,
rendererProps,
useJsonFormsLayout,
} from '@jsonforms/vue';
const layoutRenderer = defineComponent({
name: 'layout-renderer',
components: {
DispatchRenderer,
},
props: {
...rendererProps<Layout>(),
},
setup(props) {
return useJsonFormsLayout(props);
},
});
export default layoutRenderer;
export const entry: JsonFormsRendererRegistryEntry = {
renderer: layoutRenderer,
tester: rankWith(1, isLayout),
};
+<div>
<div
v-for="(element, index) in layout.uischema.elements"
v-bind:key="`${layout.path}-${index}`"
>
<dispatch-renderer
v-bind:schema="layout.schema"
v-bind:uischema="element"
v-bind:path="layout.path"
v-bind:enabled="layout.enabled"
v-bind:renderers="layout.renderers"
v-bind:cells="layout.cells"
/>
</div>
</div>
+The dispatch renderer is used to dispatch to the highest ranked registered renderer.
+Required props are schema, uischema and path.
+Optional props are enabled, renderers and cells.
+These can be used to implement more advanced use cases like hierarchical enablement and dynamically adapted renderer / cell sets.
The following bindings can be used for Control elements and provide a control property and handleChange method.
+The useJsonFormsArrayControl additionally provides addItem, removeItems, moveUp and moveDown methods.
useJsonFormsControluseJsonFormsControlWithDetailuseJsonFormsEnumControluseJsonFormsOneOfEnumControluseJsonFormsArrayControluseJsonFormsAllOfControluseJsonFormsAnyOfControluseJsonFormsOneOfControlThe following bindings can be used for Layout elements and provide a layout property.
+useJsonFormsArrayLayout is a mix between Control and Layout as it's meant for showing array elements within a specific layout.
useJsonFormsLayoutuseJsonFormsArrayLayoutThe following binding can be used for any renderer.
+It's main use case is within dispatch renderers.
+The binding provides a renderer property.
useJsonFormsRendererBesides renderers JSON Forms also supports a separate cells registry.
+Cells are meant to be simpler as normal renderers, rendering simplified inputs to be used within more complex structures like tables.
+The following bindings can be used for cells and provide a cell property and handleChange method.
useJsonFormsDispatchCelluseJsonFormsCelluseJsonFormsEnumCellThe last binding is a special one, meant to be used within lists of master-detail controls.
+In contrast to all other bindings it's not meant to be registered as an own renderer or cell.
+The binding provides an item propery.
useJsonFormsMasterListItemShould any of the provided bindings not completely match an intended use case, then you can create your own.
+When constructing a new binding you might want to access the injected raw jsonforms object and dispatch method, e.g.
import { inject } from 'vue';
const useCustomBinding = (props) => {
const jsonforms = inject<JsonFormsSubStates>('jsonforms');
const dispatch = inject<Dispatch<CoreActions>>('dispatch');
return {
// use props, jsonforms and dispatch to construct own binding
};
};
+Of course these can also be directly injected into your components, e.g.
+const myComponent = defineComponent({
inject: ['jsonforms', 'dispatch'],
});
+The injected jsonforms object is not meant to be modified directly.
+Instead it should be modified via the provided dispatch and by changing the props of the json-forms component.
The JSON Forms project is licensed under the MIT License. See the LICENSE file for more information.
+Our current roadmap is available here.
+JSON Forms is developed by EclipseSource.
+If you encounter any problems feel free to open an issue on the repo. +For questions and discussions please use the JSON Forms board. +You can also reach us via email. +In addition, EclipseSource also offers professional support for JSON Forms.
+See our migration guide when updating JSON Forms.
+Generated using TypeDoc
Optional cellsOptional configOptional enabledOptional renderersGenerated using TypeDoc
Optional cellsOptional configOptional enabledOptional renderersGenerated using TypeDoc
Optional cellsOptional configOptional enabledOptional renderersGenerated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Helper function to merge two styles definitions. The contained classes will be combined, not overwritten.
-Example usage:
-const myStyles = mergeStyles(defaultStyles, { control: { root: 'mycontrol' } });
-Adds styles, appliedOptions and childUiSchema
-Adds styles, isFocused, appliedOptions and onChange
-Adds styles and appliedOptions
-Adds styles and appliedOptions
-Generated using TypeDoc
-Complex Forms in the blink of an eye
-JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
- -This is the JSON Forms Vue Vanilla renderers package which provides a HTML5-based renderer set for JSON Forms Vue.
- -See our JSON Forms Vue seed repository to get started as quickly as possible.
- -Install JSON Forms Core, Vue and Vue Vanilla Renderers
-npm i --save @jsonforms/core @jsonforms/vue @jsonforms/vue-vanilla
-Also add the packages to the transpile dependencies in the vue.config.js file:
module.exports = {
- transpileDependencies: [
- '@jsonforms/core',
- '@jsonforms/vue2',
- '@jsonforms/vue2-vanilla',
- ],
-};
-Use the json-forms component for each form you want to render and hand over the renderer set.
<script>
-import { JsonForms } from '@jsonforms/vue';
-import { vanillaRenderers } from '@jsonforms/vue-vanilla';
-import { defineComponent } from 'vue';
-
-const renderers = [
- ...vanillaRenderers,
- // here you can add custom renderers
-];
-
-export default defineComponent({
- components: {
- JsonForms,
- },
- data() {
- return {
- renderers: Object.freeze(renderers),
-
- data: {
- number: 5,
- },
- schema: {
- properties: {
- number: {
- type: 'number',
- },
- },
- },
- uischema: {
- type: 'VerticalLayout',
- elements: [
- {
- type: 'Control',
- scope: '#/properties/number',
- },
- ],
- },
- };
- },
- methods: {
- onChange(event) {
- this.data = event.data;
- },
- },
-});
-</script>
-<template>
- <json-forms
- :data="data"
- :schema="schema"
- :uischema="uischema"
- :renderers="renderers"
- @change="onChange"
- />
-</template>
-By default the Vanilla Renderers don't apply any CSS at all.
- For a quick start you can use @jsonforms/vue-vanilla/vanilla.css.
For more information on how JSON Forms can be configured, please see the README of @jsonforms/vue.
Each rendered HTML element specifies a CSS class which can be used to style it. - This process can also be customized so that each element declares user-specified CSS classes. - Therefore JSON Forms Vue Vanilla can be integrated with any CSS-only UI framework quite easily.
-You can find the default CSS classes in defaultStyles.ts.
-To render your own classes simply provide them as styles.
- These styles replace the defaultStyles.
- If you want to fall back to defaultStyles or combine them with your own classes you'll need to do so programmatically, e.g.:
<script>
-import { JsonForms } from '@jsonforms/vue';
-import {
- defaultStyles,
- mergeStyles,
- vanillaRenderers,
-} from '@jsonforms/vue-vanilla';
-import { defineComponent } from 'vue';
-
-// mergeStyles combines all classes from both styles definitions
-const myStyles = mergeStyles(defaultStyles, {
- control: { root: 'my-control' },
-});
-
-export default defineComponent({
- name: 'app',
- components: {
- JsonForms,
- },
- data() {
- return {
- renderers: Object.freeze(vanillaRenderers),
- data: {
- number: 5,
- },
- schema: {
- properties: {
- number: {
- type: 'number',
- },
- },
- },
- uischema: {
- type: 'VerticalLayout',
- elements: [
- {
- type: 'Control',
- scope: '#/properties/number',
- },
- ],
- },
- };
- },
- methods: {
- onChange(event) {
- this.data = event.data;
- },
- },
- provide() {
- return {
- styles: myStyles,
- };
- },
-});
-</script>
-<template>
- <json-forms
- :data="data"
- :schema="schema"
- :uischema="uischema"
- :renderers="renderers"
- @change="onChange"
- />
-</template>
-You can also use specify styles in the ui schema via the options.styles property.
- Attributes specified here override the respective defaultStyles or provided styles.
- Attributes not specified here fall back to either the defaultStyles or provided styles.
{
- "type": "Control",
- "scope": "#/properties/name",
- "options": {
- "styles": {
- "control": {
- "root": "my-control-root"
- }
- }
- }
-}
-The JSONForms project is licensed under the MIT License. See the LICENSE file for more information.
- -Our current roadmap is available here.
- -See our migration guide when updating JSON Forms.
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Constructs a props declaration for Vue components which shall be used as - master list items.
-Constructs a props declaration for Vue components which can be used - for registered renderers and cells. These are typically used in combination - with one of the provided bindings, e.g. 'useJsonFormsControl'.
-Use the generic type parameter when using a specialized binding, e.g.
- rendererProps<Layout>() in combination with useJsonFormsLayout or
- rendererProps<ControlElement>() in combination with useJsonFormsControl.
Provides bindings for 'Control' elements which resolve to 'allOf' schema elements.
-Access bindings via the provided reactive control object.
- Dispatch changes via the provided handleChange method.
Provides bindings for 'Control' elements which resolve to 'anyOf' schema elements.
-Access bindings via the provided reactive control object.
- Dispatch changes via the provided handleChange method.
Provides bindings for 'Control' elements which resolve to 'array' schema elements.
-Access bindings via the provided reactive control object.
- Dispatch changes via the provided handleChange method.
Provides bindings for 'Control' elements which resolve to 'array' elements which - shall be rendered as a layout instead of a control.
-Access bindings via the provided reactive 'layout' object.
-Provides bindings for cell elements. Cells are meant to show simple inputs, - for example without error validation, within a larger structure like tables.
-Access bindings via the provided reactive 'cell' object.
- Dispatch changes via the provided handleChange method.
Provides generic bindings for 'Control' elements. - Should be used when no specialized bindings are appropriate.
-Access bindings via the provided reactive control object.
- Dispatch changes via the provided handleChange method.
Provides bindings for 'Control' elements which can provide a 'detail', - for example array and object renderers.
-Access bindings via the provided reactive control object.
- Dispatch changes via the provided handleChange method.
Provides bindings for a cell dispatcher. Cells are meant to show simple inputs, - for example without error validation, within a larger structure like tables.
-Access bindings via the provided reactive 'cell' object.
- Dispatch changes via the provided handleChange method.
Provides bindings for enum cell elements. Cells are meant to show simple inputs, - for example without error validation, within a larger structure like tables.
-Access bindings via the provided reactive 'cell' object.
- Dispatch changes via the provided handleChange method.
Provides bindings for 'Control' elements which resolve to 'enum' schema elements.
-Access bindings via the provided reactive control object.
- Dispatch changes via the provided handleChange method.
Provides bindings for 'Label' elements.
-Access bindings via the provided reactive label object.
Provides bindings for 'Layout' elements, e.g. VerticalLayout, HorizontalLayout, Group.
-Access bindings via the provided reactive 'layout' object.
-Provides bindings for list elements of a master-list-detail control setup. - The element using this binding is not supposed to be registered as an own renderer - but used in a more specialized control.
-Access bindings via the provided reactive 'item' object.
-Provides bindings for 'Control' elements which resolve to multiple choice enums.
-Access bindings via the provided reactive control object.
- Dispatch changes via the provided handleChange method.
Provides bindings for 'Control' elements which resolve to 'oneOf' schema elements.
-Access bindings via the provided reactive control object.
- Dispatch changes via the provided handleChange method.
Provides bindings for 'oneOf' enum cell elements. Cells are meant to show simple inputs, - for example without error validation, within a larger structure like tables.
-Access bindings via the provided reactive 'cell' object.
- Dispatch changes via the provided handleChange method.
Provides bindings for 'Control' elements which resolve to manually constructed - 'oneOf' enums. These are used to enhance enums with label support.
-Access bindings via the provided reactive control object.
- Dispatch changes via the provided handleChange method.
Provides specialized bindings which can be used for any renderer. - Useful for meta elements like dispatchers.
-Access bindings via the provided reactive 'renderer' object.
-Generated using TypeDoc
-Complex forms in the blink of an eye
-JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
- -This is the JSON Forms Vue package which provides the necessary bindings for Vue. It uses JSON Forms Core.
- -See our JSON Forms Vue seed repository to get started as quickly as possible.
- -Use the json-forms component for each form you want to render.
Mandatory props:
-data: any - the data to showrenderers: JsonFormsRendererRegistryEntry[] - the Vue renderer set to useOptional props:
-schema: JsonSchema - the data schema for the given data. Will be generated when not given.uischema: UISchemaElement - the ui schema for the given data schema. Will be generated when not given.cells: JsonFormsCellRendererRegistryEntry[] - the Vue cell renderer set to useconfig: any - form-wide options. May contain default ui schema options.readonly: boolean - whether all controls shall be readonly.uischemas: JsonFormsUiSchemaEntry[] - registry for dynamic ui schema dispatchingvalidationMode: 'ValidateAndShow' | 'ValidateAndHide' | 'NoValidation' - the validation mode for the formajv: AJV - custom Ajv instance for the formEvents:
-change: {data: any; errors: AJVError[]} - Whenever data and/or errors change this event is emitted.Example:
-<json-forms
- :data="data"
- :renderers="renderers"
- :schema="schema"
- :uischema="uischema"
- @change="onChange"
-/>
-export default defineComponent({
- components: {
- JsonForms,
- },
- data() {
- return {
- // freeze renderers for performance gains
- renderers: Object.freeze(renderers),
- data: {
- number: 5,
- },
- schema: {
- properties: {
- number: {
- type: 'number',
- },
- },
- },
- uischema: {
- type: 'VerticalLayout',
- elements: [
- {
- type: 'Control',
- scope: '#/properties/number',
- },
- ],
- },
- };
- },
- methods: {
- onChange(event: JsonFormsChangeEvent) {
- this.data = event.data;
- },
- },
-});
-The @jsonforms/vue package offers JSON Forms Core bindings based on the composition API.
- These bindings handle the props given to the dispatch-renderer and use the JSON Forms Core to determine specialized inputs for many use cases like validation and rule-based visibility.
- Using these bindings as a basis, it's straightforward to create renderer sets for Vue 3.
import { ControlElement } from '@jsonforms/core';
-import { defineComponent } from 'vue';
-import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';
-
-const controlRenderer = defineComponent({
- name: 'control-renderer',
- props: {
- ...rendererProps<ControlElement>(),
- },
- setup(props) {
- return useJsonFormsControl(props);
- },
- methods: {
- onChange(event: Event) {
- this.handleChange(
- this.control.path,
- (event.target as HTMLInputElement).value
- );
- },
- },
-});
-export default controlRenderer;
-rendererProps factory which declares all props required for each renderer.
- When using Typescript you can specify a UISchemaElement type to declare that you only expect UI schema elements of that type.setup call the appropriate binding for your renderer.
- Here we use useJsonFormsControl which will work on any Control element and provides a control property containing calculated attributes like data, description, errors, enabled and many more.
- It also provides a handleChange(path,value) method with which the managed data can be updated.<div>
- <input v-bind:value="control.data" @change="onChange" />
- <div class="error" v-if="control.errors">{{ control.errors }}</div>
-</div>
-This is a very simplified template for such a control.
- You can see how some of the control properties are bound against the input, including the handleChange method via onChange.
import {
- isControl,
- JsonFormsRendererRegistryEntry,
- rankWith,
-} from '@jsonforms/core';
-export const entry: JsonFormsRendererRegistryEntry = {
- renderer: controlRenderer,
- tester: rankWith(1, isControl),
-};
-It's convenient to create the JsonFormsRendererRegistryEntry within the same file as the renderer.
- Here it's ranked with priority 1 (higher is better) for any UI schema element which satisfies isControl.
These entries can then be collected and form the Vue renderer set handed over to the json-forms component.
The principle is the same as with the control example.
- The only difference here is the use of the provided dispatch-renderer which will determine the next renderer to use, based on its inputs.
import {
- isLayout,
- JsonFormsRendererRegistryEntry,
- Layout,
- rankWith,
-} from '@jsonforms/core';
-import { defineComponent } from 'vue';
-import {
- DispatchRenderer,
- rendererProps,
- useJsonFormsLayout,
-} from '@jsonforms/vue';
-
-const layoutRenderer = defineComponent({
- name: 'layout-renderer',
- components: {
- DispatchRenderer,
- },
- props: {
- ...rendererProps<Layout>(),
- },
- setup(props) {
- return useJsonFormsLayout(props);
- },
-});
-
-export default layoutRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
- renderer: layoutRenderer,
- tester: rankWith(1, isLayout),
-};
-<div>
- <div
- v-for="(element, index) in layout.uischema.elements"
- v-bind:key="`${layout.path}-${index}`"
- >
- <dispatch-renderer
- v-bind:schema="layout.schema"
- v-bind:uischema="element"
- v-bind:path="layout.path"
- v-bind:enabled="layout.enabled"
- v-bind:renderers="layout.renderers"
- v-bind:cells="layout.cells"
- />
- </div>
-</div>
-The dispatch renderer is used to dispatch to the highest ranked registered renderer.
-Required props are schema, uischema and path.
- Optional props are enabled, renderers and cells.
- These can be used to implement more advanced use cases like hierarchical enablement and dynamically adapted renderer / cell sets.
The following bindings can be used for Control elements and provide a control property and handleChange method.
- The useJsonFormsArrayControl additionally provides addItem, removeItems, moveUp and moveDown methods.
useJsonFormsControluseJsonFormsControlWithDetailuseJsonFormsEnumControluseJsonFormsOneOfEnumControluseJsonFormsArrayControluseJsonFormsAllOfControluseJsonFormsAnyOfControluseJsonFormsOneOfControlThe following bindings can be used for Layout elements and provide a layout property.
- useJsonFormsArrayLayout is a mix between Control and Layout as it's meant for showing array elements within a specific layout.
useJsonFormsLayoutuseJsonFormsArrayLayoutThe following binding can be used for any renderer.
- It's main use case is within dispatch renderers.
- The binding provides a renderer property.
useJsonFormsRendererBesides renderers JSON Forms also supports a separate cells registry.
- Cells are meant to be simpler as normal renderers, rendering simplified inputs to be used within more complex structures like tables.
- The following bindings can be used for cells and provide a cell property and handleChange method.
useJsonFormsDispatchCelluseJsonFormsCelluseJsonFormsEnumCellThe last binding is a special one, meant to be used within lists of master-detail controls.
- In contrast to all other bindings it's not meant to be registered as an own renderer or cell.
- The binding provides an item propery.
useJsonFormsMasterListItemShould any of the provided bindings not completely match an intended use case, then you can create your own.
- When constructing a new binding you might want to access the injected raw jsonforms object and dispatch method, e.g.
import { inject } from 'vue';
-
-const useCustomBinding = (props) => {
- const jsonforms = inject<JsonFormsSubStates>(JSON Forms Vue 3 Coreforms');
- const dispatch = inject<Dispatch<CoreActions>>('dispatch');
-
- return {
- // use props, jsonforms and dispatch to construct own binding
- };
-};
-Of course these can also be directly injected into your components, e.g.
-const myComponent = defineComponent({
- inject: [JSON Forms Vue 3 Coreforms', 'dispatch'],
-});
-The injected jsonforms object is not meant to be modified directly.
- Instead it should be modified via the provided dispatch and by changing the props of the json-forms component.
The JSON Forms project is licensed under the MIT License. See the LICENSE file for more information.
- -Our current roadmap is available here.
- -JSON Forms is developed by EclipseSource.
-If you encounter any problems feel free to open an issue on the repo. - For questions and discussions please use the JSON Forms board. - You can also reach us via email. - In addition, EclipseSource also offers professional support for JSON Forms.
- -See our migration guide when updating JSON Forms.
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Helper function to merge two styles definitions. The contained classes will be combined, not overwritten.
-Example usage:
-const myStyles = mergeStyles(defaultStyles, { control: { root: 'mycontrol' } });
-Adds styles, appliedOptions and childUiSchema
-Adds styles, isFocused, appliedOptions and onChange
-Adds styles and appliedOptions
-Adds styles and appliedOptions
-Generated using TypeDoc
-Complex Forms in the blink of an eye
-JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
- -This is the JSON Forms Vue 2 Vanilla renderers package which provides a HTML5-based renderer set for JSON Forms Vue 2.
- -See our JSON Forms Vue seed repository to get started as quickly as possible.
- Make sure to switch to branch vue2.
Install JSON Forms Core, Vue 2 and Vue 2 Vanilla Renderers.
-npm i --save @jsonforms/core @jsonforms/vue2 @jsonforms/vue2-vanilla
-Also add the packages to the transpile dependencies in the vue.config.js file:
module.exports = {
- transpileDependencies: [
- '@jsonforms/core',
- '@jsonforms/vue2',
- '@jsonforms/vue2-vanilla',
- ],
-};
-Use the json-forms component for each form you want to render and hand over the renderer set.
<script>
-import { JsonForms } from '@jsonforms/vue2';
-import { vanillaRenderers } from '@jsonforms/vue2-vanilla';
-import { defineComponent } from 'vue';
-
-const renderers = [
- ...vanillaRenderers,
- // here you can add custom renderers
-];
-
-const schema = {
- type: 'object',
- properties: {
- name: {
- type: 'string',
- minLength: 1,
- },
- done: {
- type: 'boolean',
- },
- due_date: {
- type: 'string',
- format: 'date',
- },
- recurrence: {
- type: 'string',
- enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
- },
- },
- required: ['name', 'due_date'],
-};
-
-const uischema = {
- type: 'VerticalLayout',
- elements: [
- {
- type: 'Control',
- label: false,
- scope: '#/properties/done',
- },
- {
- type: 'Control',
- scope: '#/properties/name',
- },
- {
- type: 'HorizontalLayout',
- elements: [
- {
- type: 'Control',
- scope: '#/properties/due_date',
- },
- {
- type: 'Control',
- scope: '#/properties/recurrence',
- },
- ],
- },
- ],
-};
-const data = {};
-
-export default defineComponent({
- name: 'app',
- components: {
- JsonForms,
- },
- data() {
- return {
- renderers: Object.freeze(renderers),
- data,
- schema,
- uischema,
- };
- },
- methods: {
- onChange(event) {
- this.data = event.data;
- },
- },
-});
-</script>
-<template>
- <json-forms
- :data="data"
- :schema="schema"
- :uischema="uischema"
- :renderers="renderers"
- @change="onChange"
- />
-</template>
-By default the Vanilla Renderers don't apply any CSS at all.
- For a quick start you can use @jsonforms/vue-vanilla/vanilla.css.
For more information on how JSON Forms can be configured, please see the README of @jsonforms/vue2.
Each rendered HTML element specifies a CSS class which can be used to style it. - This process can also be customized so that each element declares user-specified CSS classes. - Therefore JSON Forms Vue Vanilla can be integrated with any CSS-only UI framework quite easily.
-You can find the default CSS classes in defaultStyles.ts.
-To render your own classes simply provide them as styles.
- These styles replace the defaultStyles.
- If you want to fall back to defaultStyles or combine them with your own classes you'll need to do so programmatically, e.g.:
<script>
-import { JsonForms } from '@jsonforms/vue2';
-import {
- defaultStyles,
- mergeStyles,
- vanillaRenderers,
-} from '@jsonforms/vue2-vanilla';
-import { defineComponent } from 'vue';
-
-const renderers = [
- ...vanillaRenderers,
- // here you can add custom renderers
-];
-
-// mergeStyles combines all classes from both styles definitions
-const myStyles = mergeStyles(defaultStyles, {
- control: { root: 'my-control' },
-});
-
-export default defineComponent({
- name: 'app',
- components: {
- JsonForms,
- },
- data() {
- return {
- renderers: Object.freeze(renderers),
- data,
- schema,
- uischema,
- };
- },
- methods: {
- onChange(event) {
- this.data = event.data;
- },
- },
- provide() {
- return {
- styles: myStyles,
- };
- },
-});
-</script>
-<template>
- <json-forms
- :data="data"
- :schema="schema"
- :uischema="uischema"
- :renderers="renderers"
- @change="onChange"
- />
-</template>
-You can also use specify styles in the ui schema via the options.styles property.
- Attributes specified here override the respective defaultStyles or provided styles.
- Attributes not specified here fall back to either the defaultStyles or provided styles.
{
- "type": "Control",
- "scope": "#/properties/name",
- "options": {
- "styles": {
- "control": {
- "root": "my-control-root"
- }
- }
- }
-}
-The JSONForms project is licensed under the MIT License. See the LICENSE file for more information.
- -Our current roadmap is available here.
- -See our migration guide when updating JSON Forms.
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Constructs a props declaration for Vue components which shall be used as - master list items.
-Constructs a props declaration for Vue components which can be used - for registered renderers and cells. These are typically used in combination - with one of the provided bindings, e.g. 'useJsonFormsControl'.
-Use the generic type parameter when using a specialized binding, e.g.
- rendererProps<Layout>() in combination with useJsonFormsLayout or
- rendererProps<ControlElement>() in combination with useJsonFormsControl.
Provides bindings for 'Control' elements which resolve to 'allOf' schema elements.
-Access bindings via the provided reactive control object.
- Dispatch changes via the provided handleChange method.
Provides bindings for 'Control' elements which resolve to 'anyOf' schema elements.
-Access bindings via the provided reactive control object.
- Dispatch changes via the provided handleChange method.
Provides bindings for 'Control' elements which resolve to 'array' schema elements.
-Access bindings via the provided reactive control object.
- Dispatch changes via the provided handleChange method.
Provides bindings for 'Control' elements which resolve to 'array' elements which - shall be rendered as a layout instead of a control.
-Access bindings via the provided reactive 'layout' object.
-Provides bindings for cell elements. Cells are meant to show simple inputs, - for example without error validation, within a larger structure like tables.
-Access bindings via the provided reactive 'cell' object.
- Dispatch changes via the provided handleChange method.
Provides generic bindings for 'Control' elements. - Should be used when no specialized bindings are appropriate.
-Access bindings via the provided reactive control object.
- Dispatch changes via the provided handleChange method.
Provides bindings for 'Control' elements which can provide a 'detail', - for example array and object renderers.
-Access bindings via the provided reactive control object.
- Dispatch changes via the provided handleChange method.
Provides bindings for a cell dispatcher. Cells are meant to show simple inputs, - for example without error validation, within a larger structure like tables.
-Access bindings via the provided reactive 'cell' object.
- Dispatch changes via the provided handleChange method.
Provides bindings for enum cell elements. Cells are meant to show simple inputs, - for example without error validation, within a larger structure like tables.
-Access bindings via the provided reactive 'cell' object.
- Dispatch changes via the provided handleChange method.
Provides bindings for 'Control' elements which resolve to 'enum' schema elements.
-Access bindings via the provided reactive control object.
- Dispatch changes via the provided handleChange method.
Provides bindings for 'Label' elements.
-Access bindings via the provided reactive label object.
Provides bindings for 'Layout' elements, e.g. VerticalLayout, HorizontalLayout, Group.
-Access bindings via the provided reactive 'layout' object.
-Provides bindings for list elements of a master-list-detail control setup. - The element using this binding is not supposed to be registered as an own renderer - but used in a more specialized control.
-Access bindings via the provided reactive 'item' object.
-Provides bindings for 'Control' elements which resolve to multiple choice enums.
-Access bindings via the provided reactive control object.
- Dispatch changes via the provided handleChange method.
Provides bindings for 'Control' elements which resolve to 'oneOf' schema elements.
-Access bindings via the provided reactive control object.
- Dispatch changes via the provided handleChange method.
Provides bindings for 'oneOf' enum cell elements. Cells are meant to show simple inputs, - for example without error validation, within a larger structure like tables.
-Access bindings via the provided reactive 'cell' object.
- Dispatch changes via the provided handleChange method.
Provides bindings for 'Control' elements which resolve to manually constructed - 'oneOf' enums. These are used to enhance enums with label support.
-Access bindings via the provided reactive control object.
- Dispatch changes via the provided handleChange method.
Provides specialized bindings which can be used for any renderer. - Useful for meta elements like dispatchers.
-Access bindings via the provided reactive 'renderer' object.
-Generated using TypeDoc
-Complex forms in the blink of an eye
-JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
- -This is the JSON Forms Vue 2 package which provides the necessary bindings for Vue 2. It uses JSON Forms Core.
- -See our JSON Forms Vue seed repository to get started as quickly as possible.
- Make sure to switch to branch vue2.
Use the json-forms component for each form you want to render.
Mandatory props:
-data: any - the data to showrenderers: JsonFormsRendererRegistryEntry[] - the Vue renderer set to useOptional props:
-schema: JsonSchema - the data schema for the given data. Will be generated when not given.uischema: UISchemaElement - the ui schema for the given data schema. Will be generated when not given.cells: JsonFormsCellRendererRegistryEntry[] - the Vue cell renderer set to useconfig: any - form-wide options. May contain default ui schema options.readonly: boolean - whether all controls shall be readonly.uischemas: JsonFormsUiSchemaEntry[] - registry for dynamic ui schema dispatchingvalidationMode: 'ValidateAndShow' | 'ValidateAndHide' | 'NoValidation' - the validation mode for the formajv: AJV - custom Ajv instance for the formEvents:
-change: {data: any; errors: AJVError[]} - Whenever data and/or errors change this event is emitted.Example:
-<json-forms
- :data="data"
- :renderers="renderers"
- :schema="schema"
- :uischema="uischema"
- @change="onChange"
-/>
-export default defineComponent({
- components: {
- JsonForms,
- },
- data() {
- return {
- // freeze renderers for performance gains
- renderers: Object.freeze(renderers),
- data: {
- number: 5,
- },
- schema: {
- properties: {
- number: {
- type: 'number',
- },
- },
- },
- uischema: {
- type: 'VerticalLayout',
- elements: [
- {
- type: 'Control',
- scope: '#/properties/number',
- },
- ],
- },
- };
- },
- methods: {
- onChange(event) {
- this.data = event.data;
- },
- },
-});
-The @jsonforms/vue package offers JSON Forms Core bindings based on the composition API.
- These bindings handle the props given to the dispatch-renderer and use the JSON Forms Core to determine specialized inputs for many use cases like validation and rule-based visibility.
- Using these bindings as a basis, it's straightforward to create renderer sets for Vue 2.
import { ControlElement } from '@jsonforms/core';
-import { defineComponent } from 'vue';
-import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';
-
-const controlRenderer = defineComponent({
- name: 'control-renderer',
- props: {
- ...rendererProps(),
- },
- setup(props: any) {
- return useJsonFormsControl(props);
- },
- methods: {
- onChange(event: Event) {
- this.handleChange(
- this.control.path,
- (event.target as HTMLInputElement).value
- );
- },
- },
-});
-export default controlRenderer;
-rendererProps factory which declares all props required for each renderer.
- When using Typescript you can specify a UISchemaElement type to declare that you only expect UI schema elements of that type.setup call the appropriate binding for your renderer.
- Here we use useJsonFormsControl which will work on any Control element and provides a control property containing calculated attributes like data, description, errors, enabled and many more.
- It also provides a handleChange(path,value) method with which the managed data can be updated.<div>
- <input v-bind:value="control.data" @change="onChange" />
- <div class="error" v-if="control.errors">{{ control.errors }}</div>
-</div>
-This is a very simplified template for such a control.
- You can see how some of the control properties are bound against the input, including the handleChange method via onChange.
import {
- isControl,
- JsonFormsRendererRegistryEntry,
- rankWith,
-} from '@jsonforms/core';
-export const entry: JsonFormsRendererRegistryEntry = {
- renderer: controlRenderer,
- tester: rankWith(1, isControl),
-};
-It's convenient to create the JsonFormsRendererRegistryEntry within the same file as the renderer.
- Here it's ranked with priority 1 (higher is better) for any UI schema element which satisfies isControl.
These entries can then be collected and form the Vue renderer set handed over to the json-forms component.
The principle is the same as with the control example.
- The only difference here is the use of the provided dispatch-renderer which will determine the next renderer to use, based on its inputs.
import {
- isLayout,
- JsonFormsRendererRegistryEntry,
- Layout,
- rankWith,
-} from '@jsonforms/core';
-import { defineComponent } from 'vue';
-import {
- DispatchRenderer,
- rendererProps,
- useJsonFormsLayout,
-} from '@jsonforms/vue';
-
-const layoutRenderer = defineComponent({
- name: 'layout-renderer',
- components: {
- DispatchRenderer,
- },
- props: {
- ...rendererProps(),
- },
- setup(props: any) {
- return useJsonFormsLayout(props);
- },
-});
-
-export default layoutRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
- renderer: layoutRenderer,
- tester: rankWith(1, isLayout),
-};
-<div>
- <div
- v-for="(element, index) in layout.uischema.elements"
- v-bind:key="`${layout.path}-${index}`"
- >
- <dispatch-renderer
- v-bind:schema="layout.schema"
- v-bind:uischema="element"
- v-bind:path="layout.path"
- v-bind:enabled="layout.enabled"
- v-bind:renderers="layout.renderers"
- v-bind:cells="layout.cells"
- />
- </div>
-</div>
-The dispatch renderer is used to dispatch to the highest ranked registered renderer.
-Required props are schema, uischema and path.
- Optional props are enabled, renderers and cells.
- These can be used to implement more advanced use cases like hierarchical enablement and dynamically adapted renderer / cell sets.
The following bindings can be used for Control elements and provide a control property and handleChange method.
- The useJsonFormsArrayControl additionally provides addItem, removeItems, moveUp and moveDown methods.
useJsonFormsControluseJsonFormsControlWithDetailuseJsonFormsEnumControluseJsonFormsOneOfEnumControluseJsonFormsArrayControluseJsonFormsAllOfControluseJsonFormsAnyOfControluseJsonFormsOneOfControlThe following bindings can be used for Layout elements and provide a layout property.
- useJsonFormsArrayLayout is a mix between Control and Layout as it's meant for showing array elements within a specific layout.
useJsonFormsLayoutuseJsonFormsArrayLayoutThe following binding can be used for any renderer.
- It's main use case is within dispatch renderers.
- The binding provides a renderer property.
useJsonFormsRendererBesides renderers JSON Forms also supports a separate cells registry.
- Cells are meant to be simpler as normal renderers, rendering simplified inputs to be used within more complex structures like tables.
- The following bindings can be used for cells and provide a cell property and handleChange method.
useJsonFormsDispatchCelluseJsonFormsCelluseJsonFormsEnumCellThe last binding is a special one, meant to be used within lists of master-detail controls.
- In contrast to all other bindings it's not meant to be registered as an own renderer or cell.
- The binding provides an item propery.
useJsonFormsMasterListItemShould any of the provided bindings not completely match an intended use case, then you can create your own.
- When constructing a new binding you might want to access the injected raw jsonforms object and dispatch method, e.g.
import { inject } from 'vue';
-
-const useCustomBinding = (props) => {
- const jsonforms = inject<JsonFormsSubStates>(JSON Forms Vue 2 Coreforms');
- const dispatch = inject<Dispatch<CoreActions>>('dispatch');
-
- return {
- // use props, jsonforms and dispatch to construct own binding
- };
-};
-Of course these can also be directly injected into your components, e.g.
-const myComponent = defineComponent({
- inject: [JSON Forms Vue 2 Coreforms', 'dispatch'],
-});
-The injected jsonforms object is not meant to be modified directly.
- Instead it should be modified via the provided dispatch and by changing the props of the json-forms component.
The JSONForms project is licensed under the MIT License. See the LICENSE file for more information.
- -Our current roadmap is available here.
- -JSON Forms is developed by EclipseSource.
-If you encounter any problems feel free to open an issue on the repo. - For questions and discussions please use the JSON Forms board. - You can also reach us via email. - In addition, EclipseSource also offers professional support for JSON Forms.
- -See our migration guide when updating JSON Forms.
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-Generated using TypeDoc
-
To use this component you will need to add your own tester:
+ +Add the tester and renderer to JSONForms registry:
+ +Furthermore you need to update your module.
+