Getting data from the standalone <JsonForms /> component?

General
1

Hi,

I want to put JsonForms inside of the widget, and when saving it, I would like to extract state from the component.

Right now the only feasible way to do it, as far as I see, is provide the onChange function handler, that will receive object with data and errors on every change, and store it in the state of parent component.

Are there any one-off actions that I can use, to get the data only when I actually request it (for e.g. once I’ve finished editting the whole form) ?

I’m looking into the source code and nothing has caught my eye yet.

Thank you in advance!

[original thread by Ivan Saveliev]

2

[Lily]

Hey Ivan,

There’s an example of using getData action in the seed app.
https://github.com/HelixCentre/jsonforms-react-seed/blob/master/src/App.tsx#L137

3

[Ivan Saveliev]

@lilyh thanks a lot, but it seems to be a different case. Example passes state from Redux store inside of the component as a prop. Please correct me if I’m wrong.

I want to get data of the form that lives inside JsonForms outside of the component. So I want to lift state up from the JsonForms to the parent component, and for example send it to the

4

[Lily]

Hey Ivan, JsonForms has a couple of different ways of managing state. The example linked above uses JsonFormsReduxContext.

If you are not using redux you can use the JsonForms React context.

JsonForms component combines 2 components, the JsonFormsStateProvider and the JsonFormsDispatch.

JsonFormsStateProvider provides state
JsonFormsDispatch is responsible for rending.

So you can create some custom component which consumes the JsonFormsContext and create your own version of the JsonForms component

Here is a very rough example.

const MyCustomContextConsumer = () => {
const ctx = useContext(JsonFormsContext)
return (<div>
<h3>JsonFormsContext<h3>
     <p>{JSON.stringify(ctx)}</p>
<div>)
}
export const MyJsonForms = (
  props: JsonFormsInitStateProps & JsonFormsReactProps
) => {
  const {
    ajv,
    data,
    schema,
    uischema,
    renderers,
    refParserOptions,
    onChange
  } = props;
  return (
    <JsonFormsStateProvider
      initState={{
        core: {
          ajv,
          data,
          refParserOptions,
          schema,
          uischema,
          errors: [] // TODO
        },
        renderers
      }}
    >
    <MyCustomContextConsumer/>
      <JsonFormsDispatch onChange={onChange} />
    </JsonFormsStateProvider>
  );
};