Support multiple jsonforms instances within a single store

[edgarmueller]

Currently, we only support a single instance of jsonforms in a redux store. We should find out what's necessary to support multiple forms within a single store.

[gentledepp]

Top!
Additionally it seems you are storing functions in the store which are not serializable.

Redux-persist is used oftentimes to make applications kind-a offline capable. But for that to work, the state must be JSON serializable. (sorry for this off-topic stuff. I just thought that this could be a suitable place to remind you ;-))

[edgarmueller]

I had a look at this issue and I think we actually already support this scenario,
but we didn't document it anywhere (yet).

The JsonForms component is capable of handling uischema and schema props.
If you don't specify these, they will be fetched from the store, but if you
specify them explicitly, they will be used to render the form.
Additionally, the JsonForms component also takes a path prop which specifies
the instance path which is used to bind against the data, e.g.

<JsonForms uischema={carUiSchema}
         path={'car'}
         schema={carSchema} />

This form will be bound against the car property of the data.
This implies some restrictions on the data object you pass
to the init action creator, which needs to have the correct structure in order
to initialize any form correctly, in this case something like:

{
  car: {
      ...
  }
}

Does this suffice for addressing your requirements? Or do you have any additional questions?

About redux-persist: thanks, we'll have a look at it.

[gentledepp]

Hi! It seems as if this covers our usecase.
Would be great to have an example in the docs though.
Any chance you could provide one?

[edgarmueller]

Yes, sure, I'll update the docs and let you know.

[edgarmueller]

We updated the docs, see http://jsonforms.io/docs/store ('Linking forms' and 'multiple forms within a single store'). Let us know whether this works for you.

[gentledepp]

Yes, thank you!
It it much clearer now!

[edgarmueller]

If you have any additional questions, let us know.

[gentledepp]

sure - thanks 👍

[Daveiano]

If I add a second jsonform to my page, I am getting an empty error object, it does not track the required fields anymore, am I missing something here?

[edgarmueller]

@Daveiano Can you show us your code such that we are able to re-produce the described behavior?

[Daveiano]

@edgarmueller Thank you for the fast reply! Sure here is a basic version:

import React, { Component } from 'react';

import { JsonForms } from '@jsonforms/react';
import SubmitControl from './submit-control';

const test1Schema = {
    title: 'Test 1',
    type: 'object',
    properties: {
      firstName: { type: 'string' },
      lastName: { type: 'string' }
    },
    required: [
      'firstName',
      'lastName'
    ]
  },
  test1UiSchema = {
    'type': 'Group',
    'label': 'Test 1',
    'elements': [
      {
        'type': 'HorizontalLayout',
        'elements': [
          {
            'type': 'Control',
            'scope': '#/properties/firstName'
          },
          {
            'type': 'Control',
            'scope': '#/properties/lastName'
          }
        ]
      }
    ]
  },
  test2UISchema = {
    'type': 'Group',
    'label': 'Test 2',
    'elements': [
      {
        'type': 'HorizontalLayout',
        'elements': [
          {
            'type': 'Control',
            'scope': '#/properties/street'
          },
          {
            'type': 'Control',
            'scope': '#/properties/city'
          },
          {
            'type': 'Control',
            'scope': '#/properties/zipCode'
          }
        ]
      }
    ]
  },
  test2Schema = {
    title: 'Test 2',
    type: 'object',
    properties: {
      street: { type: 'string' },
      city: { type: 'string' },
      zipCode: { type: 'string' }
    },
    required: [
      'street',
      'city'
    ]
  };

class Form extends Component {
  render() {
    return (
      <main>
        <JsonForms schema={test1Schema} uischema={test1UiSchema} path='test1' />
        <JsonForms schema={test2Schema} uischema={test2UISchema} path='test2' />
        <SubmitControl />
      </main>
    );
  }
}

export default Form;

If I look into the redux formState, the data is valid and in the correct path (test1 and test2), but the errors array is always empty, but I have added four required fields in the schema.

[edgarmueller]

What schema do you pass to the init action? I'd think that if you have a schema holding both subschemas test1 and test2 this should work. This is because the UPDATE_DATE action, which also causes the validation to be run, relies on the schema from the store and hence the root schema must be available, i.e. if you could wrap your schemas as in the following, this should work.

const schema = {
  type: 'object',
  properties: {
    test1: test1Schema,
    test2: test2Schema,
  },
};

store.dispatch(Actions.init(data, schema, ...));

Also note that data should be initialized to empty objects, if you want the required validation errors to be shown (a common pitfall we'll fix in the future, see #708). Can you give it a try?