Available Actions

ATTENTION

As of JSON Forms 2.5 the React-Redux variant is deprecated in favor of the JSON Forms "standalone" component. See our migration guide for more information.

JSON Forms provides a couple of actions to interact with the store, which we describe here. All actions might either be imported directly or via the Actions utility.

init(data: any, schema: JsonSchema, uischema: UISchemaElement, options: InitActionOptions | AJV.Ajv)

API

The INIT action expects the data, schema and UI Schema and initializes the store accordingly. Currently, this action must be called in order for JSON Forms to work properly.

The options parameter allows customization of the validator and the ref resolver that are both used by JSON Forms.

update(path: string, updater: (existingData: any) => any

API

The update action is used to update the data substate within the store. It expects two arguments: a dot-separated path describing which part of the data should be updated as well as a function that returns the value that should be used. The function gets passed the current value that might be used to calculate the updated value. mapDispatchToControlProps and mapDispatchToFieldProps provide a helper function called handleChange which already dispatches the update action, so that you rarely need to interact with update itself, if at all.

registerRenderer(tester: RankedTester, renderer: any)

API

This action allows you to register a renderer. It expects two arguments, the 1st being a tester and the 2nd the actual renderer. Please see the section about Custom Renderers for an example how to use these.

registerUISchema(tester: UISchemaTester, uischema: UISchemaElement)

API

When initializing JSON Forms you have to provide a UISchema. Generally this is already enough as it covers most use cases. But in some cases, especially when rendering (nested) arrays, you have to provide an UISchema which can be retrieved. This allows you, for example, to customize the layouts for the elements of the array.

The registration of an UISchema looks as follows:

import { Actions, NOT_APPLICABLE } from '@jsonforms/core';

store.dispatch(
  Actions.registerUISchema(
    (jsonSchema, schemaPath) => {
      return schemaPath === '#/properties/firstarray' ? 2 : NOT_APPLICABLE;
    },
    {
      type: 'VerticalLayout',
      elements: [
        {
          type: 'Control',
          scope: '#/properties/firstName',
        },
        {
          type: 'Control',
          scope: '#/properties/lastName',
        },
      ],
    }
  )
);

You can retrieve a registered UI schema via the findUISchema function.

findUISchema(uischemas: object[], schema: JsonSchema, schemaPath: string, path: string, fallbackLayoutType?: string, control?: ControlElement, rootSchema?: JsonSchema)

API

To retrieve the registered UI schema you can call the 'findUISchema' function which is provided through the properties. This function needs the UI Schemas (which consists of a tester and a UI schema), the schema, the schemaPath and a subpath. Optionals parameters are a fallback layout type (VerticalLayoutby default), a control and the root schema. All those parameters are also passed through the properties. The usage is shown using a renderer.

import * as React from 'react';
import * as _ from 'lodash';
import { composePaths, ControlElement, Resolve } from '@jsonforms/core';
import { JsonFormsDispatch } from '@jsonforms/react';

export const MyControl = ({ data, path, uischemas, schema, onAdd, uischema, findUISchema }) => {
  const controlElement = uischema as ControlElement;
  const resolvedSchema = Resolve.schema(schema, `${controlElement.scope}/items`);

  return (
    <fieldset>
      <legend>My Control</legend>
      <div>
        {
          data ? _.range(0, data.length).map(index => {
            const uischema = findUISchema(uischemas, resolvedSchema, controlElement.scope, path);
            const childPath = composePaths(path, `${index}`);

            return (
              <JsonFormsDispatch
                schema={resolvedSchema}
                uischema={uischema}
                path={childPath}
                key={childPath}
              />
            );
          }) : <p>No data</p>
        }
      </div>
    </fieldset>
  );
};

unregisterUISchema(tester: UISchemaTester)

API

This action allows to unregister a previously registered UI schema.