Help with config

General
1

Hello,
I am new with JSONForms. It seems possible, from what I have seen in the examples package, to set global configuration parameters, such as showUnfocusedDescription: true.
How can I apply this config in my app ?

[original thread by piero-la-lune]

2

Hi @piero-la-lune, we offer a SET_CONFIG action, with which the config can be set in the Redux variant of JSON Forms, e.g. Actions.setConfig(yourconfig)(dispatch);

We don’t expose the config yet in the Redux-less JsonForms component. However technically the config is just part of the context, so instead of using the JsonForms component itself you can copy it’s behavior by using a combination of JsonFormsStateProvider and JsonFormsDispatch. Please check the implementation of JsonForms component as a reference. You can place the config just next to the core, renderers and cells and it should be picked up automatically.

3

[piero-la-lune]

Thanks a lot for your answer. I tried the “Redux-less” form, without luck. I am not sure what I am doing wrong :

4

[piero-la-lune]

function App() {
  const [standaloneData, setStandaloneData] = useState(data);
  useEffect(() => {
    console.log(standaloneData);
  }, [standaloneData]);
  const ajv = AJV.Ajv;
  const refParserOptions = RefParser.Options;
  return (
    <div className='App'>
      <JsonFormsStateProvider
        initState={{
          core: {
            ajv,
            data,
            refParserOptions,
            schema: schema,
            uischema: uischema
          },
          renderers: materialRenderers,
          cells: materialCells,
          config: {
            showUnfocusedDescription: true
          }
        }}
      >
        <JsonFormsDispatch onChange={({ errors, data }) => setStandaloneData(data)} />
      </JsonFormsStateProvider>
    </div>
  );
}
5

[piero-la-lune]

The form is displayed as it should be, but the showUnfocusedDescription parameter is not applied

6

This is correct, I missed that the JsonFormsStateProvider doesn’t just use the initState but handles its attributes manually. Therefore you also need to adapt the JsonFormsStateProvider to get the config into the state.

I would like to suggest to place the code below into a separate file and import that version of JsonForms into your application instead of the “original” one. Once we extend the JsonForms component all you have to do is to remove the file again and adjust your imports.

import { useReducer, useEffect } from 'react';
import {
  coreReducer,
  rendererReducer,
  cellReducer,
  Actions,
  Generate,
} from '@jsonforms/core';
import { JsonFormsContext, JsonFormsDispatch } from '@jsonforms/react';

const JsonFormsStateProvider = ({ children, initState }) => {
  const [core, dispatch] = useReducer(coreReducer, initState.core);
  const [renderers] = useReducer(rendererReducer, initState.renderers);
  const [cells] = useReducer(cellReducer, initState.cells);
  const { data, schema, uischema, ajv, refParserOptions } = initState.core;
  useEffect(() => {
    dispatch(Actions.init(data, schema, uischema, { ajv, refParserOptions }));
  }, [data, schema, uischema, ajv, refParserOptions]);
  return (
    <JsonFormsContext.Provider
      value={{
        core,
        renderers,
        cells,
        config: initState.config,
        dispatch,
      }}
    >
      {children}
    </JsonFormsContext.Provider>
  );
};

export const JsonForms = (props) => {
  const {
    ajv,
    data,
    schema,
    uischema,
    renderers,
    cells,
    refParserOptions,
    onChange,
    config,
  } = props;
  const schemaToUse = schema !== undefined ? schema : Generate.jsonSchema(data);
  const uischemaToUse =
    typeof uischema === 'object' ? uischema : Generate.uiSchema(schemaToUse);
  return (
    <JsonFormsStateProvider
      initState={{
        core: {
          ajv,
          data,
          refParserOptions,
          schema: schemaToUse,
          uischema: uischemaToUse,
          config,
        },
        renderers,
        cells,
      }}
    >
      <JsonFormsDispatch onChange={onChange} />
    </JsonFormsStateProvider>
  );
};

I hope this helps :wink:

7

These are the default options for the config, you might want to set them also.

8

[piero-la-lune]

Works perfectly, thank you!

9

With Rework JsonFormsStateProvider by AlexandraBuzila · Pull Request #1583 · eclipsesource/jsonforms · GitHub we now made the config configurable. This will be part of the next alpha/release.

10

[piero-la-lune]

Great, thank you!