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

Date

Example json:

const schema = {
  type: "object",
  properties: {
    date: {
      type: "string",
      format: "date",
    },
  },
};

const uischema = {
  type: "Control",
  scope: "#/properties/date",
  label: "Date",
};

Time

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.