JSON Forms Documentation

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:

Form example

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 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"
}

Reference

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 -
Guide to Custom Forms