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 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.