Different JSON form representations for the same data

[agonzalezgaliana]

Hi all,

We're working with the theia-tree-editor component. Our model-service class returns the different information to be used by JSON forms in order to show the details:

• UI Schema
• Node data
• JSON schema

During testing, we've found out that JSON forms shows the details with different layouting (even UI elements) depending on the information returned by the model-service.

The following is rendered when:

• UI Schema -> undefined
• Node data -> array of objects
• JSON schema -> the corresponding to the node

However if the JSON schema returned is undefined, a table is rendered:

Can someone explain what's the reason for this behavior? I guess that JSON forms uses a different UI because the absence or presence of the schema.

Also because of this behavior, the add button triggers the handleFormUpdate method of the tree widget in one case (table case) and not in the other.

Any explanations to this?

Many thanks in advance.

[eneufeld]

Hi @agonzalezgaliana ,
JsonForms is using the provided JSONSchema to render a form. If a JSONSchema is not provided (undefined) it is derived from the provided data.
The first screen is rendered when the array contains 'complex' data, eg an object.
The second screen is rendered when the array only contains simple data, eg only strings.

Can you paste your schema and your data?
The button should behave the same in both cases and trigger a form update as in both cases a new entry should be added to the array.

Best,
Eugen

[eneufeld]

Hi @agonzalezgaliana ,
I think the renderer tester doesn't handle the eClass const type correctly and thus takes the object list renderer instead of the table renderer. This would be a case for an issue in jsonforms.
For the method not being called this needs to be debugged.
Do you see any exceptions when pressing the button in the first scenario?

[agonzalezgaliana]

No errors or exceptions shown in the console 🤨

I'm debugging both scenarios. What I've seen till now is:

• Non working scenario: The onClick calls addItem with path == 'import' and value == {} (empty object as default value). Then I get to the renderer.ts class where the addItem method is being defined. Here I'm unable to continue since non of the following lines is being executed.

addItem: (path: string, value: any) => () => {  // The debugger gets to here but nothing inside the method is being called
    dispatch(
      update(path, array => {
        if (array === undefined || array === null) {
          return [value];
        }

        array.push(value);
        return array;
      })
    );
  }

• Working scenario: By clicking the button we jump directly to the renderer.ts class where the addItem method is being called (as opposite of the previous scenario).

[eneufeld]

hmm, that is strange.
So a breakpoint in line if (array === undefined || array === null) { is not called?
This looks like a jsonforms issue then. We will need to check.

[agonzalezgaliana]

So a breakpoint in line if (array === undefined || array === null) { is not called?

No, it's not called. I've retested it several times. Currently using JSON Forms "3.0.0-alpha.2"

[agonzalezgaliana]

I've opened an issue in JSON Forms