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
support alternative controls for some data types, the format
or the toggle
option is used to switch to alternative controls.
An autocomplete control can be used instead of a dropdown for enum fields by setting the format
option to "autocomplete"
.
For example:
"type": "Control",
"scope": "#/properties/someValue",
"options": {
"format": "autocomplete"
A multiselect control can be used for array fields by setting the format
option to "multiselect"
. A dropdown with available values will be
displayed when the control has focus if the schema for the array items contains an enum
.
Example json:
const schema = {
type: "object",
properties: {
assignees: {
type: "array",
items: {
enum: ["Anna", "Bert", "Cris", "Dani"],
const uischema = {
type: "Control",
scope: "#/properties/assignees",
label: "Assignees",
options: {
format: "multiselect",
Instead of the default checkbox component for boolean properties a toggle can be used by specifying the toggle
option.
Example json:
const schema = {
type: "object",
properties: {
toggle: {
type: "boolean",
const uischema = {
type: "Control",
scope: "#/properties/toggle",
label: "Toggle",
options: {
toggle: true,
Instead of the default input field, textarea
can be used as format in order to render a textarea.
The text area supports maxlength
attribute which validates the number of characters used in the textarea.
Example json:
const schema = {
type: "object",
properties: {
textarea: {
type: "string",
maxlength: 16,
const uischema = {
type: "Control",
scope: "#/properties/textarea",
label: "Text area",
options: {
format: "textarea",
Example json:
const schema = {
type: "object",
properties: {
radio: {
type: "string",
enum: ["Radio 1", "Radio 2"],
const uischema = {
type: "Control",
scope: "#/properties/radio",
label: "Radio button",
options: {
format: "radio",
JSON Forms supports JSON Schema's "date", "time" and "date-time" formats, Date and Time picker.
Example json:
const schema = {
type: "object",
properties: {
datetime: {
type: "string",
format: "date-time",
const uischema = {
type: "Control",
scope: "#/properties/datetime",
label: "Datetime",
Example json:
const schema = {
type: "object",
properties: {
date: {
type: "string",
format: "date",
const uischema = {
type: "Control",
scope: "#/properties/date",
label: "Date",
Example json:
const schema = {
type: "object",
properties: {
time: {
type: "string",
format: "time",
const uischema = {
type: "Control",
scope: "#/properties/time",
label: "Time",
use this component to render form controls as specified by the given schemas.
Property
Description
Required
Default
uischema
the UI schema to use. The UI schema is generated from the schema
if left out.
UISchemaElement
Generated from schema
the form data (values)
Object
renderers
The renderers to use
JsonFormsRendererRegistryEntry[]
apRenderers
exported by this package
Can be used to pass a custom AJV instance
readonly
If set to true
, all renderers will be instructed to render in a disabled state.
boolean
false
validationMode
The validation mode to use
ValidationMode
"ValidateAndShow"
locale
Use to set the locale to use
string
apChange
A callback which is called on each data change, containing the updated data.
(data: Data) => void
apError
A callback which is called on each form validation, containing the validation result.
(error: ErrorObject[]) => void
Didn't find the answer you're looking for?
Contact us at [email protected] and we'll get back to you as soon as possible.
If you are experiencing technical issues or have questions about your account you can access our Help Center Portal
here.
View the Help Center Quick Start Guide
View the Help Center Getting Started Guide