Accurate Player JSON Forms includes jsonforms.io bindings and renderers for AP Components.
In order to render a form you need to provide a schema that describes the data to collect:
const schema = {
type: "object",
properties: {
firstName: {
type: "string",
description: "Your first name",
},
lastName: {
type: "string",
description: "Your last name",
},
language: {
type: "string",
enum: ["Sweden", "England"],
},
isReady: {
type: "boolean",
},
isToggle: {
type: "boolean",
},
},
required: ["firstName", "lastName"],
};
You can also specify a UI Schema that describes the general layout of the form:
const uischema = {
type: "VerticalLayout",
elements: [
{
type: "HorizontalLayout",
elements: [
{
type: "Control",
scope: "#/properties/firstName",
},
{
type: "Control",
scope: "#/properties/lastName",
},
],
},
{
type: "Control",
scope: "#/properties/language",
},
{
type: "Control",
scope: "#/properties/isReady",
},
{
type: "Control",
scope: "#/properties/isToggle",
options: {
toggle: true,
},
},
],
};
To render the form we provide the schema and UI schema as properties on the <ap-json-forms>
component exported by this library. We can also pass form data using the
data
property, and get callbacks when the form data changes using the apChange
property:
import { ApJsonForms } from "@codemill/accurate-player-jsonforms";
ApJsonForms.register();
<ap-json-forms
.schema="${schema}"
.uischema="${uischema}"
.data="${initialData}"
.apChange="${(data: Data) => this.setData(data)}"
>
</ap-json-forms>
This will produce the following form:
Accurate Player JSON Forms does not support the Categorization layout renderer.
Options can be used to change the behaviour of controls, Accurate Player JSON Forms
adds a format option that allows enum properties to display as autocomplete input fields. This is done by setting the format option to
autocomplete
:
options: {
format: "autocomplete"
}
ApJsonForms (<ap-json-forms>)
:use this component to render form controls as specified by the given schemas.
Property | Description | Type | Required | Default |
---|---|---|---|---|
schema |
the json schema to use. | JsonSchema |
No | Generated from data |
uischema |
the UI schema to use. The UI schema is generated from the schema if left out. |
UISchemaElement |
No | Generated from schema |
data |
the form data (values) | Object |
No | - |
renderers |
The renderers to use | JsonFormsRendererRegistryEntry[] |
No | apRenderers exported by this package |
ajv |
Can be used to pass a custom AJV instance | Ajv |
No | - |
readonly |
If set to true , all renderers will be instructed to render in a disabled state. |
boolean |
No | false |
validationMode |
The validation mode to use | ValidationMode |
No | "ValidateAndShow" |
locale |
Use to set the locale to use | string |
No | - |
apChange |
A callback which is called on each data change, containing the updated data. | (data: Data) => void |
No | - |
apError |
A callback which is called on each form validation, containing the validation result. | (error: ErrorObject[]) => void |
No | - |