JSON Form

The JSON Form plugin renders a rich, schema-driven form for a JSON column instead of the default raw text area. You describe the shape of the data with a JSON Schema (extended with a few x-* keywords for layout and validation messages) and the form is generated by jedison, a JSON-Schema form generator, mounted inside the AdminForth create/edit views.

Unlike the JSON Editor plugin (a generic key-value editor), the JSON Form plugin gives you a fixed, validated form: nested objects, arrays, enums, discriminated unions, grids, tabs and typed inputs — all driven by a schema you control.

Installation

pnpm add @adminforth/json-form --save

Setting up

The plugin works only with json columns. If the target column is not of type json, the plugin throws during config validation.

First update schema:

model apartments {
      ...
  config    Json? 
}

and make migration:

pnpm makemigration --name add-apartment-config; pnpm migrate:local

Then make sure the target column is declared with the json datatype:

./resources/apartments.ts

import { AdminForthDataTypes } from 'adminforth';

export default {
  ...
  columns: [
    ...
    {
      name: 'config',
      type: AdminForthDataTypes.JSON,   // required: must be JSON
      label: 'Config',
    },
  ],
}

And finally import and attach the plugin, passing the field name and a schema:

./resources/apartments.ts

import JsonFormPlugin from '@adminforth/json-form';

export default {
  ...
  plugins: [
    ...
    new JsonFormPlugin({
      fieldName: 'config',
      schema: {
        title: 'RPG Character Creator',
        description: 'Create and customize your adventurer',
        type: 'object',
        'x-format': 'nav-vertical',
        properties: {
          identity: {
            title: 'Identity',
            type: 'object',
            'x-format': 'grid',
            required: ['name'],
            properties: {
              name: {
                title: 'Name',
                type: 'string',
                minLength: 2,
                'x-grid': { columns: 6 },
                'x-messages': { required: 'Every adventurer needs a name!' },
                default: 'Thalion Oakenshield',
              },
              // ...
            },
          },
          // ...
        },
      },
    }),
  ],
}

The same form is rendered in both the create and edit views for the config field.