Accurate Player JSON Forms

Accurate Player JSON Forms includes jsonforms.io bindings and renderers for AP Components .

Getting started

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:
Technical Limitations
Accurate Player JSON Forms does not support the Categorization layout renderer.
Additional control format
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.
Autocomplete
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"
Multiselect
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",
Toggle
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,
Textarea
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",
Radio
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",
Date & Time
JSON Forms supports JSON Schema's "date", "time" and "date-time" formats, Date and Time picker.
Datetime
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",
Reference
ApJsonForms (<ap-json-forms>):
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