🖍️ WP-Builder: with or within jsonforms

[bangank36]

Summary

I made this seperate ticket for deep discussion on the topic wether we should render the nested object using single form or multiple forms

• The prior thoughts can be found at 🖍️ WP-Builder: Integrate Form builder with Gutenberg Navigator #17 (comment)

There is a similar question on the forum as can see here. The requirement is exactly what I am after ?!?

Your case is a little bit special however as you explicitly mention that you have nested data structures. In this special case this could also be handled within JSON Forms. For this you want a custom object renderer and/or array renderer.

This is the same thoughts as mine in the NavigatorLayout and ObjectRenderer

These customized renderers are then able to show/hide their own controls and dispatch to their nested structures if needed to. This would give you a “dynamic” effect within a form and has the benefit that you don’t need to sync data over multiple JSON Forms instances.

In my method, I rendered only the NavigatorButton in the ObjectRenderer, and let the NavigatorScreen to display the form field for that object/array

Below is the rough comparison table of the 2 approach

issues	within jsonforms	with jsonforms
Number of forms	01	~
NavigatorProvider	inside Form ( NavigatorLayout )	Wrap outside
NavigatorScreens	inside Provider and wrap a JsonFormDispatch	Each screen contains a separate JsonForm
Data handling	by jsonform	manually, as we need to join the nested data into single root
uiSchema handling	TBA	TBA

Ongoing discussions

• Nested schema explain (op)

The generator is relatively simplistic and will just generate a vertically aligned form with a “control” for each property in the JSON Schema.
Nested schemas (i.e. nested objects and arrays) are then handled by the respective Object or Array renderer. Typically they just use the generator again, and repeat the process for their subschema.

• Generate full schema, for the need of generate all nested props to render on NavigatorScreens (op)

generateDefaultUISchema is the one which is also used internally in JSON Forms. You don’t need to import it directly, we export it via Generate.uiSchema(schema).
It produces a simple vertical layout where each property is handled by a control. Nested objects are then handled by the respective renderer. For example when a control points to a type: object element, the object control renderer will itself generate a simple vertical layout (actually using the same functionality) for each of its properties. Therefore the generated ui schemas can be flat.

If you’d like a different behavior I would recommend just copying the the ui schema generation code 37 and adjust it for your needs. You can also take a look at this PR 19 where a “deep ui schema generator” was also suggested for JSON Forms.

• Deep uischema generator PR 19

[bangank36]

08 July 2023

Let's see how I forsee the markup of the NavigatorLayout,

• The given schema is in this comment

<>
	<NavigatorScreen path="/">
		<JsonFormsDispatch />
	</NavigatorScreen>
	<NavigatorScreen path="/address">
		<JsonFormsDispatch />
	</NavigatorScreen>
	<NavigatorScreen path="/address/country">
		<JsonFormsDispatch />
	</NavigatorScreen>
	<NavigatorScreen path="/job">
		<JsonFormsDispatch />
	</NavigatorScreen>
</>

Possible solutions for this matter

• Via React.Context inside the NavigatorLayout WP-Builder: pass nested renderer to NavigatorLayout #26
• Tweak the useJsonForms hook?
• Deep uischema generator

[bangank36]

09 July 2023

• With the latest PR WP-Builder: Remove object fields render #29 has been merged, we now can achieve the disclosure views using Gutenberg Navigator component!
• The approach selected is to wrap the Navigator WITHIN form component with the new NavigatorLayout renderer proved it work, we also introduce the new context to pass the inner object content into NavigatorScreen, this may cause some redundant re-rendering, but we can address the issue with useMemo to improve performance issue
• The follow phase should be keeping an eye on the ongoing discussion on jsonforms about the new context method, also we need to continue with other renderer and update styling for the form
• Reference to Gutenberg Global UI for the UI/UX https://wordpress.github.io/gutenberg/?path=/story/editsite-globalstylesui--global-styles-ui
• Attached is the current status of the disclosure screens