How to re-inizalize a complex json form

General
1

I have a strange behaviour in a situation with a very dynamic JSONForm used in a GLSP diagram

The user can select different diagram elements in GLSP Diagram. Each element shows different form content. On the selection event within my diagram panel I refresh the form panel by calling the render method and updating the schema and data:

 this.panelContainer.render(<JsonForms
    data={bpmnPropertiesData}
    schema={bpmnPropertiesSchema}
    uischema={bpmnPropertiesUISchema}
    cells={vanillaCells}
    renderers={bpmnRenderers}
    onChange={({ errors, data }) => this.setState({ data })}
   />);

This works all fine.

Peek 2023-02-19 23-23

But the problem is, that depending on the selected element, the form schema can change completely. This causes a Warning on the JavaScript console, because some of the data fields have now changed:

....
2023-02-19T22:23:16.620Z root WARN No applicable cell found. {
  type: 'Control',
  scope: '#/properties/conditions',
  label: 'Conditions',
  options: { detail: { type: 'VerticalLayout', elements: [Array] } }
} {
  type: 'object',
  properties: {
    name: { type: 'string' },
    documentation: { type: 'string', description: 'Task description.' }
  }
......

The user must now ‘re-initalize’ the form by clicking on the first Tab (Category) in my multi-category form.

I figured out, that when I simulate a click event on the first category (li-Tag), after the selection has changed, the warning can be avoided.

My additional code to simulate the click looks like this:

   const subCategories = this.bodyDiv.querySelector('ul.category-subcategories');
   if (subCategories) {
     const firstCategory = subCategories.querySelector('li');
     if (firstCategory) {
        // dispatch click event...
        const event = new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window
        });
    firstCategory.dispatchEvent(event);
   }
 }

But also this does not highlight the first section, but at least the warning is gone and the first category is visible (but not high-lighted).

My question is: In case, I need to re-render the JSONForm content by calling

this.panelContainer.render(....)

is there a way to ‘re-initalize’ the form?

Sorry, the problem is hard to explain :wink:

2

Hi @rsoika!

There seems to be a renderer with local state involved which does not properly reset its state when necessary. I had a quick look, it seems that our CategorizationRenderer does not properly check for the case where the UI Schema changes but returns an older categorization. I created a issue in the repo.

You can use React’s key mechanism to force a new component being created, e.g.

 this.panelContainer.render(<JsonForms
    data={bpmnPropertiesData}
    schema={bpmnPropertiesSchema}
    uischema={bpmnPropertiesUISchema}
    cells={vanillaCells}
    renderers={bpmnRenderers}
    onChange={({ errors, data }) => this.setState({ data })}
    key={someId}
   />);

You basically always hand over a new key whenever your selected element changes. By this a completely new form will be rendered each time, thereby fixing any issues were local state is not properly updated to the environment.

3

Thanks! Setting the id did the trick.
Sometimes things are so easy to solve - if you just know how :wink: